1. CSS란?
- Cascading Style Sheet의 약자
- 웹 페이지를 디자인하기 위한 언어
- HTML이 뼈대 / 구조를 구축하는 작업이라면, CSS는 디자인 / 인테리어를 하는 작업
- 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적
2. CSS 작성 방식
2.1 인라인 방식
- 각 요소의 style 속성에 직접적으로 스타일을 작성하는 방식
- 직관적이고 하나의 태그에 대해 바꾸기가 쉽다는 장점
- HTML은 구조, CSS는 디자인을 담당하게 하자고 하는 암묵적인 룰에 어긋나는 부분 존재
- 작성한 태그에 한해 적용이 되기 때문에, 다른 곳에서 재사용이 불가능
<h1 style="color: blueviolet;">CSS 사용법을 익혀보자 !</h1>2.2 내장 방식
- HTML의 <head> 태그 내부에 <style> 태그로 선언하여 내부에 css 작성
- style 태그 내부에 여러 태그에 해당하는 스타일 정의 가능
<head>
<style>
h1 {
color: white;
background-color: darkolivegreen;
}
</style>
</head>
2.3 링크 방식
- 작성하려는 모든 style을 하나의 CSS 파일에 작성한 뒤, 필요한 HTML 파일에서 해당 파일을 링크하여 사용하는 방식
- 재사용성이 좋고, 유지보수가 용이하다는 장점이 있어 많이 사용
- 이렇게 link 태그를 활용하여 css 속성을 가지고 올 수 있는데, href 속성에는 참조할 css 파일의 경로를 작성
★ 참조 우선순위
- 기본적으로 가장 늦게 읽히는 것이 우선적으로 적용
- 인라인 방식은 다른 방식보다 무조건 우선순위
- 내장 방식과 링크 방식에 대해서는 늦게 쓰인 것이 우선적으로 적용
728x90
'CSS' 카테고리의 다른 글
| [CSS] 미디어 쿼리란? (0) | 2023.08.06 |
|---|---|
| [CSS] 반응형 웹 vs 적응형 웹 (1) | 2023.08.01 |
| [CSS] flex(flexbox)와 여러 속성들 한 눈에 보기 (0) | 2023.07.25 |
| [CSS] CSS의 다양한 선택자 (0) | 2023.07.22 |