60세 어르신을 위한 코딩 쉬운 가이드 3일차 - 세 번째 날
CSS로 웹 페이지 스타일링하기
세 번째 날에는 HTML로 만든 웹 페이지를 더욱 멋지게 꾸며주는 CSS(Cascading Style Sheets)에 대해 배워보겠습니다. CSS는 웹 페이지의 외형을 디자인하는 언어로, 글꼴, 색상, 레이아웃 등을 설정할 수 있습니다. HTML이 웹 페이지의 뼈대를 만든다면, CSS는 그 뼈대에 살을 붙여주는 역할을 합니다.
CSS의 기본 개념
CSS란 무엇인가요?
CSS는 HTML 요소의 스타일을 정의하는 언어입니다. CSS를 사용하면 웹 페이지의 시각적 스타일을 변경할 수 있습니다. 예를 들어, 텍스트의 색상을 바꾸거나, 배경색을 설정하거나, 레이아웃을 조정할 수 있습니다.
CSS 기본 구문
CSS 코드는 다음과 같은 구조를 가집니다:
css
코드 복사
선택자 {
속성: 값;
}
선택자: 스타일을 적용할 HTML 요소를 지정합니다.
속성: 스타일의 속성을 지정합니다(예: 색상, 글꼴 크기).
값: 속성에 대한 값을 설정합니다.
예제
css
코드 복사
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
font-size: 16px;
}
위의 CSS 코드는 <h1> 태그의 글자를 파란색으로, 글꼴 크기를 24픽셀로 설정하고, <p> 태그의 글자를 회색으로, 글꼴 크기를 16픽셀로 설정합니다.
HTML과 CSS 통합하기
CSS 코드는 HTML 파일 내에 삽입하거나, 별도의 CSS 파일로 분리할 수 있습니다.
내부 스타일 시트
HTML 파일 내에 <style> 태그를 사용하여 CSS 코드를 삽입할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>세 번째 날 학습</title>
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
font-size: 16px;
}
</style>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 세 번째 날의 학습 내용입니다.</p>
</body>
</html>
외부 스타일 시트
CSS 코드를 별도의 파일로 저장하고, HTML 파일에서 링크를 걸어 사용할 수도 있습니다.
CSS 파일 생성: styles.css라는 이름으로 다음과 같은 내용을 저장합니다.
css
코드 복사
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
font-size: 16px;
}
HTML 파일에서 링크 걸기:
<!DOCTYPE html>
<html>
<head>
<title>세 번째 날 학습</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 세 번째 날의 학습 내용입니다.</p>
</body>
</html>
CSS 선택자와 속성
CSS에는 다양한 선택자와 속성이 있습니다. 오늘은 기본적인 몇 가지를 살펴보겠습니다.
기본 선택자
태그 선택자: 특정 HTML 태그에 스타일을 적용합니다.
css
코드 복사
h1 {
color: red;
}
클래스 선택자: 클래스 속성을 가진 요소에 스타일을 적용합니다. 클래스 선택자는 .(점)으로 시작합니다.
css
코드 복사
.red-text {
color: red;
}
HTML에서 사용 예:
<p class="red-text">이 문장은 빨간색입니다.</p>
아이디 선택자: 아이디 속성을 가진 요소에 스타일을 적용합니다. 아이디 선택자는 #(샵)으로 시작합니다.
css
코드 복사
#unique-text {
color: green;
}
HTML에서 사용 예:
<p id="unique-text">이 문장은 초록색입니다.</p>
CSS 속성 예제
텍스트 속성
color: 텍스트의 색상을 지정합니다.
css
코드 복사
p {
color: blue;
}
font-size: 텍스트의 크기를 지정합니다.
css
코드 복사
p {
font-size: 18px;
}
font-family: 텍스트의 글꼴을 지정합니다.
css
코드 복사
p {
font-family: Arial, sans-serif;
}
배경 속성
background-color: 배경색을 지정합니다.
css
코드 복사
body {
background-color: lightgray;
}
background-image: 배경 이미지를 설정합니다.
css
코드 복사
body {
background-image: url('background.jpg');
}
레이아웃 속성
margin: 요소의 바깥 여백을 지정합니다.
css
코드 복사
h1 {
margin: 20px;
}
padding: 요소의 안쪽 여백을 지정합니다.
css
코드 복사
h1 {
padding: 10px;
}
border: 요소의 테두리를 지정합니다.
css
코드 복사
h1 {
border: 1px solid black;
}
예제: 스타일링된 웹 페이지 만들기
지금까지 배운 내용을 바탕으로 웹 페이지를 스타일링해 보겠습니다.
HTML 파일:
<!DOCTYPE html>
<html>
<head>
<title>세 번째 날의 웹 페이지</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 세 번째 날의 학습 내용입니다.</p>
<img src="image.jpg" alt="예제 이미지">
<p>더 많은 정보를 원하시면 <a href="https://www.example.com">여기</a>를 클릭하세요.</p>
</body>
</html>
CSS 파일 (styles.css):
css
코드 복사
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
color: darkgray;
font-size: 18px;
}
img {
display: block;
margin: 0 auto;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
위의 코드를 브라우저에서 열어보면, 배경이 연한 파란색이고, 제목은 중앙에 정렬되며, 텍스트와 링크 스타일이 적용된 웹 페이지를 볼 수 있습니다.
학습 팁
연습을 반복하세요: CSS를 배우는 가장 좋은 방법은 직접 스타일을 적용해 보는 것입니다. 다양한 속성을 시도해 보세요. 참고 자료 활용: MDN Web Docs와 W3Schools 같은 온라인 자료를 참고하여 다양한 CSS 속성과 예제를 확인하세요. 작은 프로젝트 시작: 작은 프로젝트를 만들어 CSS를 적용해 보세요. 예를 들어, 자신의 블로그 페이지를 디자인해 보세요.
MDN Web Docs: CSS에 대한 자세한 문서와 예제를 제공합니다.
W3Schools: CSS를 단계별로 배울 수 있는 온라인 학습 사이트입니다.
세 번째 날에는 CSS를 통해 HTML로 만든 웹 페이지를 스타일링하는 방법을 배웠습니다. CSS를 사용하면 웹 페이지를 더욱 멋지게 꾸밀 수 있으며, 사용자 경험을 향상시킬 수 있습니다. 다음 날에는 JavaScript를 사용하여 웹 페이지에 동적인 기능을 추가하는 방법을 배워보겠습니다. 계속해서 흥미를 가지고 학습을 이어나가세요!