블로그 스킨 꾸미기 가로 정렬 레이 아웃으로 드롭다운 메뉴버튼 만들기
html div태그와 스타일링 CSS 로 홈페이지 드롭다운 메뉴 버튼을 만들기를 해 봅니다.
CSS
body{font-size:14px;}
div, ul, li{margin:0; padding:0}
a{
color:#000;
text-decoration:none;
}
#wp{
width:334px; height:330px;
background:#ddd;
margin:auto; margin-top:50px;
border-radius:0.3em;
box-shadow:rgba(20,50,0,0.5)4px 4px 3px 3px;
vertical-align:middle;
}
#wp ul{
list-style:none;
}
#wp>ul{
width:332px; height:30px;
text-align:center;
padding:2px 0 0 2px;
vertical-align:middle;
}
#wp>ul>li{
float:left;
display:block;
position:relative; left:1px; top:0px;
width:81px; height:28px;
border:1px solid blue;
border-radius:0.3em;
background:#ccc;
text-align:center;
margin-right:-1px;
vertical-align:middle;
}
#wp>ul>li>a{
display:block;
width:81px; height:28px;
border:1px solid blue;
border-radius:0.3em;
background:purple;
font-size:13px; color:green;
text-align:center;
text-decoration:none;
}
#wp>ul>li>a:hover{
display:block;
width:81px; height:28px;
border:1px solid blue;
border-radius:0.3em;
background:orange;
font-size:13px; color:blue;
text-align:center;
text-decoration:none;
}
#wp ul ul{display:none;}
#wp ul li:hover ul{
width:82px; height:28px;
position:absolute; left:0; top:30px;
text-align:center;
display:block;
}
#wp li li{
width:82px; height:28px;
border:1px solid gray;
border-radius:0.3em;
display:block;
background:lime;
text-align:center;
}
#wp li li a{
display:block;
font-size:13px; color:pink;
text-align:center;
list-style:none;
text-decoration:none;
}
#wp li li a:hover{
background:none;
color:blue;
text-align:center;
text-decoration:none;
}
HTML
div id="wp">
<ul>
<li><a href="./308#5">home</a>
<ul>
<li><a href="./308#5">html</a></li>
<li><a href="./308#5">css</a></li>
<li><a href="./308#5">스킨편집</a>
</li>
<li><a href="./308#5">메뉴</a></li>
</ul>
</li>
<li><a href="./308#5">티스토리 세상</a>
<ul>
<li><a href="./308#5">지구촌 뉴스</a></li>
<li><a href="./308#5">세상의 직업</a></li>
<li><a href="./308#5">4차 산업혁명</a></li>
<li><a href="./308#5">힐링 지구촌</a></li>
</ul>
</li>
<li><a href="./308#5">웹소설</a>
<ul>
<li><a href="./308#5">단편소설</a></li>
<li><a href="./308#5">장편소설</a></li>
<li><a href="./308#5">성인소설</a></li>
<li><a href="./308#5">고전 다시 보기</a></li>
</ul>
</li>
<li><a href="./308#5">블로그와 감성</a>
<ul>
<li><a href="./308#5">목수일지</a></li>
<li><a href="./308#5">난기르기</a></li>
<li><a href="./308#5">애완동물</a></li>
<li><a href="./308#5">인간은 무엇으로 사는가?</a></li>
</ul>
</li>
</ul>
</div>
(1번) 드롭다운 메뉴버튼 클릭시 작동 가능
위의 드롭다운 메뉴 버튼을 만드는 법을 하나씩 풀어 보도록 하겠습니다.
우선 버튼을 게재 할수 있는 바탕 부터 만들어야 겠습니다.
HTML
<div class="wp">
</div>
css
위 처럼 클래스가 wp인 HTML 태그와 CSS스타일링 을 했을때 아래 처럼 결과 가 나오게 됩니다.
결과
HTML
<div class="wp">
<ul>
<li>홈</li>
<li>티스토리세상</li>
<li>웹소설</li>
<li>블로그 와 감성</li>
</ul>
</div>
css
바탕지 위에 만든 4개의 주 메뉴 버튼의 HTML태그와 CSS스타일링과 결과 입니다.
결과
- 홈
- 티스토리세상
- 웹소설
- 블로그와 감성
순서 없는 리스트 목록 태그 UL 안에 li 리스트 태그를 사용해 4개의 주메뉴 버튼을 만들었습니다.
블록 엘리먼트 인 리스트 태그 의 특성상 세로 정렬이 되며 불릿이 생성 되는 속성을 가지고 있기 때문에 가로정렬을 위해 서는float 속성자에 left값을 주어 좌측 부터 가로 정렬이 되도록 하였습니다.
그리고 리스트 앞에 뜨는 불릿(. 동그란 점)을 없애기 위해 list-style:none; 속성과 값으로 스타일링 해주어야 합니다.
박스를 레이아웃 하기 위해 정확 한 위치 잡기를 해 주어야 하는데 position:relative; 상대적 위치를 지정해 주는 relative값을 주도록 합니다.꿀팁) 주메뉴가 자리 잡고 있는 리스트 태그인 li 태그를 타겟 해서 레이아웃 하기 위해 서 css스타일링은 자식 선택자로 타겟 해주어야 합니다.
부모 선택자인 div와 자식 선택자 ul 과 하위 li를 차례로 경로를 타고 콕 찍어 타겟 해주는 방식 입니다.
div>ul>li 이런식으로 선택자 를 태그 해 주면 주메뉴 버튼의 모양을 결정 해 줄수 있습니다.
css
만약 위 스타일링 처럼 float:left 값을 없에 버리면 아래 처럼 이렇게 세로로 정렬이 될것입니다.
float속성 없이 가로 정렬 하는 또다른 방법
float:left;속성 을 사용 하지 않고 가로 정렬 하려면 어떻게 해야 할까?
.wp>ul>li{
border:1px solid grey;
width:77px; height:30px;
background:#7093DB;
border-radius:0.5em;
display:inline-block;
margin-left:-3px;
}
이번에는 위 1번 드롭다운 메뉴버튼 처럼 주메뉴를 클릭 했을때 서브메뉴가 드롭 다운 될수 있도록 각4개의 서브메뉴 버튼들을 만들어 보도록 합니다.
서브메뉴 버튼은 주메뉴 버튼 안에 속하므로 태그도 그렇게 셋팅 해 주면 됩니다.
HTML
<div class="wp">
<ul>
<li>주메뉴1
<ul>
<li>서브1</li>
<li>서브2</li>
<li>서브3</li>
<li>서브4</li>
</ul>
</li>
<li>주메뉴2
<ul>
<li>서브1</li>
<li>서브2</li>
<li>서브3</li>
<li>서브4</li>
</ul>
</li>
<li>주메뉴3
<ul>
<li>서브1</li>
<li>서브2</li>
<li>서브3</li>
<li>서브4</li>
</ul>
</li>
<li>주메뉴4
<ul>
<li>서브1</li>
<li>서브2</li>
<li>서브3</li>
<li>서브4</li>
</ul>
</li>
</ul>
</div>
서브메뉴 CSS스타일링
서브 메뉴는 주메뉴 하위 의 리스트 li태그 입니다.
.wp li li{
이렇게 선언 해 주는데요 이런 선택자를 자손 선택자라고 합니다.
이렇게 .wp클래스 아래 ul을 무시 하고 바로 주 li메뉴 태그 그리고 그 아래 위치한 자손 li태그인 서브 메뉴를 바로 타겟팅 해 스타일을 주게 됩니다.
꿀팁) 주메뉴를 클릭하면 서브메뉴가 드롭다운 되도록 하기 위해 사용 하는 선택자와 스타일링이 드롭다운의 주요 키 인 만큼
확실히 익혀 두어야 겠습니다.
순서 없는 목록태그 ul은 리스트 li 태그를 감싸고 있으며 영역을 가지고 있습니다.
만약 ul 태그가 그대로 존재 할경우 하위에 존재 하는 li태그는 작동 할수도 없습니다
그러나 ul태그를 완전히 없에 버릴수도 없습니다.
가시적 영역으로 나타 낼때 반드시 있어야 만 하기 때문 입니다.
그래서 있긴 있으되 어떤 신호를 받기 전 까지는 보이지 않도록 해 주어 아래로 다 드러나는 것을 숨겨 주는 스타일 선언 이 필요 합니다.
display:none;
}
바로 위처럼 이렇게 display:none;을 선언 해 주어야 만 합니다.
없는 것 처럼 존재 하다 액션이 있게 되면 영역을 드러내게 됩니다.- 주메뉴1
- 서브1
- 서브2
- 서브3
- 서브4
- 주메뉴2
- 서브1
- 서브2
- 서브3
- 서브4
- 주메뉴3
- 서브1
- 서브2
- 서브3
- 서브4
- 주메뉴4
- 서브1
- 서브2
- 서브3
- 서브4
(2번)드롭다운 메뉴 버튼 클릭시 작동가능
위 1번과 달리 a태그를 사용 하지 않아 hover기능은 작동 되지 않습니다.