[CSS] Layout (2/2) - Display

CSS Layout (2/2)

Display - block, inline, inline-block

• 해당 요소가 어떻게 표시될지를 결정하는 속성
  • block
    • 요소를 블록 요소로 지정하며 줄바꿈이 일어난다.
  • inline
    • 요소를 인라인 요소로 지정하며 줄바꿈이 일어나지 않는다.
  • inline-block
    • 인라인 요소와 블록 요소의 특성을 모두 가진다. 다른 요소와 같은 줄에 배치되며 높이와 너비를 조절 가능하다.
• none
  • 요소를 화면에 표시하지 않는다.

Display - flex

• display 속성 중 flex와 grid는 요소 본인뿐만 아니라 자식 요소들의 배치에도 영향을 미친다.
• flex
  • 자식 요소들을 한 방향으로 배치 - 행 또는 열 하나만 존재
  • flex가 적용되는 방법은 두 가지로 나뉜다.

    <div class="flex-container">
    	<div class="flex-item">helloflex</div>
    	<div class="flex-item">abc</div>
    	<div class="flex-item">helloflex</div>
    </div>

    1. Flex Container
       • display: flex를 설정한 요소
    2. Flex Item
       • Flex Container의 자식 요소
  • flex를 적용하게 되면 자식 요소들에 변화가 생긴다.
    • 너비: 각각의 flex item의 컨텐츠 너비 값으로 설정된다.(inline 요소처럼)
    • 높이: flex container의 높이로 설정된다.
  • inline-flex는 flex container에 inline 요소가 적용된 것이다.