CSS(Cascading Style Sheets)
CSS는 마크업 언어로 작성된 문서 스타일을 꾸미기 위한 언어로,
해당 문서를 원하는 스타일로 지정하여 레이아웃을 제어할 수 있습니다.
HTML이 웹 페이지의 구조를 담당한다면,
CSS는 색상, 글꼴, 간격, 배치 등 디자인과 시각적인 표현을 담당하는 역할을 합니다.
스타일 지정 방식은 다음과 같습니다.
- HTML 문서의 <head> 요소 안에서 <style> 태그 사용
<head>
<meta> ...
<title>제목</title>
<style>
/* 전체 문서 배경색 & 글꼴 스타일 지정 */
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
/*제목 글자 색*/
h1 {
color: #333;
}
/*문단의 글자 크기 지정*/
p {
font-size: 16px;
}
</style>
</head>- 외부 CSS 파일 연결
<head>
<meta>....
<title>제목</title>
<link rel="stylesheet" href="styles.css">
</head>
지정해야 할 스타일이 적은 경우에는 인라인 방식으로도 구현이 가능하지만,
일반적으로는 외부 CSS 파일을 사용하는 것을 권장합니다.
특히 코드의 재사용성과 유지보수 측면에서 더 효율적인 방법이라고 할 수 있습니다.
인라인 방식은 빠르게 적용할 수 있다는 장점이 있지만,
코드가 많아질수록 관리가 어려워지는 단점이 있습니다.
반면 외부 CSS 파일은 여러 요소에 동일한 스타일을 적용할 수 있어,
코드를 한 곳에서 관리하고 수정할 수 있다는 점에서 훨씬 효율적입니다.
즉, 하나만 특별하게 스타일링할 때는 id, 여러 개를 묶어서 스타일링할 때는 class를 사용한다고 이해하면 쉽게 사용할 수 있습니다.
class 선택자(.class)
class 선택자의 경우, 여러 요소들을 그룹화 해서, 해당 그룹에 스타일을 적용하는 방식입니다.
<p class="highlight paragraph">Hello, World!</p>.highlight {
background-color: yellow;
}
.paragraph {
font-size: 16px;
}
id 선택자(#id)
id 선택자는 문서 내의 유일한 식별자를 가진 요소를 선택하는 것입니다.
동일한 id를 가지는 2개 이상의 요소는 있으면 안되고, 이는 유일성을 보장하기 위해 사용이 됩니다.
<div id="header">
<!-- 내용 -->
</div>#header {
background-color: #333;
color: #fff;
font-size: 24px;
}
CSS는 다양한 스타일 속성을 제공하고, 주요 속성들은 다음과 같습니다.
- color: 텍스트 색상 지정
- background-color: 배경색 지정
- font-family: 글꼴 지정
- font-size: 글자 크기 지정
- margin, padding: 요소 주위의 여백 및 안쪽 여백 지정
- border: 테두리 지정
- width, height: 요소의 너비와 높이 지정
- display: 요소의 표시 방식 지정 (예: block, inline, flex 등)
CSS의 속성들도 마찬가지로 모든 속성을 무조건 암기하기보다는,
필요할 때마다 검색하며 사용하는 것이 더 중요하다고 생각합니다.
이 과정을 반복하다 보면, 자연스럽게 익숙해져 별도의 검색 없이도 사용할 수 있는 수준에 도달하게 될 것입니다!
실습하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 실습</title>
<!-- style.css 파일과 연결 -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- ozcodingschool 사이트로 이동하는 링크 -->
<a href="https://ozcodingschool.com/" id="oz-link">
<h1 class="daily-title">오늘의 할 일</h1>
</a>
<ul>
<li class="task">HTML 예습하기</li>
<li class="task">MDN 사이트 접속하기</li>
<li class="task">w3school 사이트 접속하기</li>
<li class="task" id="challenge-task">실습 도전하기</li>
</ul>
</body>
</html>body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
a {
text-decoration: none;
}
.daily-title {
color: #3498db;
}
.task {
font-size: 18px;
margin-bottom: 10px;
}
#challenge-task {
font-weight: bold;
}
참고하기
https://www.w3schools.com/css/default.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'개발' 카테고리의 다른 글
| JavaScript 입문하기 (0) | 2026.03.27 |
|---|---|
| CSS 입문하기 #2 (0) | 2026.03.26 |
| HTML 입문하기 (0) | 2026.03.26 |
| Git과 Github (0) | 2026.03.26 |
| CLI(Command Line Interface) 환경 알아보기 (0) | 2026.03.26 |