15일차 - CSS

은채의 성장통·2025년 6월 18일

CSS

KCC정보통신

목록 보기

20/30

노션정리

✅ 전역 선택자

개념: 문서 내의 모든 요소에 스타일을 적용합니다. 전체 초기화나 공통 스타일 지정에 자주 사용됩니다.

언제 사용?

→ 기본 여백 제거, 전체 폰트 적용 등 브라우저 스타일 초기화가 필요할 때

예시:

* {
  margin: 0;
  padding: 0;
  font-family: '굴림체';
}

✅ 태그 선택자 `태그명`

개념: 특정 HTML 태그 하나에만 스타일을 적용할 때 사용합니다.

언제 사용?

→ 전체 <p>, <h1>, <ul> 등 기본 태그에 일괄 스타일을 주고 싶을 때

예시:

p {
  font-size: 16px;
  line-height: 1.5;
}

✅ 다중(그룹) 선택자 `선택자1, 선택자2`

개념: 여러 개의 선택자에 한 번에 동일한 스타일을 적용합니다.

언제 사용?

→ 제목 계열에 같은 스타일을 줄 때나 버튼, 링크 등 스타일이 겹치는 요소에 사용

예시:

h1, h2, h3 {
  color: blue;
}

✅ 자식 선택자 `부모 > 자식`

개념: 부모 요소의 직계 자식에게만 스타일이 적용됩니다.

언제 사용?

→ 특정 구조 안에서 불필요한 중첩까지 스타일이 적용되는 걸 방지하고 싶을 때

예시:

div > p {
  color: green;
}

※ <div> 바로 아래에 있는 <p>만 적용됨. <div> 안의 <section> 안의 <p>는 적용되지 않아요.

✅ 내포 선택자 `조상 후손`

개념: 어떤 요소 안의 모든 자손 요소에 스타일을 적용합니다.

언제 사용?

→ 특정 영역 내부에 포함된 모든 특정 요소들에 스타일을 적용할 때

예시:

article strong {
  color: red;
}

※ <article> 안에 있는 모든 <strong>이 대상입니다.

✅ 인접 형제 선택자 `A + B`

개념: A 요소 바로 다음에 등장하는 B 요소 하나만 선택합니다.

언제 사용?

→ 헤딩 바로 뒤에 오는 특정 요소에만 스타일을 적용하고 싶을 때

예시:

h2 + p {
  color: orange;
}

✅ 일반 형제 선택자 `A ~ B`

개념: A 뒤에 나오는 형제 요소 중 모든 B 요소에 스타일이 적용됩니다.

언제 사용?

→ 특정 요소 이후에 등장하는 형제 요소들에 반복적으로 스타일을 적용할 때

예시:

h2 ~ p {
  font-style: italic;
}

✅ 클래스 선택자 `.class`

개념: class 속성을 통해 정의된 스타일을 재사용 가능하게 적용합니다. 같은 요소에 서로 다른 스타일을 줄 때 유리합니다.

언제 사용?

→ 다른 성격의 스타일을 요소별로 조합하고 싶을 때, 다양한 태그에서 공통 스타일을 쓸 때

예시 1 – 특정 태그와 클래스 조합:

p.right {
  text-align: right;
}
p.center {
  text-align: center;
}

<p class="right">이 문단은 오른쪽 정렬됩니다.</p>
<p class="center">이 문단은 가운데 정렬됩니다.</p>

예시 2 – 클래스만 정의 (태그 없이):

.center {
  text-align: center;
}
.bold {
  font-weight: bold;
}

<h1 class="center">이 제목은 가운데 정렬됩니다.</h1>
<p class="center bold">이 문단은 가운데 정렬되고 굵게 표시됩니다.</p>

✅ 아이디 선택자 `#id`

개념: id 선택자는 HTML 요소에 고유한 식별자를 부여하고, 해당 ID 값에 스타일을 적용할 때 사용합니다. 선택자 앞에 #을 붙여 선언합니다.

언제 사용하나요?

→ 문서 내에 단 하나뿐인 특정 요소에만 스타일을 적용하고자 할 때 사용합니다.

예를 들어: 특정 섹션이나 특정 문단, 버튼 하나에만 스타일을 줄 때 아주 유용해요.

⚠️ 주의: 하나의 HTML 문서 내에서 같은 id 값은 한 번만 사용되어야 합니다.

여러 요소에 같은 스타일을 적용하려면 class 선택자를 써야 해요.

예시 1 – id 속성이 "blue"인 요소에 스타일 적용

#blue {
  color: blue;
}

<p id="blue">이 문장은 파란색입니다.</p>

예시 2 – 특정 태그와 id를 조합한 선택자

p#para1 {
  text-align: center;
  color: red;
}

