CSS의 속성 중 박스모델의 속성과 표현단위에 대해 알아보자

CSS의 속성(propertise)

• 박스모델 : 가로너비와 세로너비를 가지고 있는 하나의 박스(외부/내부 여백)
• 글꼴,문자
• 배경 : 배경에 색상과 image 삽입
• 배치 : 요소의 위치 조절
• flex(정렬) : 수평으로 정렬
• 전환 : 요소의 전후 상태를 애니메이션 처리
• 변환 : 요소를 회전, 이동, 크기에 변화를 주는 기술(2D, 3D)
• 띄움 : 요소를 공중을 띄우는 기술
• 애니메이션
• 그리드 : 행과 열의 구조를 가지고 있는 2차원의 layout을 만드는 기술
• 다단
• 필터 : Blur(흐림처리), Grayscale(흑백처리), Reverse(반전처리)

박스모델의 속성들

너비

• width : 요소의 가로너비
• height : 요소의 세로너비
• 특징
  1. 기본값 : auto(브라우저가 너비를 자동으로 계산)
  2. 해당하는 요소가 inline인지 block인지에 따라 width/height 값을 다르게 출력한다.

최대/최소 너비 제한

요소가 커질 수 있는 최대 가로/세로너비, 최소 가로/세로 너비를 제한할 수 있다

• Max-width, Max-height
  1. None : 최대너비 제한없음
  2. auto : 잘 사용하지 않음
  3. 단위 : px, em, vw
• Min-width, Min-height
  1. 0 : 최소너비 제한없음(0까지 줄어들 수 있다)
  2. 단위 : px, em, vw

단위

CSS의 표현단위

• px(픽셀) : 하나의 디바이스가 표현할 수 있는 하나의 점. 픽셀(1920 * 1080 : 세로는 점이 1920개, 가로로는 1080개라는 의미)
• % (상대적 백분율) : 어떤 것을 기준으로 해서 몇 %의 크기를 가지는지
• em(요소의 글꼴크기) : 하나의 요소가 가지고 있는 글꼴크기가 "1"em
• rem(루트요소) : html의 글꼴크기
• vw : 뷰포트(브라우져 화면이 출력되는 page 전체 영역) 가로너비의 백분율. 1vw는 뷰포트 가로너비 100분의 1만큼의 크기를 의미
• vh : 뷰포트 세로너비의 백분율