[Worksheet 220419] CSS 속성-1

5839 단어 WorksheetCSSCSS
HTML/CSS/JS로 만드는 스타벅스 웹사이트

CSS 속성

CSS 속성(Properties)

Width, Height

요소의 가로/세로 너비

div {
	width: 100px;
    height: 100px;
}
  • 기본 값 auto
    브라우저가 너비를 계산

max-width, max-height

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

  • 기본 값
    none

min-width, min-height

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

  • 기본 값
    0

CSS 단위

  • px
    픽셀

  • %
    상대적 백분율

  • em
    요소의 글꼴 크기

  • rem
    루트 요소(html)의 글꼴 크기

  • vw, vh
    뷰포트 가로/세로 너비의 백분율

Margin

요소의 외부 여백(공간)을 지정하는 단축 속성
음수 값도 가능하다

  • 기본 값
    0

  • 단축 속성
    한번에 제어해준다

    • margin: top, right, bottom, left;
    • margin: top, bottom right, left;
    • margin: top right, left bottom;
    • margin: top right bottom left;
  • 방향
    margin-'방향'
    margin-top, margin-bottom, margin-right, margin-left

  • 음수 값
    값만큼 겹쳐지게 된다.

Padding

요소의 내부 여백을 지정하는 단축 속성
내부 여백이기 때문에 요소의 크기가 커진다.

  • 기본 값
    0

  • 단축 속성
    한번에 제어해준다

    • padding: top, right, bottom, left;
    • padding: top, bottom right, left;
    • padding: top right, left bottom;
    • padding: top right bottom left;
  • 방향
    padding-'방향'
    padding-top, padding-bottom, padding-right, padding-left

Border / Color

테두리 선

요소의 테두리 선을 지정하는 단축 속성
요소의 크기가 늘어난다.

border: 선-두께 선-종류 선-색상;

  • border-width

    • 기본 값
      중간 두께이나 CSS 단위로 지정할 것
  • border-style

    • 기본 값
      none
    • 실선
      solid
    • 파선
      dashed
  • border-color

    • 기본 값
      black
    • 투명
      transparent

색상 표현

색을 사용하는 모든 속성에 적용 가능한 색상 표현

  • 색상 이름
    브라우저에서 제공하는 색상 이름
    ex) red, tomato, royalblue

  • Hex 색상코드
    16진수 색상
    ex) #000, #FFFFF

  • RGB
    빛의 삼원색
    ex) rgb(255, 255, 255)

  • RGBA
    빛의 삼원색 + 투명도
    ex) rgba(0, 0, 0, 0.5)

Border-radius

요소의 모서리를 둥글게 깍음

  • 기본 값
    둥글게 없음

border-radius: value;

Box-sizing

요소의 크기 계산 기준을 지정

  • content-box
    요소의 내용으로 크기 계산

  • border-box
    요소의 내용 + padding + border로 크기 계산
    padding이나 border로 요소가 커지는 속성을 사용할 시 크기를 다시 계산해야하는 경우를 방지하기 위한 속성

Overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

  • visible(기본)
    넘치는 내용을 그대로 보여준다.

  • hidden
    넘치는 부분 잘라낸다.

  • scroll
    스크롤로 넘치는 내용을 볼 수 있게 한다.

  • auto
    넘친 부분만 스크롤로 넘치는 내용을 볼 수 있게 한다.

Overflow-x, y

내용이 넘쳤을 때, 보여짐을 제어하는 개별 속성도 있다.

Display

요소의 화면 출력(보여줌) 특성

  • block
    상자 요소

  • inline
    글자 요소

  • inline-block
    글자+상자 요소

  • flex
    1차원 레이아웃

  • grid
    2차원 레이아웃

  • none
    보여짐 특성 없음, 화면에서 사라짐

  • 기타
    table, table-row, table-cell 등

Opacity

요소의 투명도 (0~1)

  • 기본 값
    1

Font

글꼴

  • font-size
    글자의 크기

    • 16px
      기본 크기
  • font-weight
    글자의 두께
    100~900의 100단위의 숫자 9개

    • normal
      기본 값
    • bold
      두껍게
  • font-style
    글자의 기울기

    • nomal
      기본 값
    • italic
      기울어짐
  • line-height
    한 줄의 높이, 행간과 유사하다

    • normal
      1
    • 숫자
      요소의 글꼴 크기의 배수로 지정
    • 단위
      px, em, rm 등의 단위로 지정
  • font-family
    글꼴 지정
    font-family: 글꼴1, "글꼴2", ...글꼴계열;
    글꼴의 후보를 보고 사용할 수 있는 것을 사용한다.

    • 글꼴 계열
      • serif 바탕체
      • sans-serif 고딕체
      • 등등

Text

  • color
    글자의 색상

  • text-align
    문자의 정렬 방식

    • left(기본) right center
  • text-decoration
    문자의 장식(선)

    • none (기본)
    • underline
      밑줄
    • line-through
      중앙선
  • text-indent
    문자 첫 줄의 들여/내어쓰기

    • 0 (기본)
    • 양수
      들여쓰기
    • 음수
      내어쓰기

Background

  • background-color
    배경의 색상 지정

  • background-image
    배경에 이미지 지정
    backgound-image: url("경로");

  • background-size
    배경의 이미지의 크기를 지정
    요소의 크기 보다 이미지의 크기가 작으면 반복 출력되는 것이 기본

    • auto
      이미지의 실제 크기가 기본
    • 단위
    • cover
      비율 유지, 요소의 더 넓은 너비에 맞춤
    • contain
      비율 유지, 요소의더 짧은 너비에 맞춤
  • backgound-repeat

    • repeat
      기본
    • repeat-x/y
      x/y축으로만 반복
    • no-repeat
      반복 없음
  • backgound-position
    요소의 배경 이미지 위치

    • 방향
      top, bottom, right, left, center 방향 지정
    • 단위
  • background-attachment
    요소의 배경 이미지 스크롤 특성

    • scroll
      기본
      이미지가 요소를 따라서 같이 스크롤
    • fixed
      이미지가 뷰포트에 고정, 스크롤 X

좋은 웹페이지 즐겨찾기