코딩자율학습단 19기 | 7일차 학습일지 – 텍스트 스타일링·박스 모델 ·background 속성

오늘 학습 정보

• 날짜/Day: 2026/01/20 (Day7)
• 교재 범위: ~ 6.4 배경 속성으로 요소의 배경 설정하기 (p.171~222)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 텍스트 관련 CSS 속성(font/text)
• 핵심 키워드 2: 박스 모델(margin/border/padding/content) + box-sizing
• 핵심 키워드 3: 배경(background-* / background 단축 속성)

개념 정리

2-1) CSS 선언 기본 구조(공통)

역할: “선택자”로 대상을 고르고, { } 안에 “속성: 값;” 형태로 스타일을 적용

핵심 포인트:

• 선언은 반드시 ;로 끝냄(여러 개 선언 시 누락 주의)
• 같은 선택자에 여러 속성 선언 가능
• 우선순위(상속/구체성/선언 순서) 이슈는 실습에서 자주 체감하므로, 우선은 문법 정확히 익히는 게 목 표

기본 형식:

• 선택자 { 속성: 값; }

예시(코드):

• p { color: #333; line-height: 1.6; }

2-2) 텍스트 관련 속성(가독성 세팅의 핵심 묶음)

color(글자 색)

역할: 텍스트(글자) 색상을 지정

핵심 포인트:

• “글자 색”만 바뀌며, 배경은 background-color로 별도 지정
• 색상값은 이름(red), 16진수(#00f), rgb/rgba 등 형태로 올 수 있음

기본 형식:

• color: <색상값>;

예시(코드):

• p { color: #00f; }

font-size(글자 크기)

역할: 텍스트 크기를 지정

핵심 포인트:

• 단위(px 등)를 포함해 크기를 지정
• 같은 페이지에서도 제목/본문/설명 텍스트 계층을 font-size로 구분하는 것이 기본

기본 형식:

• font-size: <크기>;

예시(코드):

• h1 { font-size: 32px; } p { font-size: 16px; }

font-weight(굵기)

역할: 글자 굵기를 지정

핵심 포인트:

• 숫자(100~900) 또는 키워드(normal, bold)로 표현
• 폰트 자체가 지원하지 않는 굵기는 정상 반영이 제한될 수 있음

기본 형식:

• font-weight: <값>;

예시(코드):

• h1 { font-weight: 700; } p { font-weight: 400; }

font-style(기울임)

역할: 글자를 기울여 표시(italic 등)

핵심 포인트:

• 강조 표현(em)과 함께 자주 등장

기본 형식:

• font-style: normal | italic;

예시(코드):

• em { font-style: italic; }

text-align(가로 정렬)

역할: 텍스트의 가로 정렬(left/center/right)을 지정

핵심 포인트:

• “텍스트 정렬” 중심 속성으로, 레이아웃 정렬(margin auto 등)과는 목적이 다름

기본 형식:

• text-align: left | center | right;

예시(코드):

• h2 { text-align: center; } p { text-align: left; }

text-decoration(장식)

역할: 밑줄/취소선 등 텍스트 장식을 지정

핵심 포인트:

• 링크(a)의 기본 밑줄을 제거할 때 자주 사용

기본 형식:

• text-decoration: none | underline | line-through;

예시(코드):

• a { text-decoration: none; }

letter-spacing(자간)

역할: 글자 사이 간격을 조정

핵심 포인트:

• 제목/로고성 문구에 미세 조정으로 사용되는 경우가 많음

기본 형식:

• letter-spacing: <크기>;

예시(코드):

• h1 { letter-spacing: 1px; }

line-height(행간)

역할: 줄 간격(행 높이)을 지정

핵심 포인트:

• 본문 가독성에 직접 영향(너무 좁으면 답답, 너무 넓으면 흐름 끊김)

기본 형식:

• line-height: <배수> | <크기>;

예시(코드):

• p { line-height: 1.6; }

2-3) 박스 모델(Box Model): margin / border / padding / content

역할: 요소의 “보이는 크기”와 “요소 간 간격”을 구성하는 핵심 개념

핵심 포인트:

• 바깥에서 안쪽으로: margin → border → padding → content
• 개발자도구의 박스 모델 영역(색상 블록)으로 확인하면 이해가 빠름

2-3-1) margin(바깥 여백)