<p id="para1">이 문단은 빨간색이고 가운데 정렬됩니다.</p>

예시 3 – HTML5에서 id와 class 속성 함께 사용

<section id="sports">
  <article class="baseball">야구 기사</article>
  <article class="football">축구 기사</article>
</section>

위 예시에서는 id="sports"를 가진 섹션을 고유하게 식별하고, 내부의 class="baseball"이나 class="football"로 각 기사에 스타일을 따로 줄 수 있어요.

속성선택자(자주씀)

✅ 기본 속성 선택자 `[속성="값"]`

개념: 특정 속성과 그 값이 정확히 일치하는 요소를 선택합니다.

언제 사용하나요?

→ 예를 들어 <input> 태그 중에서 type="text"인 경우에만 스타일을 적용하고 싶을 때

예시:

input[type="text"] {
  background-color: lightblue;
}

<input type="text">
<input type="password">

→ 첫 번째만 배경이 파란색으로 설정됩니다.

✅ `[속성~="값"]` 공백 단어 포함 선택자

개념: 속성값이 공백으로 분리된 여러 단어로 이루어져 있을 때, 그 중 하나가 값과 일치하면 선택됩니다.

언제 사용하나요?

→ 예: class="btn big"처럼 여러 class가 적용되어 있을 때 특정 값이 포함되었는지 확인할 때

예시:

div[class~="big"] {
  font-size: 24px;
}

<div class="btn big">크게 보임</div>
<div class="btn">기본 크기</div>

✅ `[속성|="값"]` 하이픈(-) 포함 접두사 선택자

개념: 속성값이 지정된 값과 같거나, 값-다른문자열로 시작하면 적용됩니다.

언제 사용하나요?

→ 보통 언어 설정값처럼 lang="ko" 또는 lang="ko-KR" 등에서 사용

예시:

p[lang|="ko"] {
  font-family: "굴림체";
}

<p lang="ko">한국어 문장입니다</p>
<p lang="ko-KR">이것도 포함됩니다</p>
<p lang="en">영문은 제외됩니다</p>

✅ `[속성^="값"]` 시작문자 일치 선택자

개념: 속성값이 지정된 문자로 시작하면 선택됩니다.

언제 사용하나요?

→ 예: 이미지 경로가 특정 디렉토리에서 시작할 때

예시:

img[src^="<https://cdn.example.com/>"] {
  border: 2px solid green;
}

✅ `[속성$="값"]` 끝문자 일치 선택자

개념: 속성값이 지정된 문자로 끝날 때 선택됩니다.

언제 사용하나요?

→ 파일 형식 필터링 (예: .jpg, .pdf 등)

예시:

a[href$=".pdf"] {
  color: red;
  font-weight: bold;
}

<a href="report.pdf">PDF 파일</a>
<a href="photo.jpg">이미지 파일</a>

✅ `[속성*="값"]` 포함 문자 일치 선택자

개념: 속성값 어디든 해당 문자열이 포함되면 선택됩니다.

언제 사용하나요?

→ 넓은 범위로 문자열을 검색할 때

예시:

a[href*="download"] {
  background-color: yellow;
}

<a href="/files/download/report.zip">다운로드 링크</a>
<a href="/info/upload.html">업로드 링크</a>

✅ 가상 클래스 선택자 `:pseudo-class`

개념: 가상 클래스(Pseudo-class) 선택자는 요소의 상태나 사용자의 상호작용에 따라 동적으로 스타일을 적용하는 선택자입니다. 일반 선택자로는 지정할 수 없는 "상태"에 따라 요소를 선택할 수 있죠. : 기호로 시작합니다.

언제 사용하나요?

→ 마우스를 요소 위에 올렸을 때, 링크를 클릭했을 때, 특정 순서나 조건에 해당할 때 등

→ 동적인 반응이나 특정 조건을 기반으로 한 스타일링이 필요할 때 유용합니다.

🎯 주요 가상 클래스 선택자 예시

`:link`

개념: 아직 방문하지 않은 링크에 스타일을 적용합니다.

예시:

a:link {
  color: blue;
}

<a href="<https://example.com>">이 링크는 방문 전입니다</a>

`:visited`

개념: 사용자가 이미 방문한 링크에 스타일을 적용합니다.

예시:

a:visited {
  color: purple;
}

`:hover`

개념: 마우스가 요소 위에 올라갔을 때 스타일을 적용합니다.

예시:

a:hover {
  text-decoration: underline;
}

💡 반드시 a:link와 a:visited 뒤에 선언해야 정상 작동합니다.

`:active`

개념: 링크나 버튼을 누르고 있는 순간에 적용됩니다.

예시:

a:active {
  color: red;
}

