티스토리 뷰
display
- 요소의 내부, 외부 디스플레이 타입을 설정
1. 요소 본인의 display가 block, inline, inline-block인지 설정하거나(일반 흐름 속에서 요소가 동작)
2. 요소의 자식들에게 적용할 레이아웃(flow layout, grid, flex 등)을 설정(전체 레이아웃 메서드)
1. block
- 다른 요소 아래 하나씩 표시되는 요소
ex) <div>, <p>, <h1>
2. inline
- 요소들이 나란히 표시되는 요소
- width, height 속성 설정 불가
- margin, padding 속성은 좌우 간격만 방여되고, 상하 간격은 반영 안됨
ex) <span>, <a>, <em>
3. inline-block
- inline 처럼 요소들이 나란히 표시되지만, width, height, margin, padding 속성을 반영할 수 있음
- 외부적으로는 inline, 내부적으로는 block의 규직을 따름
ex) <button>, <input>, <select>
4. none
- 요소가 보이지 않음
5. flex
- 행이나 열을 한 차원으로 레이아웃
- 자세한 내용은 링크를 참조하자
https://viscachas.tistory.com/entry/CSS-flex
[CSS] flex
5. flex- 행이나 열을 한 차원으로 레이아웃- 부모 요소에 flex를 적용하면 모든 직계 자식이 플렉스 항목이 됨- 부모 요소의 flex-direction: row, align-items: stretch가 초기값- 자식 요소에 flex:1을 지정하면
viscachas.tistory.com
6. grid
- 행과 열로 정렬하는 이차원 레이아웃
- 자세한 내용은 링크를 참조하자
https://viscachas.tistory.com/entry/CSS-Grid
[CSS] Grid
Grid- display의 속성값 중 하나인 이차원 레이아웃- columns, rows로 구성되며, 공백은 gutters라고 부름 Creating your grid in CSS1. 그리드 정의하기- .container의 직계 자식들은 item이 됨.container { display: grid;
viscachas.tistory.com
+
float는 참고 자료를 참고하자
++
position은 부유시킬 때 사용하고,
display는 레이아웃을 적용할 때 사용함
[참고 자료] https://developer.mozilla.org/ko/docs/Web/CSS/float
float - CSS: Cascading Style Sheets | MDN
CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
developer.mozilla.org
[출처] https://developer.mozilla.org/en-US/docs/Web/CSS/display
display - CSS: Cascading Style Sheets | MDN
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Introduction
CSS 레이아웃 입문서 - Web 개발 학습하기 | MDN
이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 다양한 display 속성값의 차이 등을 복습하고, 이번 과정에서 다룰 몇 가지 CSS 개념을 소개합니다.
developer.mozilla.org
https://www.daleseo.com/css-display-inline-block/
CSS의 display 속성: inline, block, inline-block
Engineering Blog by Dale Seo
www.daleseo.com
'CSS' 카테고리의 다른 글
| [CSS] ::before / ::after (0) | 2024.07.24 |
|---|---|
| [CSS] transition (1) | 2024.07.22 |
| [CSS] Flexbox (0) | 2024.07.22 |
| [CSS] Grid (0) | 2024.07.19 |
| [CSS] 4. position (0) | 2024.07.18 |