[CSS] CSS란?

728x90

CSS 탐험하기: 웹 페이지를 더 아름답게!

안녕하세요, 디자인 애호가 여러분! 🎨 오늘은 웹 페이지의 외모를 담당하는 중요한 요소, CSS(Cascading Style Sheets)에 대해 알아보는 시간을 가집니다. CSS는 웹 페이지의 디자인과 레이아웃을 조절하며, 사용자 경험을 향상시키는데 큰 역할을 합니다.

1. CSS란?

CSS는 웹 페이지의 스타일링을 담당하는 언어입니다. HTML은 웹 페이지의 구조를 나타내며, CSS는 그 구조를 어떻게 보여줄지 디자인하는 역할을 합니다.

2. CSS를 웹 페이지에 적용하는 세 가지 방법

인라인 스타일: HTML 태그 내에 직접 스타일을 적용하는 방식입니다.

<p style="color: blue;">이 텍스트는 파란색입니다.</p>

내부 스타일시트: HTML 문서의 <head> 내에 <style> 태그를 이용해 스타일을 적용합니다.

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>이 텍스트는 빨간색입니다.</p>
</body>

외부 스타일시트: 별도의 .css 파일을 작성하고, HTML 문서에서 그 파일을 연결하여 스타일을 적용합니다.

<!-- HTML 문서 -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* styles.css 파일 */
p {
    color: green;
}

3. 주요 CSS 선택자와 속성

요소 선택자: 특정 HTML 요소를 직접 지정합니다.

p {
    font-size: 16px;
}

클래스 선택자: .클래스명 형태로 지정합니다. HTML에서 class 속성을 사용해 요소에 클래스를 할당할 수 있습니다.

.button {
    background-color: yellow;
}

ID 선택자: #ID명 형태로 지정합니다. HTML에서 id 속성을 사용해 요소에 ID를 할당할 수 있습니다.

#header {
    background-color: gray;
}

기타 선택자: 자식, 자손, 그룹, 가상 클래스 등 다양한 선택자들이 있습니다.

4. CSS의 힘: 상속과 우선순위

CSS의 이름에서 'Cascading'이라는 단어는 스타일의 "폭포수처럼 흐르는" 특성을 의미합니다. 상위 요소의 스타일이 하위 요소로 자연스럽게 흐르는 것이죠. 그러나 때로는 여러 스타일 규칙이 충돌할 수 있습니다. 이때는 CSS의 우선순위 규칙이 적용됩니다.

마치며

CSS는 웹 페이지의 외관을 꾸미는 강력한 도구입니다. 기본적인 선택자와 속성만으로도 다양한 디자인을 구현할 수 있습니다. 디자인은 사용자의 첫 인상을 결정짓기 때문에 중요합니다. 다음 포스트에서는 더 복잡한 CSS 기법을 함께 탐험하겠습니다. 계속해서 함께 해주세요! 🌈🎨🖌️