[ CSS ] display 속성의 요소들 이해 (block, inline, inline-block)
2024. 4. 28. 14:40ㆍ· FRONT-END/└ CSS
[ display 속성 이해 ]
- `display` 속성은 요소를 화면에 어떻게 표시할지 결정하는 데 사용
- 요소의 레이아웃 박스 유형을 결정하는 중요 속성
- 요소로는 `block`, `inline`, `inline-block`, `flex`, `grid`, `none` 값이 있다
1. display: none;
- 화면에 보이지 않도록 해주는 기능
- visibility: hidden과 다르게 요소가 차지하는 공간조차 없애버리는 특징을 가짐
2. display: flex;
- 유연한 박스 모델로, flex 컨테이너 내의 아이템들의 가로, 세로 축을 기준으로 유연하게 배치할 수 있다.
└ 자식 요소들의 다양한 방향과 순서로 정렬할 수 있게 해줌
3. display: grid;
- 2차원 레이아웃 시스템 제공
- 행과 열의 형태로 공간을 분할하여 요소를 배치할 수 있음 (복잡한 레이아웃을 구현할 때 매우 유용)
- grid-template-columns, grid-template-rows, grid-gap 등의 속성이 있음 (세밀한 레이아웃 조정 가능)
4. display: block;
- `block` 속성을 갖는 요소는 항상 새로운 블록 상자를 만든다
- 요소의 너비는 사용 가능한(부모 요소의) 전체 너비를 차지, 다음에 오는 요소는 항상 다음 줄에 위치한다
- block 요소는 어지간한 속성을 다 적용할 수 있다!
- .block-example { display: block; width: 200px; height: 100px; background-color: #3498db; }
- block 요소를 나란히 배치하기 위해선 float나 flex, grid 등의 레이아웃 기법을 사용해야 한다
- <div>, <p>, <h1>등 대부분의 HTML 요소는 기본적으로 block 요소이다
- 기본적으로 width 가 자신의 컨테이너의 100%. 즉, 가로 한 줄을 다 차지하게 된다
5. display: inline;
- `inline` 속성을 갖는 요소는 새로운 줄을 시작하지 않고 문장 내에서 위치한다 (텍스트와 같이 줄 안에서 표시됨)
- 너비와 높이 속성이 적용되지 않으며, 컨텐츠 크기만큼만 차지한다
- 적용되지 않는 속성이 많음..
└ (padding은 적용되나, 레이아웃에 영향을 주지 않음)
└ width, height, margin-top, margin-bottom 적용 불가 (속성 적용을 원하면 다른 요소를 택해야함.) - <span>, <a>, <img> 등이 inline 요소이다
- .inline-example { display: inline; background-color: #2ecc71; }
6. display: inline-block;
- `inline-block` 속성을 갖는 요소는 `inline`처럼 줄 바꿈을 하지 않으면서, `block`처럼 너비와 높이 속성이 적용됨.
(장점만 가짐;;) - 인라인처럼 옆으로 나열되면서 블록 속성을 가진다
- 텍스트의 기준선에 맞춰 정렬되므로 주의 필요(vertical-align 속성 활용)
- <button>, <input>등이 inline-block 요소다
- .inline-block-example { display: inline-block; width: 150px; height: 75px; background-color: #e74c3c; }
개인 공부 기록용입니다:)
참고 : https://waymond.tistory.com/219, https://programming119.tistory.com/97
728x90
'· FRONT-END > └ CSS' 카테고리의 다른 글
[ CSS ] transition 이해 (0) | 2024.05.22 |
---|---|
[ CSS / HTML ] 배치 디자인 (inline-block, floating) (0) | 2024.04.23 |
[ CSS / HTML ] menu bar 만들기 (0) | 2024.04.21 |
[ CSS / HTML ] checkbox 활용한 디자인 (1) | 2024.04.20 |
[ CSS / HTML ] 텍스트 디자인 설정 (0) | 2024.04.19 |