CSS Display
- display : block
- 줄 바꿈이 일어나는 요소
- 화면 크기 전체의 가로 폭을 차지한다.
- 블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있다.
* 대표적인 블록 레벨 요소 https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements
블록 레벨 요소 - HTML: Hypertext Markup Language | MDN
HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서
developer.mozilla.org
- display : inline
- 줄 바꿈이 일어나지 않는 행의 일부 요소
- content 너비만큼 가로 폭을 차지한다.
- width, height, margin-top, margin-bottom을 지정할 수 없다.
- 상하 여백은 line-height로 지정한다.
* 대표적인 인라인 레벨 요소 https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements
인라인 요소 - HTML: Hypertext Markup Language | MDN
HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다
developer.mozilla.org
- display: inline-block
- block과 inline 레벨 요소의 특징을 모두 갖는다.
- inline처럼 한 줄에 표시 가능하며,
- block처럼 width, height, margin 속성을 모두 지정할 수 있다.
- display: none
- 해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다.)
- 이와 비슷한 visibility: hidden은 해당 요소가 공간은 차지하나 화면에 표시만 하지 않는다.
* 이외 다양한 display 속성 확인, https://developer.mozilla.org/ko/docs/Web/CSS/display
display - CSS: Cascading Style Sheets | MDN
display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.display 속성은, 형식적으로는 요
developer.mozilla.org
<body>
<h1>나는 block입니다</h1>
<div>block</div>
<p>나는 <span>인라인</span>속성입니다.</p>
<hr>
<h2>display none vs viisibility hidden</h2>
<div>1</div>
<div class="none">2</div>
<div class="hidden">3</div>
<div>4</div>
</body>'Web > css' 카테고리의 다른 글
| CSS Float (0) | 2021.08.16 |
|---|---|
| CSS Position (0) | 2021.08.16 |
| CSS Box model (0) | 2021.08.16 |
| CSS 상속과 단위 (0) | 2021.08.16 |
| CSS Selector, 가상 선택자 (0) | 2021.08.16 |