프론트엔드 공부 5일차 CSS 속성

waymo·2022년 4월 30일
0

패캠 FE 공부

목록 보기
5/28

5일차

어제에 이어서 CSS 속성 공부


CSS 속성

11. 글꼴

1. font-style

font-style

  • 글자의 기울기
  • normal 기울기 없음
  • italic 이텔릭체
  • oblique 기울어진 글자

2. font-weight

font-weight

  • 글자의 두께(가중치)
  • normal, 400 기본 두께 ✔
  • bold, 700 두껍게 ✔
  • bolder 상위(부모) 요소보다 더 두껍게
  • lighter 상위(부모) 요소보다 더 얇기
  • 100 ~ 900 100단위의 숫자 9개 , normal과 bold 이외 두께

3. font-size

font-size

  • 글자의 크기
  • 16px 기본 크기 ✔
  • 단위 px, em, rem 등 단위로 지정 ✔
  • % 부모 요소의 폰트 크기에 대한 비율
  • smaller 상위(부모) 요소보다 작은 크기
  • lager 상위(부모) 요소보다 큰 크기
  • xx-small ~ xx-large 가장 작은 크기 ~ 가장 큰 크기까지, 7단계의 크기를 지정

4. line-height

line-height

  • 한 줄의 높이, 행간과 유사
  • normal 브라우저의 기본 정의를 사용
  • 숫자 요소의 글꼴 크기의 배수로 지정 ✔(권장)
  • 단위 px, em, rem 등의 단위로 지정 ✔
  • % 요소의 글꼴 크기의 비율로 지정

5. font-family

font-family
font-family: 글꼴1, "글꼴2" , ... 글꼴 계열; (필수작성)
1번 2번 후보 지정 후보가 안되면 글꼴 계열로
띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶기
고딕체 계열 많이 사용 "sans-serif"

12. 문자

문자와 관련된 속성

color

color

  • 글자의 색상
  • rgb(0,0,0,) 검정색 (기본값)
  • 색상 기타 지정 가능한 색상

text-align

text-align

  • 문자의 정렬 방식
  • left 왼쪽 정렬
  • right 오른쪽 정렬
  • center 가운데 정렬
  • justify 양쪽 정렬

text-decoration

text-decoration

  • 문자의 장식(선)
  • none 장식 없음 (기본값)
  • underline 밑줄 (a태그 기본값)
  • overline 윗줄
  • line-through 중앙 선

text-indent

text-indent

  • 문자 첫줄의 들여쓰기
  • 0 들여쓰기 없음
  • 단위 px, em, rem 등 단위로 지정
  • % 요소의 가로 너비에 대한 비율
  • 음수를 사용시 내어쓰기(outdent)

13. 배경 (background)

background-color

background-color

  • 요소의 배경 색상
  • transparent 투명함
  • 색상 지정 가능한 색상

background-image

background-image

  • 요소의 배경 이미지 삽입
  • none 이미지 없음
  • url("경로") 이미지 경로

background-repeat

background-repeat

  • 요소의 배경 이미지 반복
  • repeat 이미지를 수직, 수평 반복
  • repeat-x 이미지를 수평 반복
  • repeat-y 이미지를 수직 반복
  • no-repeat 반복 없음

background-position

background-position

  • 요소의 배경 이미지 위치
  • 0% 0% 0% ~ 100% 사이 값
  • 방향 top, bottom, left, right, center 방향
  • 단위 px, em, rem 등 단위로 지정

background-size

background-size

  • 요소의 배경 이미지 크기
  • auto 이미지의 실제 크기 (기본값)
  • 단위 px, em, rem 등 단위로 지정
  • cover 비율을 유지, 요소의 더 넓은 너비에 맞춤
  • contain 비율을 유지, 요소의 더 짧은 너비에 맞춤
    150px 150px 가로 세로 x y
    하나만 명시✔

background-attachment

background-attachment

  • 요소의 배경 이미지 스크롤 특성
  • scroll 이미지가 요소를 따라서 같이 스크롤 (기본값)
  • fixed 이미지가 뷰포트에 고정, 스크롤 X
  • local 요서 내 스크롤 시 이미지가 같이 스크롤

14. 배치

position

position

  • 요소의 위치 지정 기준
  • static 기준 없음 (기본값)
  • relative 요소 자신을 기준
  • absolute 위치 상 부모 요소를 기준 (위치 상 부모 요소를 꼭 확인) ✔
  • fixed 뷰포트(브라우저)를 기준
  • sticky 스크롤 영역 기준
  • top bottom left right z-index

top bottom left right

  • 요소의 각 방향별 거리 지정
  • auto 브라우저가 계산
  • px, em, rem 등 단위로 지정

⭐absolute 부모 상위요소가 static일경우 기준안되면 뷰포트를 부모로 기준

요소 쌓임 순서(Stack order)

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

z-index

z-index

  • 요소의 쌓임 정도를 지정 (position 속성 먼저 비교후)
  • auto 부모 요소와 동일 한 쌓임 정도 (기본값)
  • 숫자 숫자가 높을 수록 위에 쌓임

profile
FE 개발자(진)가 되고 싶습니다

0개의 댓글