CSS | 5. 박스모델

단위   

절대 길이

px : pixels 

pt : points. (윈도우 9pt = 12px, 맥 9pt = 9px) 

상대 길이

% : 퍼센트

em : 요소의 폰트 사이즈

rem : 루트 요소의 폰트 사이즈

vw : 뷰포트(브라우저)의 width값을 기준으로 1%의 값 

색상   

color 속성  

컬러 키워드 : red, black, blue 같은 키워드로 지정

16진법 : 6자리로 두 자리씩 세가지 색상을 나타냄

RGB( ) : 레드, 그린, 블루 (0~255 정수)

RGBA( ) : 레드, 그린, 블루 + 알파값(0은 투명, 1은 불투명)

background   

속성  

background-color : 배경의 색상을 지정. (default : transparent)

background-image : 배경으로 사용할 이미지 경로를 지정 (default : none)

background-repeat : 배경이미지 반복 여부

background-position : 배경이미지 위치

background-attachment : 배경이미지를 해당 위치에 고정

object-fit : <img> 나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 조절할 것인지 지정

- fill

- contain : 가로세로비  유지. 비율이 맞지 않으면 레터박스^[각주:1]

- cover : 가로 세로비를 유지하면서 콘텐츠 박스를 가득 채우며 비율이 맞지 않으면 잘립니다.

- none : 콘텐츠의 크기를 조절하지 않습니다.

- scale-down : none과 contain 중 크기가 더 작아지는 값을 선택

box model   

모든 HTML 요소는 박스 모양으로 구성되며 이것을 박스모델이라고 합니다.

구성  

Content 영역 : 요소의 실제 내용을 포함

Border 영역 : 컨텐츠 영역을 감싸는 테두리 선

Padding 영역 : 컨텐츠 영역과 테두리 사이의 여백

Margin 영역 : 테두리 바깥의 주변 요소와이 간격

border 속성  

border-width : 선의 굵기를 지정. 

border-style : 선의 모양을 지정

border-color : 선의 색상을 지정

border : [width] [style] [color]

테두리 특정 방향만 따로 설정 가능

border-top

border-bottom

border-left

border-right

padding 속성

padding-top : content영역의 위쪽 여백을 지정

padding-right : content영역의 오른쪽 여백을 지정

padding-left : content영역의 왼쪽 여백을 지정

padding-bottom : content영역의 아래쪽 여백을 지정

padding: [-top] [-right] [-bottom] [-left] : 축약형

margin 속성 

margin-top : border 영역의 위쪽 여백을 지정

margin-right : border 영역의 오른쪽 여백을 지정

margin-left : border 영역의 왼쪽 여백을 지정

margin-bottom : border 영역의 아래쪽 여백을 지정

margin: [-top] [-right] [-bottom] [-left] : 축약형

outline-style 속성  

dotted : 아웃라인 점선

dashed : 아웃라인 약간 긴 점선

solid : 아웃라인 실선

double : 아웃라인 이중 실선

groove : 아웃라인 3차원 입체적인 선

ridge : 아웃라인 3차원 능선효과가 있는 선

inset : 아웃라인 3차원 내지로 끼운 선

outset : 아웃라인 3차원 외지로 끼운 선

none : 아웃라인 없앰

hidden : 아웃라인 숨김

드롭다운   

마우스를 올려서 다른 요소나 텍스트가 나타나게하는 효과를 드롭다운이라고 합니다. 주로 마우스 hover 시 나타나게 만드는 방법으로 구현됩니다.

관련포스트

• CSS | 개념
• CSS | 구문과 적용 방법
• CSS | 폰트 텍스트 관련
• CSS | 선택자
• CSS | 조합자와 가상선택자
• CSS | 구체성과 상속
• CSS | 레이아웃
• CSS | 미디어 쿼리

1. 남는부분 까만색처리 [본문으로]