css
를 통해 html
의 어떤 부분을 제어할 수 있을까?
💡 의미
빨간색: 기본값
파란색: 기본값 외에 자주 사용되는 속성
width, height
auto: 기본값(요소에 이미 들어있는 속성의 값), 브라우저가 너비를 계산
단위: px, em, vw 등 단위로 지정
<span>
: 대표적인 인라인 요소
<div>
: 대표적인 블록 요소
max-width, max-height
none: 최대 너비 제한 없음
단위: px, em, vw 등 단위로 지정
min-width, min-height
0: 최소 너비 제한 없음
단위: px, em, vw 등 단위로 지정
px
: 픽셀%
: 상대적 백분율em
: 요소의 글꼴 크기rem
: 루트 요소(html
)의 글꼴 크기vw
: 뷰포트 가로 너비의 백분율vh
: 뷰포트 세로 너비의 백분율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 등 단위로 지정
padding
0: 내부 여백 없음
단위: px, em, vw 등 단위로 지정
%: 부모 요소의 가로 너비에 대한 비율로 지정
border
border: 선-두께 선-종류 선-색상;
border-width
단위: px, em, % 등 단위로 지정
border-style
none: 선 없음
solid: 실선 (일반 선)
dashed: 파선
border-color
black: 검정색
색상: 선의 색상
transparent: 투명
border-radius
0: 둥글게 없음
단위: px, em, vw 등 단위로 지정
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;
overflow
visible: 넘친 내용을 그대로 보여줌
hidden: 넘친 내용을 잘라냄
auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
display
block: 상자(레이아웃) 요소
inline: 글자 요소
inline-block: 글자 + 상자 요소
flex: 플렉스 박스(1차원 레이아웃)
grid: 그리드(2차원 레이아웃)
none: 보여짐 특성 없음, 화면에서 사라짐
기타: table, table-row, table-cell 등
opacity
1: 불투명
0: 0부터 1사이의 소수점 숫자
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
color
rgb(0,0,0): 검정색
색상: 기타 지정 가능한 색상
text-align
left: 왼쪽 정렬
right: 오른쪽 정렬
center: 가운데 정렬
text-decoration
none: 장식 없음
underline: 밑줄
line-through: 중앙 선
text-indent
0: 들여쓰기 없음
단위: px, em, rem 등 단위로 지정
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