본문 바로가기

전체 글

 (104)
<HTML> 시맨틱 태그 - 시맨틱 태그란? 시맨틱(semantic), 단어 그대로 의미를 담고 있는 태그를 일컫는다. HTML5에서 새롭게 도입된 요소다. 시맨틱 태그를 통해 웹 페이지 내의 콘텐츠들에 의미 단위의 중요성을 부과하여 보다 의미론적인 페이지 구성이 가능하다. - 시맨틱 태그 종류 우리가 일반적으로 잘 알고 있고 사용하고 있는 div, span 태그는 이에 포함되지 않으며 다음과 같은 것들이 있다. *header : 헤더를 나타냄 *nav : 내비게이션을 나타냄 *aside : 사이드에 위치하는 공간을 나타냄 *section : 본문의 내용들을 포함하는 공간을 나타냄 *article : 본문의 내용을 나타냄 *footer : 푸터를 나타냄 - 시맨틱 태그의 필요성 웹 사이트는 사람들이 찾고 이용할 때에만 그 존재 ..
<자바스크립트 Javascript> 스코프(Scope) (2) - 함수의 상위 스코프를 결정하는 방법 1) 동적 스코프(Dynamic scope) : 함수를 호출한 위치에 따라 상위 스코프를 결정 2) 정적 스코프(Static scope) 혹은 렉시컬 스코프(Lexical scope) : 함수를 선언한 위치에 따라 상위 스코프를 결정 이 둘 중 자바스크립트와 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다. 따라서 함수를 선언한 시점에 상위 스코프를 결정한다. - 암묵적 전역(implicit global) 어떤 함수에, 선언하지 않은 식별자가 있는 경우 해당 함수를 호출하면 자바스크립트는 이를 프로퍼티로 동적 생성한다. 따라서 이 선언하지 않는 식별자는 전역 객체의 프로퍼티가 되며, 전역 변수처럼 동작하게 된다. 다만 이 선언하지 않은 식별자는 변수가 아니므로 변..
<자바스크립트 Javascript> 스코프(Scope) (1) - 스코프란? 일종의 규칙이다. 유효범위를 뜻하는 단어로서, 식별자가 사용될 수 있는, 스스로가 속한 범위를 말한다. 스코프 자체로 범위라는 구분 단위를 제공해주기 때문에, 식별자 이름이 같더라도 범위가 다르면 중복이 허용되므로 이러한 방식으로 충돌을 방지한다. - 스코프의 구분 자바스크립트에서의 스코프는 두 가지로 나눌 수 있다. 또한, 모든 변수는 스코프를 기본으로 가지므로 스코프에 따라 변수 구분도 가능하다. 1) 전역 스코프(Global scope) - 전역 변수(Global variable) : 모든 곳에서 참조가(해당 식별자의 사용) 가능하다. 자바스크립트는 보통의 언어와 달리 시작점을 갖지 않기 때문에 쉽게 외부에 전역 변수 선언이 가능하다. 다만, 이러한 편리함이 도리어 전역 변수의 남용을..
<자바스크립트 Javascript> 객체 사용 시 주의점 - 객체 사용 시 주의점 사소하지만 가볍게 여기면 어느새 버그로 나타나 1시간 이상을 헤메이게도 하는 그런 주의점들(...)을 모아보았다. 객체 사용 시 주의할 점이다. 1) 프로퍼티 키 이름이 두 단어 이상일 때 프로퍼티 키 이름이 두 단어 이상일 때는 반드시 따옴표로 감싸주어야 한다. 그렇지 않은 경우 자바스크립트는 이를 인식하지 못하고 에러를 발생시킨다. let user = { "Oh yeah" : "something" } 이는 객체 접근 시에도 주의해야 할 부분으로, 키 이름이 두 단어 이상일 때는 대괄호( [] )를 사용해야 자바스크립트에서 정상적으로 인식이 가능하다. 다만 단어의 연결에 $, _ 기호를 사용한 경우는 대괄호를 쓰지 않아도 무방하다. 2) 객체 내의 프로퍼티가 여러개일 때 프로퍼..
<CSS> 반응형 웹 디자인 - 메뉴바 (3) 지난 (1), (2) 글에서 반응형 웹 디자인의 메뉴바를 완성하였으나, 드림코딩 강의를 참조하여 코드를 다시 수정해보았다. 일명 리팩토링! 하였다. 디자인은 위처럼 에어비앤비를 테마로하여 다시 만들어보았다. - HTML 전체 헤더는 클래스명 nav로 하여 section 태그로 만들었다. 지난번과 달리 nav를 감싸는 더 큰 div 박스는 불필요하여 제거하였다. 브랜드명에는 로고 이미지도 새롭게 추가하였다. 메뉴는 지난번처럼 중단점 이하에서 나타나는 메뉴를 따로 만들지 않고, 하나의 메뉴만 만들고 이를 CSS에서 조작하여 미디어 쿼리를 통해 중단점 이하일 경우 다르게 나타나도록 만들었다. 코드가 훨씬 간결하고 보기 편해졌다. 맨 하단의 클래스 fas는 중단점 이하에서 나타나는 햄버거 모양의 메뉴바 아이콘이..

티스토리툴바