[프론트엔드] 8. CSS 속성 (1) 박스 모델

[ 1 ] 박스 모델

1) width / height

: 요소의 가로 / 세로 너비

• 기본값
  • auto : 자동
• 설정값
  • 단위 : px em vw ...

2) max-width / max-height

: 요소의 커질 수 있는 최대 가로 / 세로 너비

• 기본값
  • none : 제한 없음.
• 설정값
  • 단위 : px em vw ...
  • auto : 자동

3) min-width / min-height

: 요소의 작아질 수 있는 최대 가로 / 세로 너비

• 기본값
  • 0 : 제한 없음.
• 설정값
  • 단위 : px em vw ...
  • auto : 자동

4) margin

: 요소의 외부 여백을 설정

• 기본값
  • 0 : 없음.
• 설정값
  • auto : 자동
  • 단위 : px em vw ...
  • % : 부모 요소 가로너비에 대한 비율로 설정

    margin : 50px;
    : top / right / bottom / left
margin : 50px 30px;
    : top / bottom left / right
margin : 50px 30px 20px;
    : top left / right bottom
margin : 50px 30px 20px 10px;
    : top right bottom left

margin-방향

: ex) margin-top / margin-bottom / margin-left / margin-right

5) padding

: 요소의 내부 여백을 설정

• 기본값
  • 0 : 없음.
• 설정값
  • 단위 : px em vw ...
  • % : 부모 요소 가로너비에 대한 비율로 설정

    padding : 50px;
    : top / right / bottom / left
padding : 50px 30px;
    : top / bottom left / right
padding : 50px 30px 20px;
    : top left / right bottom
padding : 50px 30px 20px 10px;
    : top right bottom left

padding-방향

: ex) padding-top / padding-bottom / padding-left / padding-right

6) border

: 요소의 테두리 선 설정
: border: width style color;

border-width

• 기본값
  • medium : 중간
• 설정값
  • 단위 : px em vw ...
  • thin : 얇음
  • thick : 두꺼움
• 예시 )
  border-width : top / right / bottom / left ;
  border-width : top / bottom left / right ;
  border-width : top left / right bottom ;
  border-width : top right bottom left ;

border-style

• 기본값
  • none : 없음
• 설정값
  • solid : 실선
  • dashed : 파선
  • dotted : 점선
  • double : 두줄선
  • groove : 홈이 파진 모양
  • ridge : 솟은 모양 (groove 반대)
  • inset : 요소 전체가 들어감
  • outset : 요소 전체가 나옴
• 예시 )
  border-style : top / right / bottom / left ;
  border-style : top / bottom left / right ;
  border-style : top left / right bottom ;
  border-style : top right bottom left ;

border-color

• 기본값
  • black : 검정
• 설정값
  • 색상 : 선의 색상
  • transparent : 투명
• 예시 )
  border-color : top / right / bottom / left ;
  border-color : top / bottom left / right ;
  border-color : top left / right bottom ;
  border-color : top right bottom left ;

border-방향 border-방향-속성

: 예시 )
border-bottom : 두께 종류 색상;
border-top-style : 종류;

7) border-radius

: 요소의 모서리를 둥글게

• 기본값
  • 0 : 둥글게 없음.
• 설정값
  • 단위 : px em vw ...
• 예시 )
  border-radius : topleft / topright / bottomright / bottomleft ;

8) box-sizing

: 요소의 크기를 계산하는 기준 설정

• 기본값
  • content-box : 내용(content) = 크기
    : 요소에 padding 과 border 가 붙음에 따라 설정했던 크기에서 점점 커짐.
• 설정값
  • border-box : 내용(content) + padding + border = 크기
    : 요소의 크기가 내용(content)과 padding , border 를 포함 하기에 설정한 값만큼의 크기를 유지.

9) overflow

: 요소의 크기 이상으로 내용이 넘쳤을 때 어떻게 보여질지 설정.

• 기본값
  • visible : 그대로 보여줌.
• 설정값
  • hidden : 넘친 만큼을 숨김
  • scroll : 넘친 만큼을 숨기고 스크롤바를 생성.
    (필요유무에 상관 없이 무조건 x축, y축 둘다 생성.)
  • auto : scroll 과 비슷하지만 필요유무에 따라 스크롤바 생성.

overflow-x / overflow-y

: x축과 y축을 개별적으로 설정.

10) display

: 요소의 출력 특성 설정

• 기본값
  • block : 상자요소.
  • inline : 글자요소.
  • inline-block : 기본적으로 글자요소지만 상자요소의 특징또한 가짐.
  • 기타 : table , table-row, table-cell...
• 설정값
  • flex : 플렉스박스 (1차원 레이아웃)
  • grid : 그리드 (2차원 레이아웃)
  • none : 특성 없음. 보이지 않게 된다.

11) opacity

: 투명도

• 기본값
  • 1 : 불투명.
• 설정값
  • 0~1 : 1이하의 소수점 숫자, 0에 가까울 수록 투명.