CSS 소개
CSS 소개
CSS 소개은(는) CoddyKit의 무료 HTML for Kids 강의입니다. 이것은 1개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML for Kids 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML for Kids 강의에는 총 1개의 강의가 포함되어 있습니다.
소개 1
안녕하세요.
이전 장에서 CSS가 무엇이며 왜 사용해야 하는지 배웠습니다. 이제 간단한 예제로 빠르게 소개해 보겠습니다.
간단한 HTML 페이지를 정의해 보겠습니다.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>인라인 스타일
이제 Hello CSS 제목의 색상을 빨간색으로 바꿔 보겠습니다. 이를 위해 거의 모든 HTML 태그에 추가할 수 있는 style 특성을 사용합니다.
이 특성을 사용하면 각 요소에 스타일을 인라인으로 정의할 수 있습니다.
미리 보기 영역을 보면 제목의 색상이 빨간색으로 바뀐 것을 확인할 수 있습니다.
color: red;
스타일 정의를 사용해 요소의 글꼴 색상을 지정했습니다.
<h1 style="color:red;">Hello CSS</h1>인라인 스타일 2
HTML에서 태그에 동작과 특성을 지정하기 위해 특성을 사용한다고 배웠던 것을 기억하실 겁니다.
이러한 특성 중 스타일과 관련해 가장 중요한 것 중 하나는 style 특성을 사용해 태그의 스타일을 정의한다는 점입니다.
인라인 스타일 3
이제 새로운 스타일을 추가해 보겠습니다. font-size를 사용하면 텍스트 크기를 키울 수 있습니다.
여러 스타일을 정의할 때는 세미콜론으로 스타일을 구분해야 합니다.
아래 예제에서는 색상 스타일과 글꼴 크기 스타일이 세미콜론으로 구분되어 있습니다.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>스타일 정의
스타일을 추가할 때는 문법이 중요합니다.
styleName: styleValue;
위와 같이 스타일을 지정해야 한다는 점을 다시 기억해 주세요.
예제
이제 예제를 조금 더 확장해 보겠습니다.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>예제 2
이 예제에서는 모든 텍스트의 색상을 빨간색으로 바꾸려고 합니다. 각 태그에 다음과 같이 스타일을 정의할 수 있습니다.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>CSS 선택자
하지만 그렇게 하면 그다지 좋아 보이지 않겠죠?
현재 페이지에 요소가 3개 있으므로 각 요소의 텍스트 색상을 빨간색으로 바꿨습니다. 하지만 그 수가 3,000개로 늘어난다고 생각하면 각각에 스타일을 정의하는 것은 별 의미가 없습니다.
대신 각 요소를 인라인으로 정의하지 말고 CSS 선택자를 사용해야 합니다.
소개 12
이제 선택자 개념을 배워 보겠습니다.
CSS 선택자는 HTML 요소에 스타일을 적용하기 위해 문서에 포함된 관련 HTML 요소를 선택하는 역할을 합니다.
따라서 이름에서 알 수 있듯이 HTML 요소를 선택합니다. 😂
CSS 선택자는 HTML 문서의 <style> 태그 사이 또는 외부 CSS 파일에 정의해야 합니다.
예제에서는 일반적으로 style 태그 사이에 작성하는 방식을 사용하겠습니다. 하지만 스타일은 외부 CSS 파일에 정의하는 것이 더 정확한 방법입니다.
소개 13
점 연산자와 클래스 이름을 사용하여 style 태그 사이에 클래스를 정의합니다. 스타일 정의는 중괄호 사이에 작성합니다.
.class-name {
font-size:22px;
color:red;
}
아래 예제에서는 style 태그 사이에 my-component라는 클래스를 정의했습니다. 그리고 해당 클래스에 글꼴 크기 스타일을 지정했습니다.
<style>
.my-component{
font-size:22px;
}
</style>
이제 단락 요소 2개를 정의해 보겠습니다
이제 my-component 클래스를 가진 단락 요소 2개를 정의해 보겠습니다.
이 정의를 적용하면 두 단락이 같은 클래스 이름을 가지므로 CSS 선택자가 두 단락을 모두 선택하고, 글꼴 크기가 22px로 업데이트됩니다.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>소개 6
선택자 하나에 여러 스타일을 지정할 수 있습니다.
아래 예제에서는 글꼴 크기와 색상 스타일이 같은 선택자에 정의되어 있습니다.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>CSS 선택자 중첩
아래 HTML 코드를 분석해 보겠습니다.
단락 요소를 정의하고, 'Hello CSS Selectors' 콘텐츠를 포함하는 span 요소를 이 요소에 추가했습니다.
이 경우 단락 요소가 span의 부모라고 할 수 있습니다.
반대로 span은 p 요소의 자식이기도 합니다.
생명체와 마찬가지로 코드 블록에서의 배치에 따라 HTML 요소를 부모-자식 관계로 사용하게 됩니다.
<p>
<span>Hello CSS Selectors</span>
</p>CSS 선택자 중첩 2
예제를 조금 더 확장하여 요소 사이의 계층 구조를 다시 분석해 보겠습니다.
- 아래 예제에 따르면
- <span> 요소와 <a> 요소는 서로 형제 요소입니다.
- <span> 요소와 <a> 요소는 div 요소의 자손입니다.
- <span> 과 <a>는 <p> 요소의 자식입니다.
- <p> 요소는 <div> 요소의 자식입니다.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>분석 트리 모델
위 이미지를 좀 더 자세히 살펴보겠습니다.
다음 HTML 코드 예제가 트리 모델로 변환되었습니다.
트리 모델은 실제로 부모-자식 계층 구조를 반영한 것이라는 점에 유의하세요.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
그렇다면 이 계층 관계는 언제 사용할까요?
그렇다면 이 계층 관계는 언제 사용할까요?
먼저 예제를 작성하고 문제를 제시해 보겠습니다. 그런 다음 이 계층 구조를 사용해 어떻게 해결할 수 있는지 살펴보겠습니다.
아래 코드 예제를 살펴보겠습니다.
모든 텍스트를 빨간색으로 칠하고 싶다고 해 보겠습니다. 지금까지 두 가지 방법을 배웠습니다.
- 첫 번째이자 가장 좋지 않은 방법은 각 요소에 스타일(style = "color: red") 특성을 인라인으로 정의하는 것입니다.
- 두 번째 방법은 red-txt라는 이름의 클래스를 정의하고 각 요소에 특성(class = "red-txt")으로 지정하는 것입니다.
하지만 더 쉬운 방법이 있습니다. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>그렇다면 이 계층 관계는 언제 사용할까요? 2
위의 코드를 다시 살펴보겠습니다.
root라는 클래스가 지정된 div 요소에 주목하면, 이 요소가 예제에 있는 모든 요소의 조상이라는 것을 알 수 있습니다.
사람의 유전적 특성은 조상에게서 자손에게 전달됩니다. CSS에서 조상에게 지정한 스타일도 자손에게 반영됩니다.
따라서 관련 div 요소를 선택하는 스타일을 정의하면, 그 요소의 모든 자손이 이 지정의 영향을 받을 것으로 예상할 수 있습니다.
직접 해 보겠습니다.
그렇다면 이 계층 관계는 언제 사용할까요? 3
점 연산자를 사용하여 root라는 이름의 클래스를 정의하고, 그 안에 color: red 스타일을 정의해 보겠습니다.
root 클래스를 가진 모든 요소를 선택하고 해당 요소와 자손의 텍스트 색상을 빨간색으로 지정합니다.
미리 보기 영역을 확인하면 모든 텍스트의 색상이 빨간색으로 바뀐 것을 볼 수 있습니다.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>상속
CSS에서는 이 개념을 상속이라고 합니다. 이 기능을 사용하면 코드를 더 짧게 작성할 수 있습니다.
이전 예제처럼 각 요소에 같은 속성을 하나씩 정의하는 대신 조상 요소에 이 속성을 정의하여 코드 반복을 방지했습니다.
head 요소 배치
이전 예제에서는 작성한 HTML 요소 바로 옆에 style 요소를 추가했습니다.
하지만 style 태그를 삽입해야 하는 올바른 위치는 head 태그 사이입니다.
따라서 다음과 같이 사용하는 것이 더 정확합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>코드를 최대한 짧고 재사용 가능하게 작성합니다
코딩할 때는 코드를 최대한 짧게 작성하고 재사용 가능하게 만들어야 합니다.
축하합니다
축하합니다 🎉
이 섹션에서는 선택자와 상속의 개념을 함께 학습했습니다.
다음 섹션에서는 CSS의 스타일 정의 유형을 학습합니다.
자주 묻는 질문
“CSS 소개” 강의는 무료인가요?
네 — “CSS 소개” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML for Kids 강의 전체를 잠금 해제할 수 있습니다. HTML for Kids 강의에는 총 1개의 강의가 포함되어 있습니다.
“CSS 소개”에서 뭘 배우나요?
CSS 소개 브라우저에서 직접 실행하는 실습 코드로 HTML for Kids을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML for Kids을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML for Kids은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 1개 중 1번째 강의입니다.
“CSS 소개” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML for Kids 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML for Kids 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.