CSS란 무엇일까?
CSS는 Cascading Style Sheets의 약어로 HTML, XHML, XML과 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.
집을 짓는다고 가정한다면 HTML은 집의 구조(뼈대)를 담당하고, CSS는 인테리어를 담당한다. (개인적인 생각)
CSS 필요성
- HTML 하나로 문서의 뼈대와 스타일을 같이 한다면 1개의 디자인 변경이 이루어질 경우 관련된 모든 문서를 전부 수정해야 하는 번거로움이 있다. 따라서 구조와 디자인을 분리하기 위해 만들어진 것이 CSS!
- 태그 내에 style속성 등 디자인에 필요한 요소들이 분리되기 때문에 코드의 가독성이 좋다.
- 선택자로 묶어 관리하기 때문에 유지보수 용이
CSS 적용방법
CSS를 적용하는 방법은 3가지가 있다.
- Inline Style Sheet :
- HTML 태그의 style 속성에 CSS 코드 작성
- 해당 태그가 선택자(Selector)가 되고, CSS코드는 "속성(property): 값(value)" 형식으로 이루어진다.
재사용이 불가능하고, 유지보수가 힘든 단점이 있다.
- Internal Style Sheet :
- HTML 문서 안의 <style></style> 태그 안에 CSS 코드 작성
- 보통 HTML문서 내의 <head></head> 사이에 <style>태그를 작성하나 HTML문서의 어디에 넣어도 적용됨.
- 문서 안의 여러 요소를 한 번에 꾸밀 수 있다는 장점이 있으나 일괄 적용할 수 없다는 단점이 있다.
- Linking Style Sheet :
- CSS 파일을 따로 분리하여 HTML 문서에 연결하여 사용
- 여러 HTML문서에 일괄 적용 가능
<!-- Inline Style Sheet -->
<body>
<p style="color: blue">파란색의 폰트</p>
</body>
<!-- Internal Style Sheet -->
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>파란색 글자로 작성한 제목</h1>
</body>
<!-- Linking Style Sheet -->
<!-- CSS 파일명 : style.css -->
h1 {
color: red;
}
<!-- html -->
<head>
<link rel="stylesheet" href="CSS파일경로/style.css">
</head>
<body>
<h1>파란색 글자로 작성한 제목</h1>
</body>유지보수를 생각하면 2번 3번이 좋고, 그 중에서도 3번으로 작성하는 것을 추천
CSS 기본 구조
CSS의 기본 구조는 다음과 같이 선택자(selector), 프로퍼티(property), 값(value), 세미콜론(;)으로 이루어져 있다.
- 선택자 : 보통 스타일링하고 싶은 HTML 요소나 ID 또는 Class가 위치함.
- 선언부 : 중괄호시작과 끝을 포함한 내용
- 프로퍼티(=속성) : CSS의 실질적인 기능을 의미하며, 선택자에 대해 어떤 스타일을 부여할 지를 지정한다.
- 값(=속성 값) : 프로퍼티에서 지정한 스타일에 대한 값을 지정한다.
Selector(선택자) {
property(속성): value(속성 값);
}
<!-- EX -->
div {
color: red;
}'WEB > HTML & CSS' 카테고리의 다른 글
| [CSS] CSS 선택자 종류와 우선순위 (작성중) (0) | 2022.06.28 |
|---|---|
| [CSS] Flexbox : 자식 박스의 방향과 크기 설정 (0) | 2022.06.28 |
| [CSS] box-sizing : 박스 크기 방식 설정 (0) | 2022.06.28 |
| [HTML] 시멘틱 태그(Semantic Tag) (0) | 2022.06.27 |
| [HTML] HTML이란? (0) | 2022.06.27 |