[CSS] - display : block, inline 그리고 메뉴 만들기
○ display : block, inline 그리고 메뉴 만들기 |
* 정확한 테스트를 위해 border 값을 이용해 테두리를 설정하였다 1. 아무런 display 효과를 사용하지 않았을 때 (display를 사용하지 않으면 block 형태로 쌓인다) 2. display: block; 효과를 사용하였을 때 (block은 결과물이 수직으로 위에서부터 쌓이며, 한 블록 영역(좌, 우측) 모두를 차지한다) 3. display: inline 효과를 사용하였을 때 (inline은 결과물 내용만큼만 쌓인다) 4. 메뉴 구성(inline, first-child, 좌측 여백 제거, 테두리 제거) (first-child, last-child 등을 이용하여 첫부분과 끝부분에 원하지 않는 부분 제거) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { /* a 태그에 밑줄이나 파란색 글자색 이런 거 제거 */ text-decoration: none; color: #000000; }
ul li { list-style-type: none; /* li옆에 동그라미 없애기 */ padding: 0 10px; /* 위 오른쪽 아래 왼쪽(시계방향)으로 패딩을 줌 */ border-left: 1px solid #999; /* 왼쪽에만 테두리 설정 */ } ul, li { /* ul li 사용 시 설정되어 있던 좌측 여백 제거 */ margin:0; padding:0; }
#menu li { /* display:inline 사용으로 결과물만큼 정렬 */ display: inline; } ul li:first-child { /* first-child 를 이용, 첫번째 li에 테두리 없애고 패딩 0 설정 */ border-left: none; padding : 0; } </style> </head> <body> <h3>정보공유</h3> <ul id="menu"> <li><a href="#">베스트 게시물</a></li> <li><a href="#">팁과 정보</a></li> <li><a href="#">묻고 답하기</a></li> <li><a href="#">자유 게시판</a></li> </ul> </body> </html> |
'CSS' 카테고리의 다른 글
| [CSS] - owlcarousel 이용한 다중 캐러셀에서 a href 안될 때 해결법 (0) | 2018.09.29 |
|---|---|
| [CSS] - bxslider 이용한 캐러셀, owlcarousel 이용한 다중 캐러셀 (0) | 2018.09.28 |
| [CSS] - <input type=" ">에 효과 주기, 둥근 테두리 만들기 (0) | 2018.09.18 |
| [CSS] - after, hover, list-child 등을 이용한 간단한 테스트 (0) | 2018.09.15 |
| [CSS] - position : static, relative, absolute, fixed (0) | 2018.09.13 |