CSS 속성

css를 통해 html의 어떤 부분을 제어할 수 있을까?

• 박스 모델
  
  
• 글꼴
  
  
• 배경
  
  
• 배치
  
  
• 플렉스(정렬)
  
  
• 전환: 요소의 전, 후 상태를 애니메이션 처리
  
  
• 변환: 요소를 회전하거나 이동, 크기 조정
  
  
• 띄움
  
  
• 애니메이션: 전환보다 조금 더 복잡한 애니메이션을 만들 수 있음
  
  
• 그리드: 행과 열의 구조를 가지고 있는 2차원의 레이아웃 구조를 제어 가능
  
  
• 다단
  
  
• 필터
  
  

들어가기 전..

💡 의미
빨간색: 기본값
파란색: 기본값 외에 자주 사용되는 속성

1. 박스 모델

width, height

• 요소의 가로/세로 너비이다.
  
  

auto: 기본값(요소에 이미 들어있는 속성의 값), 브라우저가 너비를 계산
단위: px, em, vw 등 단위로 지정

• <span>: 대표적인 인라인 요소
  
  

• <div>: 대표적인 블록 요소
  
  

max-width, max-height

• 요소가 커질 수 있는 최대 가로/세로 너비이다.

none: 최대 너비 제한 없음
단위: px, em, vw 등 단위로 지정

min-width, min-height

• 요소가 작아질 수 있는 최대 가로/세로 너비이다.

0: 최소 너비 제한 없음
단위: px, em, vw 등 단위로 지정

2. 단위

• px: 픽셀
• %: 상대적 백분율
• em: 요소의 글꼴 크기
  • 기본적으로 글꼴의 크기는 16px, 10em = 16 * 10 = 160px
• rem: 루트 요소(html)의 글꼴 크기
• vw: 뷰포트 가로 너비의 백분율
• vh: 뷰포트 세로 너비의 백분율
  
  

3. margin

• 요소의 외부 여백(공간)을 지정하는 단축 속성이다.
• 개별 속성도 있다.
• 음수를 사용할 수 있다.

🤔 단축 속성
margin: 10px;: 상하좌우 10px 여백 적용
margin: 10px 20px;: 상하 10px, 좌우 20px 여백 적용
margin: 10px 20px 30px;: 상 10px, 중(좌우) 20px, 하 30px 여백 적용
margin: 10px 20px 30px 40px;: 상 10px, 우 20px, 하 30px 좌 40px 여백 적용(🕑 시계 방향)

0: 외부 여백 없음
auto: 브라우저가 여백을 계산, 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용
단위: px, em, vw 등 단위로 지정

4. padding

• 요소의 내부 여백(공간)을 지정하는 단축 속성이다.
• 개별 속성도 있다.
• 요소의 크기가 커진다.
  
  

0: 내부 여백 없음
단위: px, em, vw 등 단위로 지정
%: 부모 요소의 가로 너비에 대한 비율로 지정

5. border

• border: 선-두께 선-종류 선-색상;
• 요소의 테두리 선을 지정하는 단축 속성이다.
• 요소의 크기가 커진다.
  
  

border-width

• 요소 테두리 선의 두께이다.
• 개별 속성이며, 단축 속성이다.

단위: px, em, % 등 단위로 지정

border-style

• 요소 테두리 선의 종류이다.
• 개별 속성이며, 단축 속성이다.

none: 선 없음
solid: 실선 (일반 선)
dashed: 파선

border-color

• 요소 테두리 선의 색상을 지정하는 단축 속성이다.
• 개별 속성이며, 단축 속성이다.

black: 검정색
색상: 선의 색상
transparent: 투명

6. border-radius

• 요소의 모서리를 둥글게 깎는다.
  
  

0: 둥글게 없음
단위: px, em, vw 등 단위로 지정

7. box-sizing

• 요소의 크기 계산 기준을 지정한다.
  
  

👩‍💻 예제

content-box: 요소의 내용(content)으로 크기 계산
border-box: 요소의 내용 + padding + border로 크기 계산

❓ Question 1. 다음 코드에서 지정된 요소의 실제 가로 너비는?

width: 100px;
padding: 20px;
border: 1px solid red;

💡 142px;

❓ Question 2. 다음 코드에서 지정된 요소의 실제 가로 너비는?

width: 100px;
padding: 20px;
border: 1px solid red;
box-sizing: border-box;

💡 100px;

8. overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성이다.
  
  

visible: 넘친 내용을 그대로 보여줌
hidden: 넘친 내용을 잘라냄
auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

9. display

• 요소의 화면 출력(보여짐) 특성
  
  

각 요소에 이미 지정되어 있는 값

block: 상자(레이아웃) 요소
inline: 글자 요소
inline-block: 글자 + 상자 요소

따로 지정해서 사용하는 값

flex: 플렉스 박스(1차원 레이아웃)
grid: 그리드(2차원 레이아웃)
none: 보여짐 특성 없음, 화면에서 사라짐


기타: table, table-row, table-cell 등

10. opacity

• 요소 투명도
  
  

1: 불투명
0: 0부터 1사이의 소수점 숫자

11. 글꼴

font-style

• 글자의 기울기

normal: 기울기 없음
italic: 이텔릭체

font-weight

• 글자의 두께(가중치)

400: 기본 두께
bold, 700: 두껍게
100 ~ 900: 100단위의 숫자 9개, normal과 bold 이외 두께

font-size

• 글자의 크기

16px: 기본 크기
단위: px, em, rem 등 단위로 지정

line-height

• 한 줄의 높이, 행간과 유사

숫자: 요소의 글꼴 크기의 배수로 지정
단위: px, em, rem 등 단위로 지정

font-family

• 글꼴 지정

12. 문자

color

• 글자의 색상

rgb(0,0,0): 검정색
색상: 기타 지정 가능한 색상

text-align

• 문자의 정렬 방식

left: 왼쪽 정렬
right: 오른쪽 정렬
center: 가운데 정렬

text-decoration

• 문자의 장식(선)

none: 장식 없음
underline: 밑줄
line-through: 중앙 선

text-indent

• 문자 첫 줄의 들여쓰기
• 음수를 사용할 수 있다. (내어쓰기)

0: 들여쓰기 없음
단위: px, em, rem 등 단위로 지정

13. 배경

background-color

• 요소의 배경 색상

transparent: 투명함
색상: 지정 가능한 색상

background-image

• 요소의 배경 이미지

none: 이미지 없음
url("경로"): 이미지 경로

background-repeat

• 요소의 배경 이미지 반복

repeat: 이미지룰 수직, 수평 반복
repeat-x: 이미지를 수평 반복
repeat-y: 이미지를 수직 반복
no-repeat: 반복 없음

background-position

• 요소의 배경 이미지 위치

방향: top, bottom, left, right, center 방향
단위(x,y축): px, em, rem 등 단위로 지정

background-size

• 요소의 배경 이미지 크기

auto: 이미지의 실제 크기
단위: px, em, rem 등 단위로 지정
cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤
contain: 비율을 유지, 요소의 더 짧은 너비에 맞춤

🤔 tip
이미지 삽입 시 가로와 세로 사이즈를 동시에 명시할 필요가 없다. 사이즈를 변경할 때마다 비율에 맞춰서 변경하기란 매우 번거로운데, 가로나 세로 사이즈 중 하나만 명시하면 알아서 비율에 맞게 잘 출력된다!

background-attachment

• 요소의 배경 이미지 스크롤 특성

scroll: 이미지가 요소를 따라서 같이 스크롤
fixed: 이미지가 뷰포트에 고정, 스크롤 X