1. 웹 문서를 디자인하는 스타일시트 언어
CSS(Cascading Style Sheets)는 HTML이나 XML 같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 스타일 시트 언어라고 합니다. HTML이 문서의 구조와 콘텐츠를 정의한다면, CSS는 그 문서를 시각적으로 꾸미고 스타일을 지정하여 레이아웃을 제어합니다.
기본 구조
CSS는 주로 HTML 문서의 <head> 요소 안에서 <style> 태그를 사용하여 정의됩니다. 또는 외부 CSS 파일을 연결하여 사용할 수 있습니다.
- 인라인 스타일
<style> 요소 내부에 CSS 속성을 직접 입력할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<style>
/* 전체 문서의 배경색과 글꼴 지정 */
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
/* 제목의 글자색 지정 */
h1 {
color: #333;
}
/* 문단의 글자 크기 지정 */
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph with some text.</p>
</body>
</html>- 외부 css 파일
<link>요소에 href 속성으로 css파일명을 입력하면 HTML 문서와 외부에 있는 CSS 파일이 연결됩니다.
<link rel="stylesheet" href="styles.css">일반적으로는 외부 css 파일을 쓰는 것을 추천한다고 합니다
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph with some text.</p>
</body>
</html/* style.css */
/* 전체 문서의 배경색과 글꼴 지정 */
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
/* 제목의 글자색 지정 */
h1 {
color: #333;
}
/* 문단의 글자 크기 지정 */
p {
font-size: 16px;
}2. 선택자(Selectors)
선택자는 스타일을 적용할 대상을 지정한다고 합니다
/* 선택자 예제 */
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
p {
font-size: 16px;
}
class 선택자
.클래스 를 사용
<p class="highlight paragraph">이 문장은 강조되고 특별한 스타일이 적용됩니다.</p>.highlight {
background-color: yellow;
}
.paragraph {
font-size: 16px;
}
id 선택자
#아이디 를 사용
<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등)
🍩 실습 과제
아래 HTML 문서를 조건에 맞게 디자인하세요.
<!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>