💡 반드시 a:hover 뒤에 선언해야 우선순위에서 밀리지 않아요.

💡 전체 흐름 순서 정리

a:link    { color: blue; }
a:visited { color: purple; }
a:hover   { text-decoration: underline; }
a:active  { color: red; }

이 순서는 기억하기 쉽게 LoVe → HAte 라고도 외워요: :link, :visited, :hover, :active

코드분석

1번코드

✅ 전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>가상클래스 선택자</title>
  <style type="text/css">
    div:hover {
      background-color: red;
    }
    div:active {
      background-color: blue;
    }
    input:focus {
      background-color: purple;
    }
    input:disabled {
      background-color: cyan;
    }
  </style>
</head>
<body>
  <div>여기에 마우스를 올리면 색이 변함</div>
  <form>
    아이디: <input type="text" name="userid"><br>
    비번: <input type="text" name="userpw" disabled>
    성별:
    <input type="radio" name="sex" value="M">남자
    <label><input type="radio" name="sex" value="F">여자<br></label>
    <input type="submit">
  </form>
</body>
</html>

🧠 선택자별 분석과 적용 위치

1. `div:hover`

선택자 종류: 태그 선택자 + 가상 클래스 선택자
적용 대상: <div>
동작: 마우스를 올리면 배경색이 빨간색으로 바뀜

2. `div:active`

선택자 종류: 태그 선택자 + 가상 클래스 선택자
적용 대상: <div>
동작: 마우스를 클릭하고 있는 동안 배경색이 파란색으로 바뀜

3. `input:focus`

선택자 종류: 태그 선택자 + 가상 클래스 선택자
적용 대상: <input type="text" name="userid">
동작: 사용자가 클릭해서 입력 커서가 들어가면 배경색이 보라색으로 바뀜

disabled된 비밀번호 입력칸은 포커스를 받을 수 없기 때문에 적용되지 않음

4. `input:disabled`

선택자 종류: 태그 선택자 + 가상 클래스 선택자
적용 대상: <input type="text" name="userpw" disabled>
동작: 해당 input은 비활성 상태이므로 배경색이 시안(Cyan)색으로 바뀜

✍️ 태그별로 어떤 선택자가 작용하는지 요약

HTML 태그	작용하는 CSS 선택자들
`<div>`	`div:hover`, `div:active`
`<input type="text" name="userid">`	`input:focus` (클릭 시 보라색)
`<input type="text" name="userpw" disabled>`	`input:disabled` (비활성 시 시안색)
`<input type="radio" ...>`	선택자 없음 (사용자 상호작용만 가능)
`<input type="submit">`	선택자 없음 (기본 스타일 적용됨)

2번 코드

1. 첫 번째 표 분석

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td bgcolor="black">
      <table cellspacing="1" border="0" width="300">
        <tr>
          <td bgcolor="white">하나</td>
          <td bgcolor="white">둘</td>
        </tr>
        <tr bgcolor="white">
          <td>셋</td>
          <td>넷</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table> 태그를 중첩 사용하여 외부 테두리 효과를 흉내낸 구조입니다.
바깥쪽 테이블: border=0, cellspacing=0, cellpadding=0
- 테두리와 셀 간격이 없음
내부 테이블: cellspacing=1
- 셀 사이에 1px 간격을 두어서 흰색 셀 경계가 검정색 배경 위에 분리되어 보이게 만듦
이 방식은 border-collapse 속성을 사용하지 않고 테두리를 연출하던 구식 표현 방식입니다.

2. 두 번째 표 분석

<table border="1" cellspacing="0">
  <tr>
    <td>대한민국</td>
    <td>만세</td>
  </tr>
</table>

border="1": 각 셀과 테이블에 기본 테두리 생성
cellspacing="0": 셀 사이 간격 없음
하지만 기본적으로 border-collapse는 separate 상태이기 때문에 셀 사이 경계선이 이중 테두리처럼 보일 수 있음

3. 세 번째 표 분석

<table style="border-collapse: collapse;" border="1" cellspacing="0" width="300">
  <tr>
    <td>대한미국</td>
    <td>만세</td>
  </tr>
</table>

border-collapse: collapse:
- 셀 경계선이 하나의 실선으로 합쳐져서 보이는 효과 제공
- 이중선이 없어지고 테두리 표현이 더 깔끔하게 정리됨
현대적인 HTML에서 표의 테두리를 표현할 때 가장 추천되는 방식입니다
cellspacing="0" 역시 중복된 간격을 없애기 위한 처리

결론 정리

표 번호	주요 속성	설명
첫 번째	`cellspacing=1`, 내부 테이블 중첩	구식 방식. 테두리를 테이블 중첩과 색상으로 흉내냄
두 번째	`border=1`, `cellspacing=0`	이중 테두리 가능성. 기본적인 테두리 생성
세 번째	`border=1`, `border-collapse: collapse`	현대적인 테이블 테두리 표현 방식. 테두리가 겹치지 않음

