[CSS] CSS 소개와 기본 구문

CSS(Cascading Style Sheets)는 HTML과 같은 마크업 언어로 작성된 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다. CSS는 웹 페이지를 아름답고 일관된 디자인으로 꾸미는 역할을 담당하며, 웹 개발에서 필수적인 기술 중 하나입니다.

---

1. CSS 소개

CSS는 HTML로 작성된 웹 페이지의 디자인, 레이아웃, 색상, 글꼴, 크기 등을 스타일링하는 역할을 합니다. HTML은 웹 페이지의 내용을 정의하고, CSS는 이 내용을 꾸미고 디자인하는 역할을 합니다. 이를 통해 웹 페이지의 모양과 느낌을 자유롭게 조절할 수 있습니다.

CSS는 다양한 선택자(selector)와 스타일 속성(property)을 사용하여 웹 페이지의 요소들을 선택하고 스타일을 적용합니다. 스타일 속성들은 색상, 크기, 여백, 배경 등 다양한 디자인 요소를 지정하는데 사용됩니다. CSS는 웹 페이지의 스타일을 외부 스타일 시트 파일로 작성하거나, HTML 문서 내부에 <style> 태그를 사용하여 적용할 수 있습니다.

---

2. CSS 기본 구문

CSS는 선택자와 중괄호로 둘러싸인 선언 블록으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 선택하는 역할을 하며, 중괄호 내에 스타일 속성과 값을 선언합니다.

/* 외부 스타일 시트 예제 */
h1 {
    color: blue;
    font-size: 24px;
}

p {
    color: #333;
    line-height: 1.5;
}

/* HTML 문서 내부에 스타일 적용 예제 */
<style>
    h1 {
        color: blue;
        font-size: 24px;
    }

    p {
        color: #333;
        line-height: 1.5;
    }
</style>

위의 예제에서 h1과 p는 선택자입니다. h1 선택자는 모든 <h1> 태그를, p 선택자는 모든 <p> 태그를 선택합니다. 중괄호 내에 선언된 스타일 속성들은 해당 선택자에 해당하는 요소들에게 적용됩니다.

스타일 속성은 속성명과 값으로 이루어져 있습니다. 속성명은 웹 요소의 스타일을 지정하는데 사용되며, 값은 해당 속성의 스타일을 어떻게 지정할지 결정합니다. 스타일 속성과 값은 콜론(:)으로 구분하고, 여러 속성들은 세미콜론(;)으로 구분합니다.

CSS는 선택자와 스타일 속성을 활용하여 웹 페이지의 모든 요소에 스타일을 적용할 수 있으며, 이를 통해 웹 페이지의 디자인과 레이아웃을 자유롭게 조절할 수 있습니다.

---

CSS의 소개와 기본 구문에 대해 설명해보았습니다. CSS를 사용하면 HTML로 작성된 웹 페이지를 멋지고 일관된 디자인으로 꾸밀 수 있으며, 웹 개발에서 필수적인 기술입니다. 계속해서 CSS의 다양한 기능과 고급 기술들을 익혀가며 더 멋진 웹 페이지를 개발해보시기 바랍니다!