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>
Author And Source
이 문제에 관하여(TIL - declarations), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@miniso/TIL-declarations저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)