← 이전 주차
퀴즈 풀기 →
다음 주차 →

CSS 적용 위치와 우선순위

CSS를 작성하는 위치는 세 가지이며, 같은 속성이 충돌할 때 우선순위에 따라 적용됩니다.

우선순위 종류 작성 위치 예시
1위 (가장 강함) 인라인 CSS 태그 안 style 속성 <p style="color: yellow;">
2위 내부 CSS <head> 안 <style> 태그 <style> p { color: blue; } </style>
3위 (가장 약함) 외부 CSS 별도 .css 파일 연결 <link rel="stylesheet" href="style.css">
암기법: 인라인 > 내부 > 외부 — 코드에 가까울수록 우선순위가 높음

외부 CSS 사용법

CSS를 별도 파일로 분리하면 여러 HTML 파일에서 공유할 수 있습니다. 실무에서 가장 많이 사용하는 방식입니다.

연결 방법

HTML — <head> 안에 추가

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

CSS 파일 (./css/style.css)

@charset "utf-8";

p { color: red; }

@charset 선언

외부 CSS 파일 첫 줄에 @charset "utf-8";을 작성하면 한글 등 비ASCII 문자가 깨지지 않습니다.

link 태그 속성:
rel="stylesheet" — 연결 파일이 스타일시트임을 명시
href="경로" — CSS 파일 경로 (상대경로 사용 권장)

<div> vs <span>

두 태그 모두 의미 없이 그룹화하는 용도이지만, 블록과 인라인의 차이가 있습니다.

태그 종류 특징 주요 용도
<div> 블록 태그 가로 전체 차지, 줄바꿈 발생 여러 블록 요소를 묶어서 레이아웃 구성
<span> 인라인 태그 내용 너비만큼만 차지, 줄바꿈 없음 텍스트 일부에만 스타일 적용

div 사용 예

<div>
  <section>
    <h1>제목</h1>
    <p>본문</p>
  </section>
</div>

span 사용 예

<p>
  텍스트의
  <span style="color:red;">일부</span>
  입니다.
</p>

class 선택자 vs ID 선택자

구분 class id
CSS 문법 .클래스명 { } #아이디명 { }
HTML 속성 class="이름" id="이름"
재사용 여러 요소에 반복 사용 가능 페이지 내 단 하나만 사용 (유일)
목적 같은 종류 태그를 하나로 묶음 다른 태그와 구분하기 위해 사용

class 사용

<ul class="list-bar">
  <li>프랑스</li>
  <li>이탈리아</li>
</ul>

.list-bar li {
  display: inline;
  margin-right: 30px;
}

id 사용

<img id="spring" src="spring.jpg">
<img id="summer" src="summer.jpg">

#spring {
  border-radius: 50% 50% 0 50%;
}
#summer {
  border-radius: 50% 50% 50% 0;
}

자식 · 후손 선택자 복습

아래 구조를 기준으로 자식(직접)과 후손(깊이 무관)의 차이를 확인하세요.

<body>
  <div>
    <p>div 의 첫 번째 자식</p>       ← div의 직접 자식
    <span>div 의 두 번째 자식
      <p>span 의 자식 / div 의 후손</p>  ← div의 자손 (손자)
    </span>
  </div>
</body>
선택자 예시 적용 대상
자식 선택자 A > B div > p { color: green; } "div 의 첫 번째 자식" p만
자손 선택자 A B div p { background: #ff8; } div 안 모든 p — 손자 포함
자식 선택자 체이닝 header > h1 > a { } header의 자식 h1의 자식 a만
핵심: >은 바로 아래 한 단계만, 공백은 깊이에 상관없이 전부

실습: id 선택자 — 클로버 이미지

border-radius의 네 값을 방향별로 다르게 주면 사분면 모양 클로버를 만들 수 있습니다. 각 이미지에 고유한 id를 부여해 스타일을 지정합니다.

border-radius 4값 순서

border-radius: 좌상 우상 우하 좌하 — 시계방향 순서

HTML

<div class="clover">
  <img id="spring" src="spring.jpg">
  <img id="summer" src="summer.jpg">
  <img id="autumn" src="autumn.jpg">
  <img id="winter" src="winter.jpg">
</div>

CSS

.clover {
  display: flex;
  flex-wrap: wrap;
  width: 420px;
  margin: 20px auto;
}

.clover img {
  margin: 5px;
  width: 200px;
}

#spring { border-radius: 50% 50% 0 50%; }
#summer { border-radius: 50% 50% 50% 0; }
#autumn { border-radius: 50% 0  50% 50%; }
#winter { border-radius: 0  50% 50% 50%; }
id border-radius 값 직각 모서리 위치
#spring 50% 50% 0 50% 우하 (오른쪽 아래)
#summer 50% 50% 50% 0 좌하 (왼쪽 아래)
#autumn 50% 0 50% 50% 우상 (오른쪽 위)
#winter 0 50% 50% 50% 좌상 (왼쪽 위)

퀴즈로 복습하기

6주차 퀴즈 풀기 →