CSS 란?
Cascading Style Sheet, 브라우저에서 HTML의 모양을 정확하게 제어하고 원하는 디자인을 이용하도록 도와주는 언어이다. 즉, 사용자에게 문서를 표시하는 방법을 제시하는 도구이다.
기본 구성
크게 두가지로 나누어 볼 수 있다.
- 선택자 : Selector
- 선언부 : Declaration
h1 { // 선택자
color: red;
font-size: 5em; // 선언부
}
p { // 선택자
color: black; // 선언부
}➢ 웹페이지의 기능이 많아지고 다양해질수록 특정한 부분의 선택자 수정이 어렵다. HTML의 구조를 처음에 잘 설계한 이후 개발하는 것이 중요하다!
적용 방법
- 내부 스타일시트
HTML과 CSS가 한 파일에 존재하여 편하지만 CSS의 재활용이 어려움.
<head>
<style>
body {
background-color: blue;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>- 외부 스타일시트
CSS를 작성하는 가장 기본적인 방법. 별도에 파일에 CSS작성 후 HTML파일로 불러오는 형식.
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>- 인라인 스타일
HTML태그에 필요한 디자인 속성을 직접 작성하는 방법.
<h1 style="color:blue; margin-left:30px;">Hello World!</h1>➢ 스타일의 적용에는 우선순위과 존재하며, 다음과 같다.
브라우저 디자인 정의 -> 외부 스타일시트 -> 내부 스타일시트 -> 인라인 스타일
지속적으로 추가하고 수정해나갈 예정!
최종 수정일 : 2023.01.07
