정렬과 간격
-
text-align 속성
- 텍스트 및 인라인 요소의 정렬 방식 지정
left: 왼쪽 정렬right: 오른쪽 정렬center: 가운데 정렬justify: 양쪽 정렬
-
letter-spacing / word-spacing
letter-spacing: 자간 (글자 간격)word-spacing: 단어 간격 (띄어쓰기 기준)- 권장 단위 :
em(서체 크기에 비례)
-
line-height 속성
- 줄 높이 조절
- 보통
1.5em사용 → 가독성 좋음
-
text-indent 속성
- 문단 시작 부분 들여쓰기
- 보통
em단위 사용
목록 스타일
- 목록 태그 :
<ul>,<ol>,<li> - CSS 속성 :
list-style(기호·숫자 스타일 변경 가능)
인라인과 블록 요소
기본 개념
-
블록 요소 (
div)- 줄 전체 차지
- 너비·높이·여백 가능
-
인라인 요소 (
span)- 텍스트와 함께 흐름에 따라 배치
- 기본적으로 너비·높이 지정 불가
display 변환
-
inline↔block변경 가능 -
inline-block:- 인라인처럼 한 줄에 나란히 배치
- 블록처럼 크기 조절 가능
가로 공간 차지
- block : 한 줄 독점
- inline : 콘텐츠 크기만큼만 차지
- inline-block : 한 줄 공유 가능 + 크기 지정 가능
여백
margin: 바깥 여백padding: 안쪽 여백
박스 모델
크기 지정
px: 절대 단위%: 부모 크기에 비례vw/vh: 뷰포트 기준 (화면 전체 대비)vmax/vmin: 긴 쪽 / 짧은 쪽 기준
calc() 함수
- 상대·절대 단위 혼합 가능
- 예:
calc(100% - 48px)
margin vs padding
-
margin : 바깥 여백
-
padding : 안쪽 여백
-
작성 방식 :
- 하나 → 전체
- 두 개 → 상하 / 좌우
- 세 개 → 위 / 좌우 / 아래
- 네 개 → 위 / 오른쪽 / 아래 / 왼쪽
테두리 속성
-
border: 두께 선종류 색상; -
선 종류 :
solid,dashed,dotted -
box-sizing
content-box: 콘텐츠 영역만border-box: padding, border 포함
-
border-radius : 모서리 둥글게 (50% → 원형)
overflow 속성
auto: 넘칠 경우 스크롤 자동 생성visible: 부모 영역 넘어가도 보임hidden: 넘친 부분 숨김scroll: 항상 스크롤바 표시
box-shadow 속성
형식 :
box-shadow: (inset) offset-x offset-y blur-radius spread-radius color;- 최소 필요값 :
x, y, color inset: 내부 그림자
색 표현 방법
- keyword : black, white, coral 등
- rgb/rgba :
rgb(255, 0, 0)/rgba(0,0,0,0.5) - hex :
#FFFFFF=rgb(255,255,255) - hsl/hsla : 색상(hue), 채도(saturation), 명도(lightness)
배경 꾸미기
-
background-image :
url()지정 -
background-repeat :
repeat,no-repeat,repeat-x,repeat-y,space,round -
background-position :
top,center,bottom,left,right -
background-size :
%: 비율 기준px: 고정 크기contain: 전체가 보이도록 조정cover: 빈 공간 없이 꽉 채움
