HTML/CSS/JS Ch 8. CSS 속성(Part1)

6461 단어 Week204190419

CH08.


박스모델

  • width, height
    요소의 가로/세로 너비
    기본값 : auto
    단위 : px, em, vw ...

  • max-width, max-height
    요소가 커질 수 있는 최대 가로/세로 너비
    기본값 : none
    단위 : px, em, vw ...

  • min-width, min-height
    요소가 작아질 수 있는 최소 가로/세로 너비
    기본값 : 0
    단위 : px, em, vw ...

단위

단위이름
px픽셀
%상대적 백분율
em요소의 글꼴 크기
rem루트 요소의 글꼴 크기
vwviewport 가로 너비의 백분율
vhviewport 세로 너비의 백분율

여백

  • margin
    요소의 외부 여백을 지정하는 단축 속성
    음수 사용 가능
    기본값 : 0
    auto, 단위, % 가능
    margin: top,right,bottom,left;
    margin: top,bottom left,right; -> 십자가
    margin: top left,right bottom; -> 상중하
    margin: top right bottom left; -> 시계방향

  • padding
    요소의 내부 여백을 지정하는 단축 속성
    기본값 : 0
    auto, 단위, % 가능
    여백이 생긴만큼 요소의 크기가 커짐
    padding: top,right,bottom,left;
    padding: top,bottom left,right; -> 십자가
    padding: top left,right bottom; -> 상중하
    padding: top right bottom left; -> 시계방향

  • border
    요소의 테두리 선을 지정하는 단축 속성
    테두리 만큼 요소의 크기가 커짐

    border: border-width border-style border-color;

    기본값: medium none black
    border-width: 방향성
    border-style: none, solid, dashed(파선)
    border-color: 색상

  • border-raidus

border-raidus: 10px;
border-raidus: 0 10px 0 0;
오른쪽 상단 모서리 (좌측 상단 모서리부터 시계방향)

색상표현

  • 색상이름: red, blue, yellow...
  • Hex: 16진수 색상 #FFFFFF ...
  • RGB: rgb(255, 255, 255)
  • RGBA: RGB+투명도 rgb(0, 0, 0, 0.5)

  • box-sizing
    요소의 크기 계산 기준을 지정
    기본값: content-box
    content-box: 요소의 내용으로 계산
    border-box: 요소의 내용 + padding +border로 계산

  • overflow
    요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
    기본값: visible
    visible: 넘친 내용을 그대로 보여줌
    hidden: 넘친 내용을 잘라냄
    scroll: 스크롤 생성
    auto: 넘친 축만 스크롤 생성

  • display
    요소의 화면 출력 특성
    기본값(요소별): block, inline, inline-block
    flex, grid, none(사라짐), etc...

  • opacity
    요소의 투명도
    기본값: 1 (불투명)
    (투명)0~1(불투명)

font

  • font-style
    글짜의 기울기
    기본값: normal
    italic, oblique

  • font-weight
    글짜의 두께
    기본값: normal(400)
    bold, 100 ~ 900

  • font-size
    글짜의 크기
    기본값: 16px
    px, em, rem etc...

  • line-height
    한 줄의 높이, 행간과 유사
    요소의 글꼴 크기의 배수로 지정

  • font-family
    font-family: 글꼴1, 글꼴2, ... 글꼴계열;
    글꼴계열: serif, sans-serif, monospace, cursive, fantasy


문자

  • color
    글자의 색상
    기본값: rgb(0,0,0)

  • text-align
    문자의 정렬방식
    기본값: left
    right, center

  • text-decoration
    기본값: none(장식없음)
    underline, overline, line-through

  • text-indent
    기본값: 0 (들여쓰기 없음)
    음수를 이용해서 outdent(내여쓰기 가능)


배경

  • background-color
    배경 색상
    기본값: transparent(투명함)

  • background-image
    배경 이미지 삽입
    url("img_path")

  • background-repeat
    기본값: repeat(수직, 수평 반복)
    repeat-x, repeat-y, no-repeat

  • background-position
    기본값: 0% 0%(왼쪽상단)
    top, bottom, left, right, center, top right ...
    px, em, rem... (x축, y축)

  • background-size
    요소의 배경 이미지 크기
    기본값: auto(이미지의 실제 크기)
    px, em, rem...
    cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤 (이미지가 잘림)
    contain: 비율을 유지, 요소의 더 짧은 너비에 맞춤 (이미지가 다 보임)

  • background-attachment
    요소의 배경 이미지 스크롤 특성
    기본값: scroll(이미지가 요소를 따라 같이 스크롤)
    fixed: viewport에 고정 (스크롤 X)


배치

  • position
    요소의 위치 지정 기준
    기본값: static(기준없음)
    relative: 요소 자신을 기준
    absolute: 위치 상 부모 요소를 기준
    -> 부모 요소의 position이 relative로 지정되어 있어야 함, 계속해서 순차적으로 상위요소를 찾다가 없으면 viewport를 기준으로 배치됨
    fixed: viewport 기준
    sticky: 스크롤 영역 기준

    absolute와 fixed가 지정된 요소는, display 속성이 block으로 변경된다

  • Stack order
    요소가 사용자와 더 가깝게 있는지 결정
    1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(static 제외)
    2. 1번 조건이 같은 경우, z-index 속성의 값이 높을 수록 위에 쌓임
    3. HTML의 다음 구조일 수록 위에 쌓임

  • z-index
    요소의 쌓임 정도를 지정
    기본값: auto(0,부모요소와 같은 쌓임 정도)

좋은 웹페이지 즐겨찾기