[CSS] CSS란? 적용하는 방법

CSS란?

Cascading Style Sheet

 

웹이 발전하면서 하나의 웹 문서 안에 구조를 설계하는 태그와 디자인을 담당하는 스타일을 같이 묶어 두는 것이 문제가 되기 시작했다. 그래서 W3C는 웹 문서에서 구조와 디자인을 분리하기로 했고, 그 방법으로 CSS가 탄생했다.

하나의 웹 문서를 다양한 디바이스에 최적화해서 출력한다. CSS 요소는 화면에 어떻게 렌더링되어야 하는지 지정한다.
 

 
☑️ 웹 문서를 꾸며주는 언어(디자인)
 
☑️ Cascading Style Sheet의 약자

➡️ Cascading이란? 폭포, 위에서 아래로 쏟아지는이라는 뜻이다. (상속)
 

---

CSS 3 문법

 
 
☑️ CSS는 크게 선택자와 선언부로 구분한다.

 
- 선택자 : CSS 스타일을 적용할 HTML 태그를 선택하는 영역이다.
 
- 선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호({}) 안에 넣는다. 선언부에 작성하는 스타일은 반드시 속성과 값을 한 쌍으로 작성한다. 이때 값의 뒤에 세미콜론을 넣으면 여러 스타일을 연속해서 작성 가능하다.
 
 

[CSS 문법 형식]

● 선택자
● 속성
● 값

h1 {
     color:red;
}

h1 {
     font-size:24px;
     color:red;
}

 
 

---

CSS 적용 방법

 
 

1. HTML 태그에 직접 적용하는 방법
2. 내부 스타일 시트 사용하기
3. 외부 스타일 시트 사용하기

 
 

---

 

1. HTML 태그에 직접 적용하는 방법 (🙅🏻‍♀️)

 

• HTML 태그에서 사용할 수 있는 style 속성에 CSS 코드를 작성하는 방법
• 태그에 직접 CSS를 작성하는 방식이라서 선택자 필요 없음

 

<태그 style="CSS 코드"></태그>

 
 

---

2. 내부 스타일 시트 사용하기

 
 

• HTML 파일 내부에 CSS 코드를 작성하는 방법
• style 태그의 콘텐츠로 CSS 코드를 작성하면 된다.
• 보통 head 태그 안에 사용한다. 

 

<style>
      /* CSS 코드 */
</style>

 
웹 브라우저는 HTML 문서를 해석할 때 HTML 문서에 작성된 코드를 첫 번째 줄부터 순차적으로 해석한다. 그리고 웹 브라우저에 표시되는 내용은 body 태그 안에 작성한다.

따라서 head 태그에 CSS를 작성하면 body 태그에 작성된 내용이 사용자에게 노출되기 전에 CSS를 불러와 빠르게 디자인을 적용할 수 있다는 장점이 있다. 그러나 웹 브라우저에서 HTML 문서를 해석할 때마다 CSS 코드를 매번 다시 가기 때문에 성능상 좋지 못하다는 단점도 있다.
 
 

---

3. 외부 스타일 시트 사용하기  ✅실무

 

• CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방법
• 외부 파일의 확장자는 .css
• 별도로 작성한 CSS 파일을 HTML 문서에서 연결할 때는 link 태그를 사용

 

[형식]

<link rel="stylesheet" href="css 파일 경로">