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>