CSS HTML 요소 레이아웃, 배치에 사용되는 display 속성 정리
display 속성으로 block, inline 요소 변환하기
이전에 박스 모델에 대해 정리한 글에서도 말씀드렸다시피 HTML 요소는 각기 고유의 박스 모델을 가지고 있습니다.
태그에 따라 블록 레벨 요소 태그와 인라인 레벨 요소로 구분되어 부여됩니다.
이렇게 기본값으로 부여된 박스 모델 레벨을 display 속성을 사용하면 변환이 가능합니다.
즉 block 레벨 요소 태그를 inline 레벨 요소 태그로 바꿀 수 있으며 그 반대로도 가능합니다.
CSS display 속성값 중 레이아웃에 쓰이는 속성값
속성값 | 설명 |
| block | inline 요소 -> block 요소로 변환 |
| inline | block 요소 -> inline 요소로 변환 |
| inline-block | inline 요소와 block 요소의 속성을 모두 가지고 margin과 padding 지정 가능 |
| none | HTML에서 표시되지 않게 함. |
display 속성을 사용한 HTML 가로 메뉴 구현 예제
<style>
* {
box-sizing : border-box;
}
ul {
list-style-type : none;
}
li {
margin : 0 15px;
padding : 30px;
border : 2px double black;
display : inline-block;
}
</style>
</head>
<body>
<ul>
<li>홈</li>
<li>생산</li>
<li>구매</li>
<li>회계</li>
<li>재무</li>
</ul>
</body>
</html>
 |
| display 속성의 inline-block 속성값을 사용하면 가로 메뉴바를 구현할 수 있습니다. |
문서 흐름에서 벗어난 배치 float
블록 레벨 요소는 태그 하나가 한 줄을 다 차지하는 요소입니다.
이렇게 블록 레벨 요소에 왼쪽이나 오른쪽에 이미지를 배치해서 한 줄에 보이게끔 설정하고 싶을 때 float 속성을 사용하면 한 줄에 배치할 수 있습니다.
float 속성값 리스트
속성값 | 설명 |
left | 지정된 요소를 문서 왼쪽에 배치 |
right | 지정된 요소를 문서 오른쪽에 배치 |
none | 기본값으로 원래 속성대로 배치 |
float 속성 예제
<style>
* {
box-sizing : border-box;
}
img {
width : 200px;
float: left;
}
</style>
</head>
<body>
<img src="Moon.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum porro sed asperiores deserunt laboriosam hic est aperiam voluptates veritatis totam atque id facilis mollitia assumenda cupiditate accusantium, tenetur, modi quasi?</p>
</body>
</html>
 |
| float 속성을 사용해 이미지와 p태그 문단을 한줄로 표현한 예제 비교입니다. |
float 속성 해제 clear 속성
float 속성을 지정하면 그 이후 태그에도 float 속성이 계속 반영되게 됩니다.
지정한 float 속성을 해제하기 위해서는 clear 속성을 사용해 float 속성이 끝났음 지정해야 합니다.
속성값 | 설명 |
left | left로 지정된 float 속성 해제 |
right | right로 지정된 float 속성 해제 |
both | left와 right 모두 해제 |
inline-block 속성과 float : left 속성의 차이점
inline-block과 float의 left 속성은 왼쪽부터 요소들을 배치한다는 점에서는 동일하지만, inline-block에는 기본 padding과 margin이 있고, float 속성을 받은 요소에는 없기 때문에 필요하다면 별도의 padding과 margin 값을 지정해 줘야 하고 float으로 지정한 속성을 끝나는 지점에는 clear 속성을 써줘야 한다는 점에서 차이가 있습니다.