역할: 요소 바깥쪽 여백(요소와 요소 사이 간격)

핵심 포인트:

• 상/하/좌/우 방향별 지정 가능
• 축약 문법(1~4개 값)으로 빠르게 지정 가능

기본 형식:

• margin: <크기>;
• margin: <상하> <좌우>;
• margin: <상> <우> <하> <좌>;
• margin-top/right/bottom/left: <크기>;

예시(코드):

• /* 상하 10px, 좌우 20px */ .box { margin: 10px 20px; }
• /* 위 5px만 */ .title { margin-top: 5px; }

2-3-2) border(테두리)

역할: 요소의 테두리를 그려 “경계”를 표시

핵심 포인트:

• border는 복합 속성(두께/스타일/색상)을 한 번에 지정
• 방향별(border-top 등)로 한 면만 적용 가능

기본 형식:

• border: <border-width> <border-style> <color>;
• border-방향: <border-width> <border-style> <color>;
• (분리) border-width: <크기>; border-style: <값>; border-color: <색>;

예시(코드):

• h1 { border: 1px solid #f00; }
• h2 { border-bottom: 2px dotted black; }

2-3-3) border-width(테두리 굵기)

역할: 테두리 두께 지정

기본 형식:

• border-width: <크기>;

예시(코드):

• .box { border-width: 2px; }

2-3-4) border-style(테두리 모양)

역할: 테두리 선의 형태 지정

기본 형식:

• border-style: <값>;

border-style 값(표)

• 속성값 설명
• none 테두리를 그리지 않음
• hidden 테두리를 화면에서 감춤
• solid 테두리를 실선으로 그림
• double 테두리를 이중 실선으로 그림
• dotted 테두리를 점선으로 그림
• dashed dotted보다 긴 점선으로 그림
• groove 테두리가 파인 것처럼 그림
• ridge 테두리가 튀어나온 것처럼 그림
• inset 테두리를 요소가 파인 것처럼 그림
• outset 테두리를 요소가 튀어나온 것처럼 그림

예시(코드):

• /* 실선 테두리 */ .box1 { border: 2px solid #333; }
• /* 점선 테두리 */ .box2 { border: 2px dotted #333; }

2-3-5) padding(안쪽 여백)

역할: border 안쪽, content 바깥쪽 여백

핵심 포인트:

• padding을 주면 “내용과 테두리 사이”가 벌어져 가독성이 좋아짐
• 축약 문법(1~4개 값) 동일하게 적용

기본 형식:

• padding: <크기>;
• padding: <상하> <좌우>;
• padding: <상> <우> <하> <좌>;
• padding-top/right/bottom/left: <크기>;

예시(코드):

• .card { padding: 10px 20px; }

2-3-6) content 영역 + width/height

역할: 실제 콘텐츠 영역 크기 지정

핵심 포인트:

• 기본(box-sizing: content-box)에서는 width/height가 content 기준
• padding/border가 추가되면 “보이는 최종 크기”가 커질 수 있음

기본 형식:

• width: <크기>;
• height: <크기>;

예시(코드):

• div { width: 100px; height: 100px; }

2-4) 요소의 최종 크기 계산 + box-sizing(실무 체감 포인트)

기본 계산(content-box 기준)

역할: 개발자도구에서 보이는 “최종 렌더링 크기”를 이해

핵심 포인트:

• 최종 크기(보이는 박스)는 보통 padding/border가 더해진 값
• 기본 형식(개념식)
  • 최종 너비 = width + padding-left + padding-right + border-left + border-right
  • 최종 높이 = height + padding-top + padding-bottom + border-top + border-bottom

box-sizing 속성

역할: width/height의 기준 영역을 바꿔 계산 스트레스를 줄임

핵심 포인트:

• border-box를 쓰면 지정한 width/height 안에 padding/border가 포함되어 “최종 크기 관리”가 쉬워 짐

기본 형식:

• box-sizing: content-box | border-box;

예시(코드):

• div { width: 100px; height: 100px; padding: 10px; border: 1px solid black; box-sizing: border-box; }

2-5) display 속성: block / inline / inline-block

역할: 요소의 배치 성격(줄바꿈 여부, 크기 지정 가능 여부)을 결정

