내가 만든 웹 페이지의 뼈대를 보기 좋게 만들기 위해서는 CSS를 적용해야 합니다.
CSS는 과연 무엇이며, 어떻게 사용할까요?
CSS
Cascading Style Sheet의 약자로 다양한 미디어에서 어떻게 보이는지 정의해줄 수 있는 스타일 시트 언어입니다.
HTML만으로 개발하면 요소마다 스타일을 따로 지정해주어야 하기 오래 걸리고 유지 보수가 어렵습니다.
이러한 문제를 해결하기 위해서 별도로 파일에 스타일을 저장할 수 있는 CSS가 등장하게 되었습니다.
CSS 문법
selector { property: value; property: value }스타일의 선언은 선택자(selector)와 선언부로 이루어집니다.
선택자는 HTML 요소를 가르키며, 선언부는 중괄호로 묶어 나타냅니다.
선언부 내용은 속성(property)와 값(value)을 콜론으로 연결하고 다수의 속성은 세미콜론으로 구분합니다.
CSS 선택자
HTML 요소를 가르키는 선택자는 4가지가 있습니다.
- HTML 요소 선택자
- id 선택자 - id 이름을 가지는 요소를 선택합니다.
- class 선택자 - 같은 class 이름을 가지는 요소를 모두 선택합니다.
- 그룹 선택자
CSS 적용 - 인라인 스타일
style 속성을 통해서 HTML 요소 내부에 스타일을 적용하는 방식입니다.
<body>
<!-- 초록색으로 제목 스타일 변경 -->
<h1 style="color: green"> 점심 메뉴 </h1>
</body>
CSS 적용 - 내부 스타일 시트
HTML 문서 <head> 태그 안에서 <style> 태그를 활용하여 스타일을 적용하는 방식입니다.
<head>
<style>
<!-- p 요소의 폰트 스타일을 기울임으로 설정 -->
p {
font-style: italic
}
</style>
</head>
<body>
<p> 햄버거 </p>
</body>
CSS 적용 - 외부 스타일 시트
.css 확장자 파일을 만들어 스타일을 적용하는 방식입니다.
HTML 문서 <head> 태그 안에서 <link> 태그를 이용해 외부 스타일 시트를 연결할 수 있습니다.
h1 {
color: green
}
.dishes-italic {
font-style: italic
}
.dishes-bold {
font-weight: bold
}<head>
<link rel="stylesheet" href="OOO.css">
</head>
<body>
<h1> 점심 메뉴 </h1>
<ul>
<li class="dishes-italic">
<li class="dishes-bold">
</ul>
</body>
여기까지 CSS의 기본적인 문법과 적용 방법에 대해서 알아보았습니다.
포스트를 봐주셔서 감사합니다.
'HTML & CSS' 카테고리의 다른 글
| HTML 알아보기 (0) | 2024.08.20 |
|---|