CSS에 대해서 적용하기 전에!

CSS에 대해서 적용하기 전에!

2024. 10. 21. 23:08ㆍFront-End의 모든것/CSS

728x90

p {
    color: blue;         /* 텍스트 색상 */
    font-size: 16px;     /* 글자 크기 */
}

안녕하세요!

이전글에 CSS에 대한 개요 및 설명에 대해서

알아보았는데요,

이번엔 CSS를 실제로 시작하기 전에

적용방법 및 기본문법, 케스케이딩에 대해서 설명드리고자 합니다!

혼자서 혼자만의 사이트를 만들고 유지하기위해서

본인이 편한 방법을 사용하면 되는데,

프로젝트를 하여 협업을 하거나,

제작 후 운영을 다른분께 인계하거나 할때

지켜지면 누구나 유지운영하기 편하고 생산성도 높일 수 있다는 점 !

(내가 받을때 안지켜지면 골치가 아파요...)

ⓒ Photography by pexels - https://www.pexels.com/

1️⃣ CSS 적용 방법

CSS는 웹 페이지에 스타일을 적용하기 위한 다양한 방법을 제공합니다. 주로 3가지 방법으로 HTML에 CSS를 적용할 수 있습니다.

1.1 인라인 스타일 (Inline Style)

HTML 요소에 직접 style 속성을 사용하여 CSS를 적용하는 방식입니다.
장점: 개별 요소에 빠르게 스타일을 적용할 수 있습니다.
단점: 유지보수가 어렵고 코드가 복잡해집니다.

<p style="color: red; font-size: 20px;">이 텍스트는 빨간색입니다.</p>

1.2 내부 스타일 (Internal Style Sheet)

HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 CSS를 정의하는 방식입니다.
장점: HTML 파일 내에서 스타일을 관리할 수 있습니다.
단점: CSS가 HTML과 섞여있어 코드의 가독성이 떨어집니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내부 스타일 예시</title>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>이 텍스트는 파란색입니다.</p>
</body>
</html>

1.3 외부 스타일 (External Style Sheet)

별도의 .css 파일을 만들고, 이를 HTML 파일에 <link> 태그로 연결하는 방식입니다.
장점: CSS와 HTML을 분리하여 코드의 재사용성과 유지보수를 높일 수 있습니다.
단점: CSS 파일을 별도로 관리해야 합니다.

<index.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>외부 스타일 예시</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>이 텍스트는 외부 CSS로 스타일이 적용되었습니다.</p>
</body>
</html>

<styles.css>

p {
    color: green;
    font-size: 22px;
}

2️⃣ CSS 기본 문법

CSS의 기본 구조는 선택자(selector)와 선언(declaration)으로 이루어집니다.

2.1 선택자 (Selector)

CSS는 HTML 요소를 선택하여 스타일을 적용합니다. 이를 선택자라고 하며, 다양한 유형이 있습니다.

태그 선택자: 특정 HTML 태그에 스타일을 적용합니다.
- 예: h1 { color: red; }
클래스 선택자: 클래스 이름을 기반으로 여러 요소에 스타일을 적용할 수 있습니다.
- 예: .box { padding: 10px; }
ID 선택자: 고유한 ID를 가진 요소에 스타일을 적용합니다.
- 예: #header { background-color: black; }

2.2 선언 (Declaration)

선언은 CSS 속성(property)과 그에 대한 값(value)으로 이루어집니다. 여러 선언을 중괄호 {}로 묶어 적용할 수 있습니다.

p {
    color: blue;         /* 텍스트 색상 */
    font-size: 16px;     /* 글자 크기 */
}

3️⃣ 캐스케이딩(Cascading)

CSS의 캐스케이딩은 스타일이 충돌할 때 어떤 규칙이 적용되는지 정의하는 방식입니다. 캐스케이딩은 여러 소스에서 정의된 스타일들이 한 요소에 동시에 적용될 때 우선순위를 따져 최종 스타일을 결정하는 과정입니다.

3.1 우선순위 (Specificity)

우선순위는 CSS의 규칙 충돌 시 어느 스타일이 우선 적용되는지를 결정하는 규칙입니다. 기본적으로 다음 순서로 우선순위가 적용됩니다:

인라인 스타일: HTML 요소에 직접 작성한 스타일이 가장 우선합니다.
ID 선택자: ID 선택자가 정의된 스타일이 적용됩니다.
클래스 선택자: 클래스 선택자나 속성, 가상 클래스 등의 스타일이 그다음으로 적용됩니다.
태그 선택자: 태그 선택자가 적용된 스타일이 마지막으로 적용됩니다.
전역 선택자 및 상속: 모든 요소에 적용되는 스타일이나 부모 요소로부터 상속된 스타일이 가장 낮은 우선순위를 가집니다.

3.2 !important

!important 키워드를 사용하면 우선순위 규칙을 무시하고 해당 스타일을 강제로 적용할 수 있습니다. 하지만 남용하지 않는 것이 좋습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 우선순위 예시</title>
    <style>
        p { color: blue; }            /* 태그 선택자 */
        .important-text { color: green; } /* 클래스 선택자 */
        #unique-text { color: red; }  /* ID 선택자 */
    </style>
</head>
<body>
    <p id="unique-text" class="important-text" style="color: purple;">이 텍스트의 색상은?</p>
</body>
</html>

결과: 이 경우 인라인 스타일의 color: purple;이 적용됩니다. 인라인 스타일은 가장 높은 우선순위를 가지기 때문입니다.

4️⃣ 우선순위 계산 방법 (Specificity Calculation)

우선순위는 다음과 같이 계산됩니다:

인라인 스타일: (1000)
ID 선택자: (100)
클래스, 속성, 가상 클래스 선택자: (10)
태그 선택자, 가상 요소 선택자: (1)
전역 선택자 및 상속: (0)

/* 우선순위 계산 예시 */
#header .menu li a { color: red; } /* (100 + 10 + 1 + 1) = 112 */
.menu-item { color: blue; }        /* (10) */

#header .menu li a는 우선순위가 112이고, .menu-item은 우선순위가 10이므로 #header .menu li a의 스타일이 우선 적용됩니다.

5️⃣ 캐스케이딩 및 상속

캐스케이딩: 여러 CSS 선언이 동일한 요소에 적용될 때 우선순위에 따라 최종 스타일이 결정됩니다.
상속: 일부 CSS 속성은 부모 요소의 스타일을 자식 요소가 상속받습니다. 예를 들어, 글꼴과 텍스트 색상은 기본적으로 상속됩니다.

/* 상속 예시 */
body {
    font-family: Arial, sans-serif;
    color: black;
}

h1 {
    color: red; /* h1의 색상은 상속되지 않고, 명시적으로 정의됨 */
}

p {
    font-size: 18px; /* 상속되지 않고 명시적으로 정의됨 */
}

이처럼 CSS는 선택자와 선언을 통해 스타일을 정의하고,

캐스케이딩과 우선순위를 통해 최종 스타일을 결정합니다.

이를 잘 이해하면 효율적으로 CSS를 사용할 수 있습니다.

728x90

'Front-End의 모든것 > CSS' 카테고리의 다른 글

CSS 전처리기가 뭐죠? (1)	2024.11.06
Javascript없는 CSS Animation! (0)	2024.10.29
CSS Property 공부하는법! (6)	2024.10.25
CSS 선택자(CSS Selectors)란? (0)	2024.10.24
CSS란? (2)	2024.10.21

모두다레벨업