[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고

웹 페이지를 꾸며주는 역할을 하는 CSS에 대해 알아보자!

---

CSS란?

Cascading Style Sheet 의 약자로 웹 페이지를 디자인하기 위해 사용하는 언어를 말한다.
HTML이 웹 페이지의 뼈대를 구성한다면 CSS는 웹 페이지에 스타일을 지정하여 꾸며주는 역할을 한다.

CSS 참조 방식

CSS 참조 방식에는 세가지 방법이 있다.

• 인라인 방식
• 내장 방식
• 링크 방식

1) 인라인 방식
인라인 방식은 HTML 태그 내에 스타일을 적용하는 방법이다.

<h1 style="color: white; background-color: pink;">제목</h1>

인라인 방식은 각 요소의 style 속성에 전부 스타일을 직접 적어줘야 해서 재사용이 전혀 불가능하다.

2) 내장방식
내장 방식은 HTML의 head태그 내부에 사용할 스타일을 style 태그로 미리 선언하여 사용하는 방법이다.

<style>
        h1{
            color: white;
            background-color: pink;
        }
</style>

내장방식은 태그에 같은 스타일 적용이 가능하기 때문에 같은 HTML 파일 내에서 중복 사용이 가능하다.
하지만 다른 HTML 파일에서는 재사용이 불가능하다.

3) 링크 방식
링크 방식은 모든 style을 하나의 CSS 파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크 해서 사용하는 방식이다.

<link rel="stylesheet" href="./index.css">

<style>
        h1{
            color: white;
            background-color: pink;
        }
</style>

링크 방식은 같은 HTML 파일 내에서 중복 사용이 가능하고 또한 다른 HTML 파일 이어도 같은 CSS 파일을 링크로 연결 해주면 다른 HTML 파일도 해당 스타일을 공유하여 재사용이 가능하다.

CSS 참조 방식 우선 순위

인라인 방식 > 내장방식 ? 링크방식

우선 순위는 인라인 방식이 가장 높고 내장 방식과 링크 방식은 가장 늦게 읽히는 것이 우선으로 적용된다.

---

CSS의 참조 방식에 대해 알아보았다. 참조 방식을 배우면서 느낀건 앞으로 CSS 코드를 짤 때 아무래도 코드가 짧지많은 않을 것이고 또한 하나의 스타일을 만들어놓고 여러곳에 가져다가 쓸 것 같기 때문에 긴 코드를 관리하기 위해서는 링크 방식이 좋을 것 같다는 생각이 들었다 😊

---

참고

코딩온 강의 자료