로그인 · 가입
KREN
← 홈페이지 5강 목록으로
🎨
EPISODE 01
선택자 · 우선순위 · 상속 · HEX/RGB/HSL · Google Fonts · CSS 변수 · content · padding · border · margin · box-sizing · background · border-radius · box-shadow · transition

CSS 기초 · 색상 & 폰트 · 박스 모델 · 배경 & 테두리

CSS를 HTML에 연결하는 3가지 방법, 선택자 종류, 우선순위(specificity), 상속 개념과 기본 텍스트 속성을 익힙니다. CSS의 다양한 색상 표기(HEX/RGB/RGBA/HSL), 폰트 속성과 Google Fonts 연결, CSS 변수(:root)로 디자인 시스템을 구축하는 법을 익힙니다. CSS의 모든 요소가 박스 형태로 렌더링되는 원리(content/padding/border/margin), box-sizing의 차이, display 속성과 margin 겹침 현상을 익힙니다. background-color/image/gradient, border와 border-radius, box-shadow와 그림자, opacity·cursor, 부드러운 전환을 위한 transition을 익혀 버튼·카드 UI를 만듭니다.

CSS선택자우선순위상속colorfontCSS 변수box modelpaddingmarginbackgroundshadowtransition
소요 시간
⏱ 30~60분 + 30~60분 + 30~60분 + 30~60분
난이도
📊 초보
선수 조건
🎯 html-06
결과물
외부 CSS 파일을 연결하고 다양한 선택자로 스타일 적용 / 브랜드 색상 팔레트와 한국어 웹폰트가 적용된 페이지 / 정확한 크기 계산으로 깔끔하게 정렬된 카드 컴포넌트 / 그림자·라운드·hover 전환 효과가 적용된 버튼·카드

이 강의에서 배우는 것

  • 1인라인/내부/외부 3가지 CSS 적용 방식의 장단점을 설명한다
  • 2태그·클래스·ID·자손·자식·형제·가상 클래스 선택자를 사용한다
  • 3우선순위 점수(인라인 1000, ID 100, 클래스 10, 태그 1)를 이해한다
  • 4상속되는 속성과 그렇지 않은 속성을 구분한다
  • 5색상 이름·HEX·RGB·RGBA·HSL을 상황에 맞게 사용한다
  • 6Google Fonts로 한국어 웹폰트(Noto Sans KR)를 적용한다
  • 7font-family/size/weight/line-height/letter-spacing을 자유롭게 다룬다
  • 8:root와 var()로 디자인 토큰을 한 곳에서 관리한다
  • 9박스 모델 4단계(content/padding/border/margin)를 구별한다
  • 10box-sizing: border-box를 적용해 크기 계산을 단순화한다
  • 11width/max-width/min-height의 차이를 안다
  • 12overflow와 display 속성을 적절히 사용한다
  • 13margin 겹침 현상의 원인과 해결을 안다
  • 14배경 이미지의 size·position·repeat을 자유롭게 다룬다
  • 15linear-gradient / radial-gradient로 그라데이션을 적용한다
  • 16border와 border-radius로 둥근 모서리·원을 만든다
  • 17box-shadow로 깊이 있는 카드를 표현한다
  • 18transition으로 hover 효과를 부드럽게 만든다

CSS 기초

CSS를 HTML에 연결하는 3가지 방법, 선택자 종류, 우선순위(specificity), 상속 개념과 기본 텍스트 속성을 익힙니다.

1. CSS 연결 방법

1-1. 인라인 (비추천)

html
<p style="color: red; font-size: 18px;">인라인 스타일</p>

1-2. 내부 스타일

html
<head>
  <style>
    p { color: blue; }
  </style>
</head>

1-3. 외부 스타일 (실무 표준)

html
<head>
  <link rel="stylesheet" href="style.css">
</head>

여러 HTML 파일에서 동일한 CSS를 재사용. 유지보수가 가장 쉬워 실무에서 표준입니다.

2. 선택자

종류예시설명
태그p { }모든 <p> 선택
클래스.card { }class="card" 요소
ID#header { }id="header" 요소
자손div p { }div 안의 모든 p
자식ul > li { }ul의 직계 자식 li
형제h1 + p { }h1 바로 다음 p
전체* { }모든 요소

