728x90
반응형
SMALL
CSS는 HTML로 만든 웹 페이지를 스타일링하여 보기 좋게 꾸며주는 언어입니다. 외부 스타일과 내부 스타일을 사용하여 CSS를 적용할 수 있습니다.
1. CSS의 의미와 사용 이유
CSS는 "Cascading Style Sheets"의 약자로, HTML로 작성한 웹 페이지의 디자인을 꾸미는 역할을 합니다.
2. 외부 스타일 적용하기
외부 스타일은 별도의 CSS 파일을 만들고 HTML 파일에서 해당 CSS 파일을 불러와 사용합니다. 아래와 같은 형태로 사용됩니다.
<head>
<link rel="stylesheet" type="text/css" href="파일명.css">
</head>반응형
이때, "파일명.css"에는 원하는 스타일을 작성합니다.
3. 내부 스타일 적용하기
내부 스타일은 HTML 파일 내에서 CSS를 직접 적용하는 방식입니다. 아래와 같이 <style> 태그를 사용하여 적용합니다:
<style>
h1 { color: red; }
</style>
위의 예시에서는 <h1> 태그에 빨간색으로 텍스트를 스타일링하는 내용을 작성했습니다.
4. 내부 스타일과 외부 스타일의 차이
내부 스타일과 외부 스타일은 기능적으로 동일하지만, 파일 구조와 관리 방법에 차이가 있습니다.
내부 스타일은 HTML 파일 안에 스타일을 포함시키므로 파일을 분리하여 관리할 필요가 없지만, 코드가 길어질 수 있습니다.
외부 스타일은 CSS 파일을 별도로 저장하여 관리하므로 코드가 간결해지지만, 파일 관리에 조금 더 신경을 써야 합니다.
이렇게 CSS를 적용하는 두 가지 방법을 알고 있으면 웹 페이지를 더욱 효과적으로 디자인할 수 있습니다.
728x90
반응형
LIST
'프로그래밍 > CSS' 카테고리의 다른 글
| [CSS 수업] 6강 - 레이아웃 만들기 (0) | 2024.05.16 |
|---|---|
| [CSS 수업] 5강 - 박스 모델 이해하기 (0) | 2024.05.15 |
| [CSS 수업] 4강 - CSS 속성 및 값 (0) | 2024.05.14 |
| [CSS 수업] 3강 - CSS 선택자 (0) | 2024.05.13 |
| [CSS 수업] 1강 - CSS란 무엇일까? (0) | 2019.04.09 |