이번 포스팅에서는 CSS와 HTML을 연동하는 방법, 즉 웹 페이지에 스타일을 적용하는 기초적인 방법에 대해 알아보겠습니다. 이론부터 실습까지, 웹 페이지를 더욱 아름답게 만드는 방법을 자세히 학습해 봅시다.
자동목차
이론: CSS란?
CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 정의하는 언어입니다. CSS를 이용하면 웹 페이지의 배경색, 폰트, 레이아웃 등을 쉽게 제어할 수 있습니다.
CSS와 HTML 연동하기
CSS를 HTML에 적용하는 방법은 크게 세 가지입니다: 외부 스타일시트, 내부 스타일시트, 인라인 스타일입니다.
- 외부 스타일시트: CSS 코드를 별도의 .css 파일에 작성하고, HTML 파일에서 이를 연결합니다.
- 내부 스타일시트: HTML 파일 내의 <style> 태그 안에 CSS 코드를 작성합니다.
- 인라인 스타일: HTML 요소의 style 속성에 직접 CSS 코드를 작성합니다.
실습: CSS와 HTML 연동하기
아래의 코드는 세 가지 방법을 모두 사용하여 HTML에 CSS를 적용하는 예시입니다.
<!-- 외부 스타일시트 -->
<link rel="stylesheet" href="styles.css">
<!-- 내부 스타일시트 -->
<style>
body {
background-color: lightblue;
}
</style>
<body>
<!-- 인라인 스타일 -->
<h1 style="color:blue;">CSS와 HTML 연동하기</h1>
<p style="color:red;">스타일시트 기초 학습하기</p>
</body>
코드 설명
- <link rel="stylesheet" href="styles.css">: 외부 스타일시트를 연결하는 코드입니다. 'styles.css'는 CSS 코드가 작성된 .css 파일의 이름입니다.
- <style> 태그: 내부 스타일시트를 작성하는 곳입니다. 이 예시에서는 body의 배경색을 lightblue로 설정하였습니다.
- style 속성: 인라인 스타일을 적용하는 속성입니다. 이 예시에서는 h1 요소의 색을 blue로, p 요소의 색을 red로 설정하였습니다.
마무리
CSS를 이용하면 웹 페이지에 다양한 스타일을 적용할 수 있습니다. 이번 포스팅을 통해 CSS와 HTML을 연동하는 기본적인 방법을 학습하였습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다.