[CSS] - display : block, inline 그리고 메뉴 만들기

CSS

Riucc 2018. 9. 13. 14:03

○ 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>

<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>

</ul>

</body>

</html>