CSS 알아보기

🎨 CSS 란?

CSS - Cascading Style Sheets

• 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다.
• HTML이 웹 콘텐츠의 뼈대를 만든다면 CSS는 그 뼈대에 색상, 글꼴, 위치 등 시각적인 요소를 입히는 역할을 합니다.

 

📌 HTML과 CSS

HTML과 CSS는 각자의 문법을 가지는 별개의 언어.

HTML은 CSS를 포함할 수 있지만 HTML없이 존재하는 CSS는 의미가 없습니다.

 

🏃 동작 원리

• HTML과 브라우저의 동작 과정에서 CSS가 어떻게 적용되는지 간단하게 흐름 설명
• 렌더링 파이프라인의 개념(HTML 파싱 → CSS 파싱 → 적용 → 최종 렌더링) 요약

 

📖 기본 문법(사용법)

 

CSS는 Selector(선택자) 와 Declaratives(선언부) 로 구성됩니다.

선택자 CSS를 적용하고자 하는 HTML 요소

선언부	하나 이상의 선언을 ; 으로 구분하고 중괄호를 사용해 전체를 둘러쌉니다.

 

📖 주요 선택자

• HTML 요소 선택자, 아이디(#id), 클래스(.class), 그룹 선택자, 전체 선택자

📖 선언

• 선언은 CSS의 속성(property)와 속성 값(value)를 가지고 : 으로 연결됩니다.

 

💡 CSS 선언 방식

style을 html 파일에 적용하는 방법

 

1️⃣ 인라인 (in-line) 방식

HTML 요소(태그)안에서 style 속성을 사용 단일 HTML 요소에 고유한 스타일을 적용

 

<h1 style="color:blue;">Blue H1</h1>
<p style="color:red;">Red paragraph</p>

 

2️⃣ Internal (embedded) 방식

head 섹션에서 style 태그를 사용

<style> </style> 안에 작성

 

<head>
    <style type="text/css">
        body {background-color: powderblue;}
        h1   {color: blue;}
        p    {color: red;}
    </style>
</head>
<body>
...
</body>

 

3️⃣ External (link) 방식

외부 CSS 파일을 <link> 를 이용해 불러와 적용하는 방식

 

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
</body>

 

🧐 CSS Selector

CSS 선택자는 스타일을 지정하기 위한 HTML 요소를 찾는데 사용합니다.

 

1️⃣ HTML 요소(태그) 선택자

CSS를 적용할 HTML 요소 대상의 이름을 직접 사용해 선택

h2 {
  color: red;
}

 

2️⃣ id 선택자

CSS를 적용할 대상으로 특정 요소를 선택할 때 사용

• # 를 사용해서 구분

 

#test {
  color: red;
}

 

3️⃣ class 선택자

특정 집단(class)의 여러 요소를 한 번에 선택할 때 사용

• 같은 클래스 이름을 가지는 모든 요소들을 선택

.test {
  color: red;
}

.test2{
  color: blue;
}

 

4️⃣ 그룹 선택자

여러 선택자를 함께 사용하고자 할 때 사용

• 여러 선택자를 쉼표(,) 로 구분하고 연결
• 이를 통해 코드를 중복하지 않게되어 코드가 간결해집니다.

h1, h2 {
  color: yellow;
}

 

5️⃣ 전체 선택자

요소 내부의 모든 요소를 선택하기 위해 사용.

• * 문자를 사용

* {
  color: red;
}

div * {
  color: blue;
}

 

🧩 CSS Cascading

CSS는 Cascading Style Sheets의 약자입니다.

• 첫 번째 단어인 cascading 를 이해해보려고 합니다.

 

동일한 요소는 적용할 수 있는 여러개의 CSS 선언에 대해 영향을 받아 충돌을 할 수 있습니다.

 

계층성(cascade) 과 밀접하게 관련된 우선 순위(specificity)은 충돌이 있을 때 적용되는 규칙을 제어하는 메커니즘입니다.

 

웹 페이지의 디자인을 정의하는 CSS 스타일 규칙이 여러 소스에서 적용될 때, 어떤 스타일을 최종적으로 적용할지 결정하는 우선순위 규칙

