CSS를 HTML에 적용 시키는법
CSS는 Cascading Style Sheets의 약자로, 웹페이지의 디자인과 스타일을 담당합니다. HTML은 웹사이트의 구성 요소를 설명하는 마크업 언어입니다. 이번 포스팅에서는 HTML에 CSS를 적용하는 방법에 대해 알아보겠습니다.
1. 내부 스타일 시트
HTML 파일 내부에 CSS 코드를 작성하여 적용하는 방법입니다. 이 방법은 웹사이트가 하나의 HTML 파일로만 이루어져 있을 때 유용합니다. 내부 스타일 시트를 사용하면 HTML 파일 내부에서 모든 스타일을 관리할 수 있습니다.
HTML 파일의 <head> 태그 안에 <style> 태그를 추가한 후, 그 안에 CSS 코드를 작성합니다.
html
<!DOCTYPE html>
<html>
<head>
<title>내부 스타일 시트</title>
<style>
body {
background-color: #f2f2f2;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
2. 외부 스타일 시트
HTML 파일과 CSS 파일을 분리하여 따로 작성하는 방법입니다. 이 방법은 웹사이트가 다수의 HTML 파일로 이루어져 있을 때 유용합니다. 외부 스타일 시트를 사용하면 여러 HTML 파일에서 동일한 스타일을 적용할 수 있습니다.
HTML 파일의 <head> 태그 안에 <link> 태그를 추가하고, href 속성에 CSS 파일의 경로를 지정합니다.
html
<!DOCTYPE html>
<html>
<head>
<title>외부 스타일 시트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
CSS 파일은 다음과 같이 작성합니다.
css
body {
background-color: #f2f2f2;
}
h1 {
color: blue;
}
3. 인라인 스타일
HTML 태그에 직접 스타일을 지정하는 방법입니다. 이 방법은 특정 태그에 스타일을 적용할 때 유용합니다.
HTML 태그의 style 속성에 CSS 코드를 작성합니다.
html
<!DOCTYPE html>
<html>
<head>
<title>인라인 스타일</title>
</head>
<body>
<h1 style="color: blue;">Hello, World!</h1>
</body>
</html>
4. 선택자
스타일을 적용할 HTML 요소를 선택하는 방법입니다. 선택자를 사용하면 웹페이지의 모든 HTML 요소에 스타일을 적용하는 것이 아니라 원하는 요소만 스타일을 적용할 수 있습니다.
다음은 선택자의 예시입니다.
tagname: 태그 이름에 스타일을 적용합니다.#id: 아이디에 스타일을 적용합니다..class: 클래스에 스타일을 적용합니다.
html
<!DOCTYPE html>
<html>
<head>
<title>선택자</title>
<style>
h1 {
color: blue;
}
#title {
font-size: 20px;
}
.content {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</body>
</html>
이제 HTML 파일에 CSS를 적용하는 다양한 방법에 대해 알아보았습니다. CSS를 효과적으로 사용하여 웹페이지를 더욱 멋지게 만들어보세요!
'기초지식' 카테고리의 다른 글
| AI의 개념 (0) | 2023.06.12 |
|---|---|
| HTML, CSS, JavaScript 소개 (0) | 2023.06.12 |
| HTML 만드는법 (0) | 2023.06.12 |
| 업무 자동화에 필요한 파이썬 패키지 소개 (0) | 2023.06.12 |
| venv 가상환경 만드는 법 (0) | 2023.06.10 |