• 핵심 포인트(교재 흐름)
• block: 한 줄 전체 차지 → 다음 요소는 줄바꿈
• inline: 내용만큼만 차지 → width/height 적용에 제약
• inline-block: inline처럼 옆으로 배치되지만 block처럼 width/height 적용 가능

block

기본 형식:

• display: block;

예시(코드):

• img { display: block; }

inline

기본 형식:

• display: inline;

예시(코드):

• h1, h2 { display: inline; }

inline-block

기본 형식:

• display: inline-block;

예시(코드):

• a { display: inline-block; }

2-6) 배경(background) 속성 묶음: 색/이미지/반복/크기/위치/스크롤

background-color

역할: 요소 배경색 지정

핵심 포인트: 배경색은 padding/content 영역에도 보임(박스 모델과 연결)

기본 형식:

• background-color: <색상값>;

예시(코드):

• div { background-color: red; }

background-image

역할: 요소 배경에 이미지를 삽입

• 핵심 포인트(교재 강조)
• 요소에 크기(width/height)가 없으면 배경이 “보이지 않을 수 있음”

기본 형식:

• background-image: url(‘이미지 경로’);

예시(코드):

• div { width: 160px; height: 120px; background-image: url(‘images/coffee.jpg’); }

background-repeat

역할: 배경 이미지 반복 방식 지정

기본 형식:

• background-repeat: <속성값>;

값 정리(교재 표 흐름)

• 속성값 설명
• no-repeat 이미지를 반복하지 않음
• repeat-x 이미지를 가로 방향으로 반복
• repeat-y 이미지를 세로 방향으로 반복
• repeat 이미지를 가로/세로 모두 반복
• round 반복하되 요소에 딱 맞도록 크기를 자동 조절
• space 이미지가 잘리지 않도록 간격을 두고 반복

예시(코드):

• div { background-repeat: no-repeat; }

background-size

역할: 배경 이미지의 크기 조정

핵심 포인트:

• cover와 contain은 “비율 유지”가 핵심 차이점
• cover: 채우는 우선(잘릴 수 있음) / contain: 보이는 것이 우선(여백 가능)

기본 형식:

• background-size: auto | cover | contain | <너비> <높이>;

값 정리(교재 표 흐름)

• 속성값 설명
• auto 이미지 크기 유지
• cover 비율 유지 + 요소 배경을 꽉 채우도록 확대/축소(일부 잘림 가능)
• contain 비율 유지 + 요소 안에 이미지가 모두 보이도록 확대/축소(여백 가능)
• <너비> <높이> 이미지 크기를 직접 지정

예시(코드):

• div { background-size: cover; }

background-position

역할: 배경 이미지의 위치 지정

핵심 포인트:

• 값 1개면 x축 기준으로 적용되고 y축은 기본 center

기본 형식:

• background-position: <x> <y>;
• background-position: <x>;

표

• 구분 속성값 설명
• x left / center / right 가로 위치
• y top / center / bottom 세로 위치
• 공통 px, rem, em, % 위치를 수치로 지정

예시(코드):

• div { background-position: right bottom; }

background-attachment

역할: 스크롤 시 배경 이미지의 고정/이동 방식을 결정

기본 형식:

• background-attachment: local | scroll | fixed;

표

• 속성값 설명
• local 삽입된 이미지가 요소와 웹 브라우저에서 모두 스크롤됨
• scroll 요소에서는 고정되지만 웹 브라우저에서는 스크롤됨
• fixed 요소와 웹 브라우저에서 모두 고정됨

예시(코드):

• div { background-attachment: fixed; }

background 단축 속성(한 번에 지정)

역할: background 관련 속성을 한 줄로 축약

핵심 포인트:

• position/size만 /로 구분해 작성해야 함(교재 포인트)

기본 형식:

• background: <color> <image> <repeat> <position>/<size> <attachment>;

예시(코드):

• div { background: red url(‘images/coffee.jpg’) no-repeat center/100% 100% fixed; }

이슈 로그

• width/height가 “content 영역 기준”이라는 점을 놓치면 개발자도구에서 크기가 다르게 보여 혼란이 생김 → box-sizing: border-box로 통일하는 패턴을 반복 적용해 익숙해질 예정.

• background 단축 속성은 편하지만 읽기 난도가 올라가므로, 의미가 헷갈릴 땐 개별 속성으로 분리해서 작성하는 방식으로 정리.

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」