따라서 원하는 element를 원하는 스타일로 만들기 위해서는 작동 방식을 이해해야 합니다.

 

📌 CSS 상속

CSS 속성에는 현재 요소의 부모 요소에 설정된 값을 상속하는 속성과 상속하지 않는 속성이 있습니다.

 

✅ 상속하는 속성 예시 - color

<style>
  p { color: blue; }
</style>

<p>Parent 
  <span>Child</span>
</p>

• Parent 과 Child 의 색이 모두 파란색이 됩니다.

 

🖥️ 결과

 

❌ 상속하지 않는 속성 예시 - padding

<style>
  p { padding: 20px; }
</style>

<p>Parent 
  <span>Child</span>
</p>

• p 태그에서만 여백을 만들고 span 에서는 여백을 만들지 않습니다.

 

💡 CSS 중요도

CSS가 어떻게 선언되었는지에 따라서 우선순위가 달라집니다.

1. head 섹션에서 style 태그를 사용
2. head 섹션에서 style 태그내의 @import 문
3. <link> 로 연결된 CSS 파일
4. <link> 로 연결된 CSS 파일 내의 @import 문
5. 브라우저 디폴트 스타일 시트

 

🤖 CSS Specificity - 스타일을 적용할 때의 우선순위

스타일을 적용할 대상을 명확하게 특정할 수록 명시도가 높아지고 우선순위가 높아집니다.

 

!important 
> 인라인 스타일 
> 아이디 선택자 
> 클래스 / 어트리뷰트 / 가상 선택자
> 태그 선택자
> 전체 선택자
> 상위 요소에 의해 상속된 속성

• 이렇게 대상을 명확하게 특정할 수록 명시도가 높아지고 우선순위가 높아집니다.

 

<!DOCTYPE html>
<html>
<head>
  <style>
    p        { color: red !important; }
    #thing   { color: blue; }

    div.food { color: chocolate; }
    .food    { color: green; }
    div      { color: orange; }
  </style>
</head>
<body>
  <p id="thing">Red Thing</p>
  <div class="food">Chocolate</div>
</body>
</html>

 

🖥️ 결과

📖 !important

CSS는 같은 속성을 여러번 정의할 경우 나중에 설정한 값이 적용됩니다.

나중에 설정한 값이 적용되지 않게 하려면 속성값(value) 뒤에 !important를 붙이면 무조건 해당 값이 적용됩니다.

 

color: blue !important

 

🤔 !important 가 왜 필요하고 언제 사용하나??

 

CSS의 우선순위 규칙을 무시하고 특정 스타일을 강제로 적용해야 할 때가 있기 때문입니다.

 

!important는 주로 다음과 같은 상황에서 사용됩니다.

외부 라이브러리/프레임워크의 스타일을 재정의	Bootstrap 같은 외부 라이브러리는 강력한 기본 스타일을 제공합니다. 특정 컴포넌트의 스타일을 미세하게 조정하고 싶지만 라이브러리의 높은 우선순위 규칙 때문에 변경이 어려울 때 !important를 사용해 원하는 스타일을 덮어쓸 수 있습니다.
개발자 도구를 이용한 디버깅	특정 스타일을 테스트하거나 디버깅해야 할 때 다른 규칙을 일일이 수정하는 대신 !important를 추가하여 빠르게 원하는 결과를 확인
유틸리티 클래스	display: none !important; 처럼 특정 목적을 위한 유틸리티 클래스를 만들 때 사용해 어떤 상황에서든 항상 적용되도록 보장

 

⏬ CSS 선언 순서

<body>
  <p>this is red</p>
  <p class="blue red">this is blue</p>
</body>

p { color: blue; } 
p { color: red; } /* 우선 적용 */

.red { color: red; }
.blue { color: blue; } /* 우선 적용 */

 

📚 Ref.

https://developer.mozilla.org/ko/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content

https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Styling_basics/What_is_CSS

https://www.w3schools.com/html/html_css.asp

https://www.w3schools.com/cssref/trysel.php

https://inpa.tistory.com/entry/CSS-📚-css-기본-문법-정리

https://poiemaweb.com/css3-inheritance-cascading

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_cascade/Specificity

https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts