CSS 기초
CSS를 사용한 스타일 지정의 기본을 소개합니다(선택 사항인 개요)
CSS 기초은(는) CoddyKit의 무료 HTML for Kids 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML for Kids 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML for Kids 강의에는 총 4개의 강의가 포함되어 있습니다.
CSS 기초: CSS를 사용한 스타일 지정 입문
CSS의 세계에 오신 것을 환영합니다! 오늘은 계단식 스타일 시트(CSS)를 사용하여 웹 페이지에 스타일을 지정하고 멋지게 꾸미는 방법을 배워 보겠습니다.
CSS란 무엇인가요?
CSS는 계단식 스타일 시트를 의미합니다. 웹 페이지의 모양과 느낌을 제어하는 데 사용하는 언어입니다.
CSS를 사용하면 색상, 글꼴, 레이아웃 등을 변경할 수 있습니다!
CSS 작동 방식
CSS는 HTML 요소를 선택하고 해당 요소에 스타일을 적용하는 방식으로 작동합니다. CSS는 세 가지 방법으로 사용할 수 있습니다:
- 인라인: HTML 요소 안에 직접 스타일을 추가합니다.
- 내부:
<head>안의<style>태그에 스타일을 추가합니다. - 외부: 별도의 CSS 파일을 사용합니다.
이 레슨에서는 내부 스타일과 외부 스타일에 집중하겠습니다.
내부 CSS
내부 CSS는 HTML 문서의 <head> 안에 있는 <style> 태그에 작성합니다.
예시:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
외부 CSS
외부 CSS는 .css 확장자를 사용하는 별도의 파일에 작성합니다. <link> 태그를 사용하여 HTML 문서에 연결합니다.
예시:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
CSS의 선택자
선택자는 스타일을 지정할 특정 HTML 요소를 대상으로 지정할 때 사용합니다. 일반적인 선택자는 다음과 같습니다:
- 태그 선택자: 특정 태그를 사용하는 모든 요소를 대상으로 지정합니다. 예시:
p. - 클래스 선택자: 특정 클래스를 사용하는 요소를 대상으로 지정합니다. 예시:
.myClass. - ID 선택자: 특정 ID를 사용하는 요소를 대상으로 지정합니다. 예시:
#myID.
사용 방법을 살펴보겠습니다!
클래스 선택자와 ID 선택자
여러 요소에 같은 스타일을 지정하려면 클래스를 사용합니다. 하나의 고유한 요소에는 ID를 사용합니다.
예시:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
직접 해 보기
내부 CSS를 사용하여 웹 페이지를 만들어 보겠습니다. 시작하는 데 도움이 되는 예시는 다음과 같습니다:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
훌륭합니다!
축하합니다! CSS의 기초와 CSS를 사용하여 웹 페이지에 스타일을 지정하는 방법을 배웠습니다. CSS를 사용하면 페이지를 전문적이고 보기 좋게 만들 수 있습니다. 다음 레슨에서는 페이지를 더욱 생동감 있게 꾸밀 수 있도록 색상과 배경을 자세히 살펴보겠습니다. 창의력을 마음껏 발휘할 준비를 하세요!
자주 묻는 질문
“CSS 기초” 강의는 무료인가요?
네 — “CSS 기초” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML for Kids 강의 전체를 잠금 해제할 수 있습니다. HTML for Kids 강의에는 총 4개의 강의가 포함되어 있습니다.
“CSS 기초”에서 뭘 배우나요?
CSS를 사용한 스타일 지정의 기본을 소개합니다(선택 사항인 개요) 브라우저에서 직접 실행하는 실습 코드로 HTML for Kids을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML for Kids을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML for Kids은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“CSS 기초” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML for Kids 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML for Kids 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.