네비게이션 메뉴 작성, 특히 상단 메뉴 작성 시 많이 쓰는 HTML 태그와 CSS를 정리하였다.
*. HTML
<ul>과 <li> - 메뉴는 일종의 리스트(목록)과 같은 것이다. 보통 그 순서가 정해져 있지 않으므로 Unordered List를 쓴다.
<a> - 메뉴에 링크적인 요소를 준다. 메뉴 제작을 하면서 스타일 지정이 제일 많이오게되는 곳이다.
<span> - <a>안에 쓰게 되며, <a>에서만 주는 것에 한계가 있을 때 사용한다.
*. CSS - 모든 스타일시트 적용 대상은 [#ID 또는 .Class 또는 Tag]의 이름으로 넣어야한다.
[#ID 또는 .Class 또는 Tag] { width: 100%; } - (인터넷 익스플로러에서)메뉴와 본문 사이의 여백을 올바르게 잡기위해 넣어야한다.
*참고: width: 100%와 유사한 스타일시트로는 clear: both; display: block; 등이 있다.
ul { margin: 0; padding: 0; list-style: none; } - 목록 태그의 기본 스타일을 제거하고 여백을 없엔다.
li { display: inline; float: left; } - 개체를 한 줄에 들어가게 할 수 있게(쉽게 말하면 '글자 처럼 취급')하고 float: left;를 준다. 지금 상황에서는 같은 효과를 내므로 하나만 써도 무방하다.
*참고: 두 속성의 차이점을 알려면 float부터 이해해야한다.
a { display: block; float: left; } - display: block; 혼자 쓰일 때는 width :100%; clear: both;와 같은 효과를 내고, float: left; 또는 float: right;를 쓰게되면 뭉게지지 않는 하나의 블록이 형성된 것이라고 할 수 있다.
꾸미는 요소 들이다. 여러가지로 꾸밀 때는 스타일시트가 기존의 스타일시트를 덮어버리게 할 때가 많다.
border[공백으로 넣으면 전체, -top, -right, -left, -bottom을 쓸 수 있음.]: [굵기] [형식] #[색상];
border-color: #[색상]; background(-color): #[색상];
a { text-decoration: none; }
a:hover, a:active, a:visited
*. CSS3 요소 - 모질라 파이어폭스, 웹킷 엔진 사용 브라우저에서는 테스트 단계로 적용하고있다. 인터넷 익스플로러는 유감스럽게도 지원되지 않는다.
-moz-border-radius: [값]; -webkit-border-radius: [값]; *기본: border-radius: [값];
*. HTML
<ul>과 <li> - 메뉴는 일종의 리스트(목록)과 같은 것이다. 보통 그 순서가 정해져 있지 않으므로 Unordered List를 쓴다.
<a> - 메뉴에 링크적인 요소를 준다. 메뉴 제작을 하면서 스타일 지정이 제일 많이오게되는 곳이다.
<span> - <a>안에 쓰게 되며, <a>에서만 주는 것에 한계가 있을 때 사용한다.
*. CSS - 모든 스타일시트 적용 대상은 [#ID 또는 .Class 또는 Tag]의 이름으로 넣어야한다.
[#ID 또는 .Class 또는 Tag] { width: 100%; } - (인터넷 익스플로러에서)메뉴와 본문 사이의 여백을 올바르게 잡기위해 넣어야한다.
*참고: width: 100%와 유사한 스타일시트로는 clear: both; display: block; 등이 있다.
ul { margin: 0; padding: 0; list-style: none; } - 목록 태그의 기본 스타일을 제거하고 여백을 없엔다.
li { display: inline; float: left; } - 개체를 한 줄에 들어가게 할 수 있게(쉽게 말하면 '글자 처럼 취급')하고 float: left;를 준다. 지금 상황에서는 같은 효과를 내므로 하나만 써도 무방하다.
*참고: 두 속성의 차이점을 알려면 float부터 이해해야한다.
a { display: block; float: left; } - display: block; 혼자 쓰일 때는 width :100%; clear: both;와 같은 효과를 내고, float: left; 또는 float: right;를 쓰게되면 뭉게지지 않는 하나의 블록이 형성된 것이라고 할 수 있다.
꾸미는 요소 들이다. 여러가지로 꾸밀 때는 스타일시트가 기존의 스타일시트를 덮어버리게 할 때가 많다.
border[공백으로 넣으면 전체, -top, -right, -left, -bottom을 쓸 수 있음.]: [굵기] [형식] #[색상];
border-color: #[색상]; background(-color): #[색상];
a { text-decoration: none; }
a:hover, a:active, a:visited
*. CSS3 요소 - 모질라 파이어폭스, 웹킷 엔진 사용 브라우저에서는 테스트 단계로 적용하고있다. 인터넷 익스플로러는 유감스럽게도 지원되지 않는다.
-moz-border-radius: [값]; -webkit-border-radius: [값]; *기본: border-radius: [값];