고정 헤더 영역
상세 컨텐츠
본문
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/dn/cP5V2H/btq0c1FYACb/jB4yvkJCAe1lEZJMCRNAJ0/img.png" />
inline-block
</div>
<div style="display:inline-block;border:1px solid blue">
inline-block
</div>
</body>
</html>
References
728x90
반응형
'기술이 된 상상' 카테고리의 다른 글
| [HTML] abbr 요소 by MDN (0) | 2021.07.01 |
|---|---|
| [CSS] position: static, relative, absolute, fixed (0) | 2021.04.26 |
| [Javascript] Array sort (0) | 2021.04.01 |
| [Javascript] String replace/replaceAll (0) | 2021.03.16 |
| [Web] sessionStorage vs localStorage (0) | 2021.03.13 |