3번쨰 코드

✅ 사용된 CSS 선택자

1. p.font1

→ <p class="font1"> 요소에 적용
```
p.font1 {
  font-family: sans-serif;
  font-size: 20px;
  font-style: italic;
  font-variant: small-caps;
  font-weight: 900;
}
```
속성별 설명:
- font-family: sans-serif; → 획이 없는 고딕 계열 글꼴 사용 (예: Arial, Helvetica 등)
- font-size: 20px; → 글자 크기를 20픽셀로 설정
- font-style: italic; → 이탤릭체 적용
- font-variant: small-caps; → 영문자일 경우 소문자를 소문자 모양의 대문자처럼 표시
- font-weight: 900; → 아주 굵은 볼드체로 설정
2. p.font2

→ <p class="font2"> 요소에 적용
```
p.font2 {
  font: italic small-caps 900 15px arial;
}
```
속성 설명:
- 이 스타일은 font 속성의 축약형입니다.
- 순서대로 다음 속성들을 한 줄로 요약하고 있어요:
  - font-style: italic;
  - font-variant: small-caps;
  - font-weight: 900;
  - font-size: 15px;
  - font-family: arial;
→ 따라서 font1에서 사용한 긴 스타일 정의를 font 하나로 압축한 것이에요.

🔍 비교 요약

구분 font1 font2
정의 방식 속성별로 하나씩 나열 font 속성으로 일괄 설정
글꼴 크기 20px 15px
글꼴 종류 sans-serif arial
공통점 이탤릭, small-caps, weight 900 동일

구분	font1	font2
정의 방식	속성별로 하나씩 나열	`font` 속성으로 일괄 설정
글꼴 크기	20px	15px
글꼴 종류	sans-serif	arial
공통점	이탤릭, small-caps, weight 900	동일

은채의 성장통

인생 별거 없어

이전 포스트

15일차 - HTML

다음 포스트

15일차 - CSS

KCC정보통신

✅ 전역 선택자

✅ 태그 선택자 태그명

✅ 다중(그룹) 선택자 선택자1, 선택자2

✅ 자식 선택자 부모 > 자식

✅ 내포 선택자 조상 후손

✅ 인접 형제 선택자 A + B

✅ 일반 형제 선택자 A ~ B

✅ 클래스 선택자 .class

✅ 아이디 선택자 #id

속성선택자(자주씀)

✅ 기본 속성 선택자 [속성="값"]

✅ [속성~="값"] 공백 단어 포함 선택자

✅ [속성|="값"] 하이픈(-) 포함 접두사 선택자

✅ [속성^="값"] 시작문자 일치 선택자

✅ [속성$="값"] 끝문자 일치 선택자

✅ [속성*="값"] 포함 문자 일치 선택자

✅ 가상 클래스 선택자 :pseudo-class

🎯 주요 가상 클래스 선택자 예시

:link

:visited

:hover

:active

💡 전체 흐름 순서 정리

코드분석

✅ 전체 코드

🧠 선택자별 분석과 적용 위치

1. div:hover

2. div:active

3. input:focus

4. input:disabled

✍️ 태그별로 어떤 선택자가 작용하는지 요약

1. 첫 번째 표 분석

2. 두 번째 표 분석

3. 세 번째 표 분석

결론 정리

✅ 사용된 CSS 선택자

1. p.font1

2. p.font2

🔍 비교 요약

15일차 - HTML

16일차 - CSS

0개의 댓글

✅ 태그 선택자 `태그명`

✅ 다중(그룹) 선택자 `선택자1, 선택자2`

✅ 자식 선택자 `부모 > 자식`

✅ 내포 선택자 `조상 후손`

✅ 인접 형제 선택자 `A + B`

✅ 일반 형제 선택자 `A ~ B`

✅ 클래스 선택자 `.class`

✅ 아이디 선택자 `#id`

✅ 기본 속성 선택자 `[속성="값"]`

✅ `[속성~="값"]` 공백 단어 포함 선택자

✅ `[속성|="값"]` 하이픈(-) 포함 접두사 선택자

✅ `[속성^="값"]` 시작문자 일치 선택자

✅ `[속성$="값"]` 끝문자 일치 선택자

✅ `[속성*="값"]` 포함 문자 일치 선택자

✅ 가상 클래스 선택자 `:pseudo-class`

`:link`

`:visited`

`:hover`

`:active`

1. `div:hover`

2. `div:active`

3. `input:focus`

4. `input:disabled`

1. `p.font1`

2. `p.font2`