[기초]CSS란 무엇인가?

CSS(Cascading Style Sheets)는 웹페이지의 스타일과 레이아웃을 정의하는 데 사용되는 언어입니다. HTML이 웹페이지의 구조와 콘텐츠를 정의하는 데 사용된다면, CSS는 그 구조에 스타일을 적용해 웹페이지가 어떻게 보일지를 결정하는 역할을 합니다. CSS는 웹 개발의 핵심 요소 중 하나로, 웹페이지의 디자인과 사용자 경험을 개선하는 데 필수적입니다.

CSS의 기본 개념

선언 블록 (Declaration Block)
- CSS는 여러 개의 선언(declaration)으로 구성된 선언 블록을 통해 스타일을 정의합니다.
- 각 선언은 속성(property)과 그 속성에 할당된 값(value)으로 이루어집니다.
- 예: color: blue;는 텍스트 색상을 파란색으로 지정하는 선언입니다.

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

선택자 (Selector)
- CSS에서 스타일을 적용할 HTML 요소를 선택하는 부분입니다. 예를 들어, h1 선택자는 HTML 문서에서 모든 <h1> 요소에 스타일을 적용합니다.
- 선택자의 종류로는 태그 선택자, 클래스 선택자, 아이디 선택자, 속성 선택자 등이 있습니다.

.classname { /* 클래스 선택자 */
    color: red;
}

상속 (Inheritance)
- CSS의 중요한 특징 중 하나로, 부모 요소에 적용된 스타일이 자식 요소에 상속될 수 있습니다. 예를 들어, 부모 요소에 font-family가 설정되면 자식 요소도 같은 폰트를 사용하게 됩니다.
- 하지만 모든 속성이 상속되는 것은 아니며, 특정 속성만 상속됩니다. (예: 텍스트 관련 속성은 상속됨)

캐스케이딩 (Cascading)
- CSS에서 'Cascading'은 여러 스타일 규칙이 충돌할 때 어떤 규칙이 적용될지를 결정하는 방식입니다.
- 우선순위는 특이성(Specificity), 선언 순서(Declaration Order), 중요도(Importance)에 따라 결정됩니다.
- 일반적으로, 더 구체적인 선택자가 더 높은 우선순위를 가집니다.

박스 모델 (Box Model)
- CSS의 레이아웃을 이해하기 위해 반드시 알아야 할 개념입니다. 모든 HTML 요소는 박스 모델로 표시되며, 이 모델은 네 가지 주요 부분으로 구성됩니다:
  - Content: 실제 콘텐츠가 위치하는 부분
  - Padding: 콘텐츠와 테두리(Border) 사이의 간격
  - Border: 패딩과 마진 사이의 경계선
  - Margin: 요소와 다른 요소 사이의 외부 간격

div {
    width: 200px;
    padding: 10px;
    border: 1px solid black;
    margin: 20px;
}

미디어 쿼리 (Media Queries)
- 반응형 웹 디자인을 구현하기 위해 사용됩니다. 다른 디바이스(모바일, 태블릿, 데스크톱 등)에서 웹페이지가 어떻게 보일지를 정의하는 데 사용됩니다.
- 미디어 쿼리는 화면의 크기, 해상도, 색상 깊이 등에 따라 다른 스타일을 적용할 수 있습니다.

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

CSS 전처리기 (CSS Preprocessors)
- Sass, LESS와 같은 전처리기는 CSS를 더 효율적으로 작성하고 관리할 수 있게 해줍니다. 변수, 중첩 규칙, 함수 등을 사용할 수 있으며, 이를 컴파일하여 표준 CSS로 변환합니다.

CSS 사용 예시

<!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>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: center;
            background-color: #444;
            padding: 10px;
        }
        nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
        }
        main {
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>

<header>
    <h1>나의 웹사이트</h1>
</header>

<nav>
    <a href="#">홈</a>
    <a href="#">소개</a>
    <a href="#">연락처</a>
</nav>

<main>
    <h2>CSS 소개</h2>
    <p>CSS는 웹페이지의 스타일을 정의하는 언어입니다.</p>
</main>

<footer>
    &copy; 2024 나의 웹사이트
</footer>

</body>
</html>

CSS의 주요 기능 및 이점

디자인과 콘텐츠의 분리: CSS를 사용하면 콘텐츠(HTML)와 스타일을 분리하여 유지 보수성을 높일 수 있습니다.
재사용성: CSS는 동일한 스타일을 여러 HTML 요소에 적용할 수 있어 코드를 재사용하고 일관성을 유지하는 데 도움을 줍니다.
반응형 디자인: CSS 미디어 쿼리를 사용해 다양한 디바이스에서 적절하게 표시될 수 있는 웹페이지를 디자인할 수 있습니다.
브라우저 호환성: CSS는 대부분의 웹 브라우저에서 지원되며, 각 브라우저의 렌더링 엔진에 따라 스타일이 다르게 보일 수 있습니다.

CSS는 웹 개발에서 필수적인 기술이며, 기본적인 구조와 함께 다양한 기법들을 이해하고 활용하는 것이 중요합니다.

저작자표시 비영리 변경금지

'WebDev > HTML & CSS' 카테고리의 다른 글

[기초]CSS 선택자(가상 클래스, 가상 요소, 복합) (0)	2024.08.12
[기초]CSS 선택자(기본, 결합, 속성) (0)	2024.08.12
[기초]HTML 의미론적 태그(sematic) (0)	2024.08.10
[기초]HTML form, input 태그 (0)	2024.08.09
[기초]HTML 그룹화(div, span)와 속성(class, id) (0)	2024.08.08