가장 많이 사용하는 CSS 속성
가장 많이 사용하는 CSS 속성
가장 많이 사용하는 CSS 속성은(는) CoddyKit의 무료 HTML for Kids 강의입니다. 이것은 1개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML for Kids 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML for Kids 강의에는 총 1개의 강의가 포함되어 있습니다.
소개
안녕하세요.
이 섹션에서는 가장 자주 사용하는 CSS 속성을 알아보겠습니다.
지금까지는 일반적으로 color, font-size와 같은 간단한 속성을 사용하여 예제를 작성했습니다.
너비와 높이
높이 - 너비
너비와 높이 속성을 사용하여 요소의 너비와 높이 값을 설정합니다.
여기에서 주의해야 할 사항은 두 가지입니다.
- 인라인 유형 요소에는 너비와 높이를 지정할 수 없습니다.
- 지정한 너비와 높이 속성은 기본적으로 여백, 안쪽 여백, 테두리와 같은 다른 속성과 독립적입니다. 또한 요소 내부 영역에만 적용됩니다.
위의 예외 사항에 대해서는 나중에 추가로 설명하겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
너비와 높이 2
이전 예제에서는 너비와 높이 값을 고정된 값으로 지정했습니다. 하지만 지정할 수 있는 값이 고정된 숫자로 제한되는 것은 아닙니다.
이제 예제에서 백분율로 너비를 지정하는 방법을 알아보겠습니다.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
content-box와 border-box
box-sizing 속성은 기본적으로 content-box 값을 사용합니다.
또한 기본적으로 너비와 높이 값은 콘텐츠를 기준으로 사용됩니다.
테두리와 패딩 값은 너비와 높이 값에 더해집니다.
상자의 너비가 100px이라고 가정해 보겠습니다.
이 상자에 패딩으로 10px을 추가하고 테두리 속성으로 20px을 추가하면 요소의 전체 너비는 100px + 10px + 20px = 130px이 됩니다.
최대 너비
max-width 속성을 사용하면 요소가 가질 수 있는 최대 너비를 지정할 수 있습니다.
아래 예제에서는 max-width 값이 100px로 지정되어 있습니다. 너비의 기본값은 auto(요소가 부모 요소의 100%를 차지해야 함)이지만, 요소는 100px을 차지하며 콘텐츠가 상자 밖으로 벗어났습니다.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
텍스트 장식
text-decoration 속성으로 텍스트의 장식을 정의할 수 있습니다.
이 속성은 예제를 통해 살펴보는 것이 더 이해하기 쉬울 것 같습니다. 미리 보기에서 예제 코드의 결과를 확인해 보세요.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
텍스트 시작 부분에 공백을 넣고 싶을 수 있습니다. 이때 text-indent 속성을 사용합니다.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
text-align 속성으로 텍스트의 가로 배치를 지정합니다.
HTML 예제를 정의해 보겠습니다.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
font-family 스타일을 사용하여 텍스트에 적용할 글꼴 유형을 지정합니다.
여기서 알아 두어야 할 몇 가지 중요한 사항이 있습니다.
- 지정한 글꼴은 사용자의 시스템에 설치되어 있어야 합니다. 따라서 웹 안전 글꼴로 분류된 글꼴 중 하나를 사용해야 합니다.
- 사용자 지정 글꼴을 사용하려면 head 태그 사이에 사용할 글꼴을 외부 종속 항목으로 추가해야 합니다. font-family를 추가할 때는 기본 글꼴과 보조 글꼴을 정해야 합니다.
- 브라우저가 시스템에서 기본 글꼴을 찾지 못하면 사용자에게 보조 글꼴을 표시합니다.
글꼴 계열 2
아래 예제에서는 기본 클래스에 Times New Roman 글꼴이 지정되어 있습니다.
보조 글꼴과 세 번째 글꼴로 각각 Times와 세리프 글꼴이 지정되어 있습니다.
브라우저는 먼저 Times New Roman 글꼴을 사용하려고 시도합니다. 이 글꼴을 시스템에서 찾을 수 없으면 다른 글꼴 설정이 사용됩니다.
지정한 글꼴을 사용할 수 없으면 브라우저는 기본 글꼴을 사용합니다.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>글꼴 스타일
이름에서 알 수 있듯이, 이 속성은 텍스트에 사용할 글꼴 스타일을 지정합니다.
이제 예제를 통해 글꼴 스타일 속성을 살펴보겠습니다.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>축하합니다
축하합니다 🎉
이 섹션에서는 가장 많이 사용하는 CSS 속성을 학습했습니다.
다음 섹션에서는 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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.