기술이 된 상상
[CSS] display: inline, block, inline-block
Indigo_Pure
2021. 4. 2. 17:59
728x90
반응형
CSS에서 요소들의 레이아웃을 지정할 때 사용하는 속성인 display
그 중에서도 inline, block, inline-block의 동작 방식을 정리한다.
block
- 한 줄 전체를 점유
- 새로운 라인에서 시작
- width, height, margin, padding 지정 가능
inline
- 컨텐츠 영역만큼만 너비 차지
- inline + inline 이라면 같은 줄에 정렬
- width, height, 세로 margin 지정 불가
- 요소 뒤에 공백이 있다면 space(4px)가 자동 지정
- line-height 속성이 block 부모 요소에 적용
inline-block
- 컨텐츠 영역만큼 너비 차지(like inline)
- width, height, margin, padding 지정 가능(like block)
- 요소 뒤에 공백이 있다면 space(4px)가 자동 지정
- inline-block + inline-block 정의 시 공백 발생(요소 사이에 텍스트 요소가 입력되는 문제)
- 상위 요소에 {font-size: 0} 지정
- inline-block + inline-block 요소를 붙여쓰기
<!DOCTYPE html>
<html>
<head>
<title>CSS display: inline, block, inline-block</title>
<style>
div {
padding: 2px;
}
// 해결 방법 1
body {
font-size: 0;
}
</style>
</head>
<body>
<div style="display:inline-block;border:1px solid red">inline-block</div>
<div style="display:inline-block;border:1px solid blue">inline-block</div>
// 해결 방법 2
<div style="display:inline-block;border:1px solid red">
inline-block
</div><div style="display:inline-block;border:1px solid blue">
inline-block
</div>
</body>
</html>
- inline-block + inline-block의 두 요소의 세로 길이가 다를 경우 vertical-align으로 정렬
<!DOCTYPE html>
<html>
<head>
<title>CSS display: inline, block, inline-block</title>
<style>
div {
padding: 2px;
// 해결 방법
vertical-align: top;
}
</style>
</head>
<body>
<div style="display:inline-block;border:1px solid red">
<img src="https://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dna/cP5V2H/btq0c1FYACb/AAAAAAAAAAAAAAAAAAAAAN-NOphiDlroj58_AS-fZtqyusm7pUqg8Ojz5NrZlUPj/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=fnCvzLITIoR44A%2BsOcAMDjIVmjI%3D" />
inline-block
</div>
<div style="display:inline-block;border:1px solid blue">
inline-block
</div>
</body>
</html>
References
728x90
반응형