[CSS]레이아웃스타일 1 (display 속성)

레이아웃이란?

• 사전적 의미 : 배치, 정리

• 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것

 

1. 화면 배치(표시, 형식) 지정 : display 속성

 

요소가 화면에 어떻기 표시될지(배치될지) 형식을 지정하는 속성

 

 

block

:  화면을 수직 분할 (세로 화면을 가로로 잘라서 분할, 레고 쌓기) 

  -> 행이 나뉘어 짐         

  -> 한 행을 전부 차지하는 성질                 

  -> width/height 크기 지정 속성 사용 가능 

 

 inline 

: 화면을 수평 분할 (가로 화면을 세로로 잘라서 분할, 김밥 자르기)

   -> 한 행의 열이 나뉘어 짐

   -> 작성된 내용(content) 만큼의 크기를 차지

   -> width/height 크기 지정 속성 사용 XXXXXXXXX

 

 inline-block

: 화면 수평 분할 + 크기 지정 가능

 

 none

: 화면에 표시 X  (화면에 안보일 뿐 존재는 하고 있음)

 

flex

: 요소가 정렬되는 방향, 요소와의 간격을 유연하게 처리하여 표시

           (브라우저가 간격, 크기를 알아서 계산해서 적용)

 

grid

: 격자 무늬 형식으로 화면을 쉽게 분할하는 형식

 

 

클래스 기반 CSS 테스트

 

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

 

[HTML]

 

[CSS]

 

#결과

 

2. inline 형식의 요소(span)를 block 형식으로 변경

 

[HTML]

[CSS]

#결과

 

3. inline-block, none 확인하기

 

[HTML]

[CSS]

#결과