<div class="dop">
<ul>
<li><a href="#">주메뉴1</a>
<ul>
<li><a href="#">코딩문자배우기</a></li>
<li><a href="#">코딩도표</a></li>
<li><a href="#">아스키코드</a></li>
<li><a href="#">utf8</a></li>
</ul>
</li>
<li><a href="#">주메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
<li><a href="#">주메뉴3 </a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
</ul>
</div>
위의 코딩에서 보듯 <div>영역 태그로 감싼후에 클래스이름을 부여 해 준것을 볼수 있습니다.
<div class="dop"> 이렇게class명을 dop 라고 클래스이름을 주고 헤드의 스타일 시트에서 이 클래스를 제어 해 주는
스타일을 선언 해주면 되는 것이죠
아래는 헤드부에 존재 하는 소스를 복사 해 놓은 가상의 스타일 시트 입니다.
<style>
body, div, ul, li{
margin:0; padding:0;
}
body{
font-size:12px;
font-family:"맑은고딕", arial;
}
ul{
list-style:none;
}
a{
color:#000;
text-decoration:none;
}
.dkk{
width:640px; height:85px;
margin:auto;
margin-top:50px;
}
.dkk>ul{
width:620px; height:30px;
background:#ccc;
padding:20px 0 0 20px;
}
.dkk>ul>li{
float:left; width:110px; height:30px;
margin-right:5px;
position:relative;
}
.dop>ul>li>a{
display:block;
width:100%; height:100%;
font:bold 13px/30px "맑은고딕", arial;
font-family:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif;
font-size:13px;
text-align:center;
color:purple;
background:#7093db;
}
.dop ul li a:hover{
color:orange;
background:blue;
text-decoration:none;
}
.dkk ul ul{
display:none;
}
.dkk>ul>li:hover ul{
display:block;
width:110px; height:25px;
position:absolute;
left:0; top:30px;
}
.dkk li li{
width:110px; height:25px;
background:lime;
margin-right:5px;
text-align:center;
list-style:none;
}
.dkk li li a{
display:block; width:100%; height:100%;
font:bold 12px/25px "맑은고딕", arial;
font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif;
font-size:13px;
text-align:center;
}
.dkk li li a:hover{
color:white;
background:none;
valign:middle;
}
</style>
아래는 결과 입니다.
위의 코딩에서 여러가지 선택자를 이용 한것을 볼수 있습니다.
body, div, ul, li{
margin:0; padding:0;
}
이 스타일 선언은 body, div, ul, li태그에 0점 처리를 하기 위해 설정한 스타일 선언문 입니다.
즉 이 스타일 선언은body, div, ul, li 이 태그들이 선택자가 되고 margin은속성 으로 선택된 태그들의 외부의 간격을 의미 하며 :0; 속성값으로 외부간격을 0픽셀로 주라는 것이죠
padding은 선택된 태그 내부의 간격을 의미 하며 :0;역시 속성값으로 0픽셀로 0점 처리 한다는 의미 입니다.
이렇게 하므로해서 눈에는 보이지 않지만 혹시 간섭 받을수 있는 원격 스타일 시트의 힘을 원상태로 처리 해 주게 됩니다.
이렇게 body, div, ul, li 여러태그를 한꺼번에 같이 선택 하는 것을 그룹선택자 라고 하며 선택자 뒤에 ,콤마로 구분 해주게 됩니다.
특히 위와같이 태그명으로 선택 하는 선택자를 타입선택자 또는 단순선택자 또는 엘리먼트선택자 라고 합니다.
물론 그룹 선택에는 단순 선택자와 네임 선택자 클래스 선택자를 한꺼번에 같이 선택 할수도 있습니다.
body{
font-size:12px; font-family:"맑은고딕", arial;
}
위와 같은 선언은 단순 선택자로 body태그가 선택자가 되고 속성으로 바디부 전체의 폰트 사이즈를 12픽셀 값으로 주고 적용할 폰트는 맑은고딕과 아리알 이라는 의미 입니다.
ul{
list-style:none;
}
역시 타입선택자인 ul순서 없는 목록태그에 스타일을 정의 하며
list-style:none 리스트 스타일을 빼라는 의미 이죠 이렇게 해주게 되면 이 스타일 시트가 미치는 공간안의 모든 ul태그에는 리스트태그의 서두에 나타나는 ○불릿이 사라지게 됩니다.
사실 브라우져 마다 이 선언이 적용이되는것과 안되는 것이 있어 어떤 브라우져에는 리스트태그에 직접 이속성과 값을 따로 적용 해야 할 경우도 있습니다.
a {
color:#000;
text-decoration:none;
}
이 역시 위와 동일한 의미의 선언 이며 a태그 전체에 폰트 칼라를 블랙 으로 설정 하고 밑줄을 없에 라는 제어 문 입니다.
.dop{
width:640px; height:85px;
margin:auto;
margin-top:50px;
}
위의 바디부에 코딩한 태그들중 class이름이 dop인 태그를 타켓해서 그 태그에 속성과 값으로 스타일을 주라는 제어 문 이죠 위의 코딩 중 클래스명을 dop로 설정한 태그는 div 태그 이며 넓이 640픽셀에 높이 85픽셀 외부 간격은 자동으로 상단의 외부 간격은50픽셀의 값을 주어 영역을 만들어 주라는 선언문 입니다.
이렇게 클래스이름 앞에 . 마침표의 점으로 표시 해주는 선택자를 클래스선택자 라고 합니다.
위의 코딩에서 드롭다운메뉴바 전체를 감싸는 공간을 확보 하도록 해주는 선언문 입니다.
.dop>ul{
width:620px; height:30px;
background:#ccc;
padding:20px 0 0 20px;
}
클래스명dop의 하위 태그인 ul태그가 선택 되며 전체넓이 620픽셀에 높이30픽셀 영역을 확보 하도록 하며 배경색은 회색톤으로 하고 내부의 콘텐츠와의 간격을 상단부20픽셀 우측0 하단0픽셀 좌측20픽셀의 값을 주라는 명령문입니다.
위의 코딩에서 주 메뉴버튼들이 차지 하게 되는 공간을 확보 하도록 하는 것 이죠 이렇게 div영역태그 다음의 하위 영역인 ul 목록태그를 타켓 하도록 설정 할때 하위 선택자라는 부호로 타켓 하며 부호는 > 우측꺽쇠로 표시를 합니다.
.dop>ul>li{
float:left;
width:110px; height:30px;
margin-right:5px;
position:relative;
list-style:none;
}
이 역시 자식 선택자로 타켓한 모습이며 전체영역 다음 의 메뉴바 영역 안에 들어가게 될 리스트태그인 li태그가 선택된 모습이며 위의 코딩에서 3개의 ul하위 태그가 있으며 이들 태그에 공통으로 속성자안의 스타일을 주라는 명령문 입니다.
기본적으로 li태그는 블록의 값을 가지게 되며 스타일설정이 없을 경우 태그내에 존재하는 불릿과 폰트가 드러난 상태로 아래로 나열 되어 나타나게 됩니다.
그렇게 나열되는것은 메뉴바로는 볼품없는 모양새로 프로그래머가 원하지 않는 모양 이죠 그래서 이 블록들을 옆으로 정렬 하기 위해 스타일을 쥐야 하는것입니다.
위에서 flot:left로 속성과 값을 주게되면 왼쪽을 기준으로 옆으로 나란히 정렬이 되는 것이죠
여기서 주의 할점은 마진값과 세개의 블록값을 다 합한 값이 상위 영역 과 같거나 작아야 합니다.
그렇지 않을 경우 값에 따라 상위영역안에 들어 가는 블록과 아래로 내려 붙는 블록이 생길수 있으므로 이 부분을 필히 염두해두고 속성값을 주도록 해야 합니다.
위의 스타일 선언으로 해석 해보면 넓이 110픽셀 높이30픽셀의 블록을 만들고 이 블록들에 외부와의 간격을 오른쪽으로 5픽셀 씩 주라는 것 과 position은 relative로 relative는 현재 위의 바디상에 코딩된 상태의 자리에 고정 시키라는 뜻이며 상대 좌표로 설정 됩니다.
list-style:none;은 위에서도 언급 했지만 브라우저 마다 조금씩 상이한 차이를 보이는 관계로 위의 ul태그영역에서 준 스타일 선언이 제대로 반영이 되지 않아 따로 직접 선언을 해준 것입니다. 불릿을 없애라는 제어문 이죠
.dop>ul>li>a{
display:block;
width:100%; height:100%;
font:bold 13px/30px "맑은고딕", arial;
font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif;
font-size:13px;
text-align:center; color:purple;
background:#7093db;
}
이 역시 자식선택자로 타켓 된 태그는 a태그로 a태그에 전달 되는 스타일 이죠
즉 위의 리스트 블록 안에 존재 하는 a태그를 영역으로 만들고 상위태그의 크기와 동일한 크기로 설정하며 글씨 크기는 13에서30픽셀 내의 크기 와 굵은 글씨체 그리고 컬러는 진한 갈색으로 위에 나열한 폰트 들에 이값을 적용해 주고 글씨는 블록내의 중앙에 정렬 하며 배경 색은 연한 청색으로 해 주라는 의미 입니다.
.dop ul li a:hover{
color:orange; background:blue;
text-decoration:none;
}
사실 메뉴버튼을 만들때 빠지지 않는 약방의 감초 처럼 적용 하는 것이 이 :hover엘리먼트 인데요 hover는 지정한 태그위에 마우스를 올렸을때 버튼에 나타나는 모양이나 액션 등을 설정 해주는 일종의 내장 메소드라고 할수가 있습니다.
위에서 선택자를 타켓한 모습을 해석해 보면 dop영역의 자식 요소인 ul 영역ul영역의 하위요소인 a태그에 전달 되는 스타일 선언으로 이런 선택자를 하위선택자 또는 자손선택자 라고 합니다.
그리고 마지막으로 a태그에 가상클래스가 적용 되도록 선언 하고 있습니다.
즉 dop 하위ul태그 하위 li태그 하위 자손인 a태그를 선택 자로 택한 것으로 여기서 a태그의 갯수가 많아도 모두 적용 하라는 뜻으로 청색의 배경색과 오렌지색의 글씨를 밑줄 없이 a 태그 모두에 나타 내라는 의미 이죠
자식선택자와 유사 한 것 같아도 자식선택자는 바로 아래 태그만을 타켓 할수 있지만 하위 선택자는 하위태그라면 어떤 태그 이든 건너 뛰어서도 선택 해서 모두타켓 할수가 있는것이죠
위의 코딩에서 보면 전체계열을 상위에서 하위 스타일로 나열 해 보면 dop ul li a ul li a 이런 모습이 되겠죠
즉 dop가 제일 상위의 할아버지뻘이고 그밑에 아들 이며 부모격인 ul이 있고 그밑에는 손자격인 li가 있으며 그 아래 증손자 격인 a태그와 ul태그가 있으며 고손자격인 li가 있고 마지막 손자a가 존재 하는 식이죠
이렇게 하위선택자를 이용 하면 위의 자식선택자로 선택할수 없는 태그를 타켓 할수가 있죠
.dop ul ul{
display:none;
}
위의 스타일을 해석 해보면 서브메뉴의 영역은 존재 하지만 그 안의 내용은 브라우져에 띄우지 말란 뜻이죠
즉 이뜻은 서브메뉴에 속성과 속성값을 주되 브라우져상으로는 보이지 않도록 설정 하란 뜻 이죠
이것이 바로 드롭다운 메뉴에 있어서 신의 한수 인 것 입니다
.dop>ul>li:hover ul{
display:block; width:110px; height:25px;
position:absolute; left:0; top:30px;
}
위에서는 이 서브 영역을 브라우져로 나타내지 않아 보이지 않게 한후에 위의 li 주 메뉴 버튼을 클릭 할때는 보이도록 한다는 의미 이죠 여기서 신의 두수 가 나타납니다.
여기서 나타날 서브메뉴 영역의 위치는 absolute로서 상위인body에 대해 절대 좌표를 가지며 상위의 높이가 30픽셀의값을 가지고 있으므로 그 아래로 블록의 형태로 나타 내라는 의미 이죠
.dop li li{
width:110px; height:25px;
background-color:lime;
margin-right:5px;
text-align:center;
list-style:none;
}
역시 하위선택자로 상위의 ul과 li 다음의 ul도 건너 뛰어서 마지막 li인 서브 메뉴영역에 타켓한 모습이며 넓이는110픽셀에 높이 25픽셀 배경색은 연두색 이 블록의 오른쪽외부에 있는 블록들간의 간격을 5픽셀씩 주라는 의미 입니다. 즉 이것은 위의 서브메뉴 버튼 영역안에 속해 있는 목록 리스트의 영역을 설정해 주며 이영역 안에는 a태그가 링크할 주소가 들어가는 자리 이죠
.dop li li a{
display:block;
width:100%; height:100%;
font:bold 12px/25px "맑은고딕", arial;
font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif;
font-size:13px;
text-align:center;
}
역시 하위선택자로 타켓한 모습이며 가장 하위의 리스트영역에 속한 a태그에 타켓한 모습이죠
해석해 보면 블록의 형태를 가지며 상위 리스트영역안을 가득 차게 폰트를 설정해 주라는 명령문 입니다.
.dop li li a:hover{
color:white;
background:none;
valign:middle;
}
하위선택자로 서브 메뉴의 a태그에 마우스클릭시 나타날 반응으로 위의 리스트영역에서 다른것은 그대로 있고 폰트 컬러를 흰색으로 체인지 하면서 밑줄없이 나타 내라는 명령문 입니다.
이렇게 드롭다운 메뉴를 만들기 위해서는 여러가지의 선택자와 기교를 부릴수가 있어 야만 제대로된 코딩이 완성이 되겠죠