9. CSS - 레이아웃 - display

레이아웃

• 구성 요소(html 요소)를 제한된 공간 (html body 태그 == 보여지는 화면)에 효율적으로 배치하는 것(css)
• 마지막으로 작성된 클래스의 요소가 적용된다.
• 화면 배치 방법(형식) : display 속성
  • block : 화면을 수직 분할(행을 나눔) + width, height 사용 가능
  • inline : 화면을 수평 분할(한 행의 열(컬럼)을 나눔) + width, height 사용 불가능
  • inline-block : inline의 수평 분할 + block의 크기 조절
  • none : 화면에 요소가 표시되지 않으나 존재는 하고 있는 상태
  • flex : 요소의 정렬되는 방향, 간격을 유연하게 처리하는 형식

 

각 .area의 background-color를 무지개색으로 설정.

 

• block 형식의 요소(div)를 inline으로 변경

HTML 작성 화면 - block 형식인 div 태그의 class 요소를 inline 형식으로 작성한 화면
CSS 작성 화면
웹에서 출력된 화면 - block 형식이 inline 형식으로 출력됨

 

• inline 형식의 요소(span)을 block으로 변경

HTML 작성 화면 - inline 형식인 span 태그의 class 요소를 block 형식으로 작성한 화면
CSS 작성 화면
웹에서 출력된 화면 -inline 형식이 block 형식으로 출력됨

 

• inline-block 확인하기

HTML 작성 화면 - block 형식인 div 태그에 class를 inline-block으로 작성한 화면
CSS 작성 화면
웹에서 출력된 화면 - 화면 크기를 줄였을 때 inline-block 형식으로 출력됨.

 

위의 출력 화면에서 각 요소 사이에 간격이 있는건 div 태그 작성 시 엔터를 작성해서임.
만약 간격 없이 작성하고 싶다면 띄어쓰기, 엔터 없이 작성.