가상 클래스

css
a:hover         { color: red; }
a:visited       { color: purple; }
li:first-child  { color: blue; }
li:last-child   { color: green; }
li:nth-child(2) { color: orange; }

3. 우선순위 (Specificity)

text
인라인 > ID > 클래스 > 태그
선택자점수
인라인 (style="")1000
ID (#id)100
클래스 (.class), 가상 클래스 (:hover)10
태그 (p, div)1
css
/* 같은 <p id="title" class="text">에 모두 적용될 때 */
p           { color: black; }   /* 1점 */
.text       { color: blue; }    /* 10점 */
#title      { color: red; }     /* 100점 → 적용됨 */
⚠️

!important는 모든 우선순위를 무시하지만 남용하면 유지보수가 어려워집니다.

4. 상속

css
body {
  font-family: 'Arial', sans-serif;  /* 모든 자식에게 상속 */
  color: #333;
}
  • 상속됨: color, font-family, font-size, line-height, text-align …
  • 상속 안 됨: margin, padding, border, background, width …

5. 기본 텍스트 속성

css
p {
  color: #333333;
  font-size: 16px;
  font-weight: bold;       /* normal, bold, 100~900 */
  text-align: center;      /* left, center, right, justify */
  text-decoration: none;   /* 링크 밑줄 제거 */
  line-height: 1.6;
}

색상 & 폰트

CSS의 다양한 색상 표기(HEX/RGB/RGBA/HSL), 폰트 속성과 Google Fonts 연결, CSS 변수(:root)로 디자인 시스템을 구축하는 법을 익힙니다.

1. 색상 표현법

색상 이름

css
color: red;
color: blue;
color: tomato;
color: cornflowerblue;

직관적이지만 종류가 제한적. 실무에서 거의 사용하지 않음.

HEX

css
color: #ff0000;
color: #333333;
color: #fff;       /* 단축형 */

#RRGGBB. 실무에서 가장 많이 사용.

RGB / RGBA

css
color: rgb(255, 0, 0);
color: rgba(0, 0, 0, 0.5);     /* 투명도 0~1 */
background-color: rgba(52, 152, 219, 0.2);

HSL

css
color: hsl(0, 100%, 50%);    /* 빨강 */
color: hsl(210, 50%, 50%);   /* 파랑 계열 */

hsl(색조, 채도, 명도). 색상 조정이 직관적이라 디자이너가 선호.

2. Google Fonts

html
<!-- HTML <head>에 추가 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
      rel="stylesheet">
css
body {
  font-family: 'Noto Sans KR', sans-serif;
}
💡

Noto Sans KR은 한국어 웹폰트로 가장 널리 사용됩니다.

3. 폰트 속성

css
p {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 400;           /* normal=400, bold=700 */
  font-style: italic;
  line-height: 1.6;           /* 단위 없는 배수 권장 */
  letter-spacing: 0.5px;
  word-spacing: 2px;
}

4. 텍스트 꾸미기

css
p {
  text-decoration: underline;    /* line-through, none */
  text-transform: uppercase;     /* lowercase, capitalize */
  text-align: left;              /* center, right, justify */
}

5. CSS 변수 (Custom Properties)

css
:root {
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-background: #f5f5f5;
  --font-size-base: 16px;
}

h1 {
  color: var(--color-primary);
  font-size: var(--font-size-base);
}

button {
  background-color: var(--color-secondary);
}
  • 색상을 한 곳에서 관리 → 변경이 쉬워짐
  • 브랜드 컬러·디자인 토큰을 체계적으로 관리

박스 모델

CSS의 모든 요소가 박스 형태로 렌더링되는 원리(content/padding/border/margin), box-sizing의 차이, display 속성과 margin 겹침 현상을 익힙니다.

1. 박스 모델 4단계

text
┌─────────────────────────────────┐
│         margin (바깥 여백)        │
│  ┌───────────────────────────┐  │
│  │      border (테두리)        │  │
│  │  ┌─────────────────────┐  │  │
│  │  │   padding (안쪽 여백)  │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │  content (내용)  │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘
css
div {
  width: 200px;
  height: 100px;
  padding: 10px 20px;     /* 상하 10, 좌우 20 */
  border: 2px solid #333;
  border-radius: 8px;
  margin: 20px auto;      /* 상하 20, 좌우 auto(중앙) */
}

2. box-sizing

css
/* content-box (기본): width = content만 */
.default {
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* 실제 크기 = 200 + 40 + 4 = 244px */
}

/* border-box: width = content + padding + border */
.better {
  width: 200px;
  padding: 20px;
  border: 2px solid;
  box-sizing: border-box;
  /* 실제 크기 = 항상 200px */
}
💡

실무에서는 * { box-sizing: border-box; }로 전체에 적용하는 게 표준입니다.

3. width / max-width

css
.container {
  width: 100%;
  max-width: 1200px;     /* 반응형 필수 */
  height: auto;
  min-height: 100vh;
}

4. overflow

css
.box {
  overflow: visible;  /* 기본: 밖으로 튀어나옴 */
  overflow: hidden;   /* 잘라냄 */
  overflow: scroll;   /* 항상 스크롤바 */
  overflow: auto;     /* 필요할 때만 (권장) */
}

5. display

css
display: block;         /* div, p, h1~h6 기본 */
display: inline;        /* span, a, strong 기본 */
display: inline-block;  /* img, button 기본 */
display: none;          /* 화면에서 완전히 제거 */

6. margin 겹침 현상

css
.first  { margin-bottom: 30px; }
.second { margin-top: 20px; }
/* 실제 간격: 30px (50px가 아님!) */

세로 방향 인접 두 요소의 margin은 더해지지 않고 큰 쪽만 적용됩니다. padding 사용 / 부모에 overflow:hidden / Flexbox·Grid 사용 등으로 회피.

배경 & 테두리

background-color/image/gradient, border와 border-radius, box-shadow와 그림자, opacity·cursor, 부드러운 전환을 위한 transition을 익혀 버튼·카드 UI를 만듭니다.

1. 배경

배경색

css
.box {
  background-color: #3498db;
  background-color: rgba(52, 152, 219, 0.5);
}

배경 이미지

css
.hero {
  background-image: url('image.jpg');
  background-size: cover;       /* 꽉 채움 */
  background-size: contain;     /* 전체 보임 */
  background-position: center;
  background-repeat: no-repeat;
}

그라데이션

css
.gradient {
  background: linear-gradient(to right, #667eea, #764ba2);
  background: linear-gradient(135deg, #f093fb, #f5576c);
  background: radial-gradient(circle, #f093fb, #f5576c);
}

단축 속성

css
background: url('image.jpg') center/cover no-repeat;

2. 테두리

css
.box {
  border: 2px solid #333;          /* 두께 스타일 색상 */
  border-style: solid;             /* dashed, dotted, double */
  border-top: 3px dashed red;
  border-radius: 8px;              /* 네 모서리 동일 */
  border-radius: 50%;              /* 원 (정사각형 일 때) */
  border-radius: 10px 0 10px 0;    /* 모서리별 */
}

3. 그림자 (box-shadow)

css
.card {
  /* offset-x | offset-y | blur | color */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);

  /* spread 추가 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* 안쪽 그림자 */
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);

  /* 여러 그림자 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
}

4. outline

border와 달리 요소 크기에 영향을 주지 않습니다. 주로 포커스 표시(접근성)에 활용.

css
button:focus {
  outline: 3px solid #3498db;
  outline-offset: 2px;
}

5. opacity & cursor

css
.dim       { opacity: 0.5; }
.clickable { cursor: pointer; }       /* not-allowed, crosshair */

6. transition

css
.button {
  background-color: #3498db;
  /* property | duration | timing-function | delay */
  transition: background-color 0.3s ease;
  transition: all 0.3s ease;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease;
}

.button:hover {
  background-color: #2980b9;
}
  • ease — 천천히 시작/끝 (기본)
  • linear — 일정 속도
  • ease-in / ease-out / ease-in-out
예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗

댓글 0

아직 댓글이 없습니다. 첫 댓글을 남겨 주세요.

댓글은 회원만 쓸 수 있습니다.

광고·욕설·비방·개인정보·불법 내용이 담긴 댓글은 숨기거나 지웁니다. 댓글은 닉네임과 함께 공개됩니다. 개인정보처리방침