CSS 속성(2)

LOOPY·2021년 7월 9일

font-style 글자의 기울기 : 기본 normal, 이텔릭체 italic
font-weight 글자의 두께(가중치) : 기본 normal=400, 두껍게 bold=700, 100~900 100단위로 9개 숫자 적용 가능
font-size 글자 크기 : 기본 16px
line-height 한 줄 높이(행간) : 단위 없이 숫자만 입력하면 요소의 글꼴 크기의 배수
font-family 글꼴(서체) : 글꼴 후보 반점으로 구분해 나열 후 마지막에 ⭐글꼴 계열 작성
- ex) font-family: "맑은 고딕", "Malgun Gothic", Helvetica, sans-serif
- 앞에서부터 적용 시도 후 전부 안되면 마지막 글꼴 계열 중 무작위로 적용
- 띄어쓰기 등 특수문자 포함된 글꼴 이름은 큰따옴표로 묶기
- 글꼴 계열 : serif 바탕체, sans-serif 고딕체, monospace 고정너비, cursive 필기체, fantasy 장식 글꼴

color 글자색 : 기본값 black = rgb(0,0,0)
text-align 문자 정렬 방식 : 기본값 left, 우측 정렬 right, 가운데 정렬 center, 양쪽 정렬 justify
text-decoration 문자의 장식(선) : 기본값 none, 밑줄 underline, 중앙선 line-through
- a 태그는 기본값이 underline
text-indent 들여쓰기 : 문단 첫 줄에 적용, 기본값 0, 음수로 설정하면 outdent(내어쓰기)

background-color 배경색 : 기본값 transparent(투명)
background-image 배경 이미지 삽입 : 기본값 none, 이미지 url("경로")
background-repeat 배경 이미지 반복 : 기본값 repeat(수직+수평 반복; 바둑판식), 수평 반복 repeat-x, 수직 반복 repeat-y, 반복 없음 no-repeat
background-position 배경 이미지 위치 : 방향과 단위로 지정
background-size 배경 이미지 크기 : 기본 auto(이미지 실제 크기), 비율 유지하며 넓은 너비에 맞추기 cover, 비율 유지하며 짧은 너비에 맞추기 contain
- (단위로) 값 하나만 입력 -> 가로 지정 후 비율 맞춰 자동으로 세로 지정
background-attachment 배경 이미지 스크롤 : 기본 scroll(이미지가 요소 따라 같이 스크롤), 이미지 뷰포트에 고정 fixed

position 위치 지정 : 기본 static(기준X), 자신 기준 relative, 위치 상 부모 요소 기준 absolute, 뷰포트 기준 fixed
- static : 위치가 없는 상태로 이해
- relative : 배치 전 자리는 비어있는 채로 허상이 생기는 개념, absolute 적용 시 위치상 부모요소 지정 위해 사용
- absolute : 구조 상 부모 요소에 relative 적용 필요, 부모 없으면 상위 요소로(뷰포트까지)
- fixed : 스크롤 움직여도 요소는 고정되어있음
- ⭐ absolute, fixed는 요소가 붕 뜨며 다른 요소와 겹치게 됨 + 자동으로 display: block;
top, bottom, left, right 요소의 각 방향 별 거리 지정 : 기본 auto
🌟요소 쌓임 순서(Stack order) : 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
- 1) 요소에 position 속성 값이 있는 경우 위에 쌓임 (기본값 static 제외)
- 2) 1번 조건이 같은 경우, z-index 속성의 숫자값이 높을수록 위에 쌓임
- 3) 1,2번 조건이 같은 경우, HTML의 다음(뒤쪽) 구조일수록 위에 쌓임
z-index 쌓임 정도 : 기본 auto(0; 부모 요소와 동일), 숫자가 높을수록 위에 쌓임(position 속성 값 유무 같은 경우), 값의 범위 제한 없으나 보통 -1 이상으로

2년차 프론트엔드 개발자의 소소한 기록을 담습니다 :-)