TIL - declarations

📌 단위 (units)

  • 절대 길이 단위 : cm, mm, px등
  • 상대 길이 단위 : em, rem, vw, vh 등
  • 백분률 : %

1. 절대 길이 단위

px

  • 디바이스 화면에서 이미지를 표현하는 가장 작은 단위
  • 요소의 넓이, 높이, 패딩, 마진, 보더 값, 폰트 사이즈 등 값의 단위로 사용
  • 기본 16px

2. 상대 길이 단위

  • % : 부모 요소 기준으로 백분율
  • em : 부모 요소 기준으로 배수
  • rem : root em, 최상위 요소 html 기준으로 배수
  • vw : 화면 넓이 기준으로 백분율
  • vh : 화면 높이 기준으로 백분율
  • vmin : 화면 넓이와 높이 중 작은 값을 기준으로 백분율
  • vmax : 화면 넓이와 높이 중 큰 값을 기준으로 백분율
  • ex : 현재 폰트의 x-height값, 현재 폰트의 소문자 x 높이 값을 기준으로 한 백분율

📌 font

1. font-size

font-size가 가질 수 있는 값

2. font-family

  • font-family 사용하여 글꼴 변경 가능
  • family-name : 궁서, 굴림, arial같은 글꼴 이름 사용. 글꼴이 사용자의 컴퓨터에 설치되어 있지 않은 경우, 글꼴은 브라우저 기본값으로 표시됨.
  • font format 이란 폰트를 구현하는 방법으로 브라우저 별로 서로 다른 포맷을 지원
  • woff, ttf/off는 모든 브라우저에서 지원

3. font-weight

  • normal - 기본값이며 보통 굵기
  • bold - 굵은 굵기
  • bolder - 상속된 값보다 굵은 굵기
  • lighter - 상속된 값보다 얇은 굵기
  • number - 숫자로 굵기 지정 100,200,300,400과 같은 숫자를 이용

4. 그외 속성

text-transform

  • uppercase 대문자
  • lowercase 소문자
  • capitalize 각 단어의 첫 글자를 대문자로


    font-style
  • normal
  • italic
  • oblique


    text-align
  • left
  • right
  • center
  • justify : 마지막 줄 제외하고 양쪽으로 정렬


    text-decoration
  • none : 효과 제거
  • line-through : 글자 중간에 선 추가
  • overline : 글자 위에 선 추가
  • underline : 밑줄 추가

📌 opacity

  • 투명도 지정
  • 투명도가 들어간 요소안의 내용물도 함께 투명해짐
  • 0.0-1.0 사이 숫자 지정

📌 color

1. 색상 이름

  • 다른 표현 방식에 비해 수가 제한적
 <style>
    .box {
    background-color: orange;}
  </style>

2. RGB값

  • 0~ 255의 값으로 표현
 <style>
    .box {
    background-color: RGB(102, 205,170)}
  </style>

3. HEX값 (16진수)

  • 16진수 6자리 코드로 색상을 표현하는 방식
 <style>
    .box {
    background-color: #F08080}
  </style>

좋은 웹페이지 즐겨찾기