CSS : display

display 속성

📌 참고자료
MDN display
TCPSCHOOL display 속성
DaleSeo [CSS] display 속성: inline, block, inline-block
1분코딩 CSS 레이아웃을 시작하는 사람들이 반드시 알아야 할 개념
ofcourse display 속성

display 속성은 HTML 요소(Element)들을 시각적으로 어떤 형식으로 보여줄지결정하는 속성

📒 속성 값

• none : 없음
• ilnine : 텍스트
• block : 쌓이는 상자
• inline-block : inline과 block 특징을 모두 가짐

⚙️ none 요소

• 화면에서 보이지 않는다.
• 영역을 차지 하지 않는다. ▶ 공간 차지 X (태그 영역 X)

⚙️ inline 요소

• 기본적으로 옆으로 쭉 나열된다.
• 공간이 부족하면 다음 줄로 넘어간다.
• 박스 형태가 아니기 때문에 width, height로 크기를 설정할 수 없다. ▶ 속성 무시
• 대표적인 태그 : <span>, <a>, <img>, <strong> 등...

⚙️ block 요소

• 보통 "직사각형"모양이고 박스라고 부른다.
• 언제나 새로운 줄에서 시작한다.
• width는 옆으로 늘어날 수 있는 만큼 최대한 차지한다.
• height는 내용물의 높이만큼 차지한다.
• 대표적인 태그 : <div>, <h1>, <p>, <ul>, <ol>, <form> 등...

⚙️ inline-block 요소

• inline과 block의 모든 특징을 가지고 있다.
• inlne처럼 텍스트 흐름대로 쭉 나열되고, block 처럼 박스 형태라 width, height로 크기 설정이 가능하다.

---

🗓️ 수정 및 추가

✅ 2022.02.26

• 썸네일 변경

✅ 2022.03.18

• CODEPEN 추가

✅ 2022.03.21

• 제목 및 본문 수정/추가
• 참고 자료 추가

✅ 2022.06.28

• block요소 태그 설명 추가