NEXTAGORA

Posted: **Thu May 30, 2024 12:08 pm**

CSS의 구조와 문법에 대한 상세 가이드

CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 데 사용됩니다. 이 글에서는 CSS의 구조와 문법에 대해 상세히 설명하겠습니다. HTML과 함께 CSS를 사용하여 웹 페이지의 외형을 꾸미는 기초를 탄탄히 다질 수 있습니다.

1. CSS의 기본 구조

CSS는 선택자(selector)와 선언(declaration)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언은 그 요소에 적용할 스타일을 정의합니다.

Code: Select all

선택자 {
    속성: 값;
    속성: 값;
}

예를 들어, 모든 단락 요소(<p>)의 텍스트 색상을 빨간색으로 지정하는 CSS 코드는 다음과 같습니다.

Code: Select all

p {
    color: red;
}

2. CSS 적용 방법

CSS는 세 가지 방법으로 HTML에 적용할 수 있습니다.

인라인 스타일: 개별 HTML 요소에 직접 스타일을 지정합니다.
Code: Select all
```
<p style="color: red;">이것은 빨간색 텍스트입니다.</p>
```
내부 스타일 시트: HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 지정합니다.
Code: Select all
```
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
```

외부 스타일 시트: 별도의 CSS 파일을 만들고 HTML 문서에 링크합니다.

Code: Select all

<!-- HTML 문서의 head 섹션 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Code: Select all

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

3. CSS 선택자(Selectors)

CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 방법입니다. 다양한 선택자가 있습니다.

요소 선택자: 특정 HTML 요소를 선택합니다.
Code: Select all
```
p {
    color: blue;
}
```
클래스 선택자: 특정 클래스 속성을 가진 요소를 선택합니다. 클래스 선택자는 점(.)으로 시작합니다.
Code: Select all
```
.intro {
    font-size: 20px;
}
```
Code: Select all
```
<p class="intro">이것은 큰 글씨 크기의 단락입니다.</p>
```
아이디 선택자: 특정 아이디 속성을 가진 요소를 선택합니다. 아이디 선택자는 샵(#)으로 시작합니다.
Code: Select all
```
#main {
    background-color: yellow;
}
```
Code: Select all
```
<div id="main">이것은 노란색 배경을 가진 요소입니다.</div>
```

속성 선택자: 특정 속성을 가진 요소를 선택합니다.

Code: Select all

a[target="_blank"] {
    color: green;
}

Code: Select all

<a href="https://www.example.com" target="_blank">이것은 새 창에서 열리는 링크입니다.</a>

후손 선택자: 특정 요소의 모든 후손 요소를 선택합니다.
Code: Select all
```
div p {
    color: purple;
}
```
Code: Select all
```
<div>
    <p>이것은 보라색 텍스트입니다.</p>
</div>
```

4. CSS 박스 모델(Box Model)

CSS에서 모든 HTML 요소는 박스 모델로 구성됩니다. 박스 모델은 요소의 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 이루어져 있습니다.

Code: Select all

div {
    width: 300px;
    padding: 20px;
    border: 10px solid black;
    margin: 30px;
}

콘텐츠(Content): 요소의 실제 내용이 들어가는 영역입니다.
패딩(Padding): 콘텐츠와 테두리 사이의 여백입니다.
테두리(Border): 패딩과 마진 사이의 영역으로, 요소를 둘러싼 선입니다.
마진(Margin): 테두리와 인접 요소 사이의 여백입니다.

5. CSS 레이아웃(Layout)

CSS는 다양한 레이아웃 방법을 제공합니다.

디스플레이(Display) 속성: 요소의 박스 유형을 설정합니다.
Code: Select all
```
.block {
    display: block;
}

.inline {
    display: inline;
}
```
플렉스 박스(Flexbox): 1차원 레이아웃을 위한 강력한 도구입니다.
Code: Select all
```
.container {
    display: flex;
}

.item {
    flex: 1;
}
```

그리드(Grid): 2차원 레이아웃을 위한 도구입니다.

Code: Select all

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

6. CSS 색상(Color)

CSS에서 색상은 이름, HEX 값, RGB 값, RGBA 값 등으로 지정할 수 있습니다.

색상 이름</b]: 미리 정의된 색상 이름을 사용합니다.
Code: Select all
```
color: red;
```
HEX 값: 16진수 색상 코드를 사용합니다.
Code: Select all
```
color: #ff0000;
```
RGB 값: 빨강, 초록, 파랑 값으로 색상을 정의합니다.
Code: Select all
```
color: rgb(255, 0, 0);
```
RGBA 값: RGB 값에 알파(투명도) 값을 추가합니다.
Code: Select all
```
color: rgba(255, 0, 0, 0.5);
```

7. CSS 글꼴(Font) 및 텍스트(Text)

CSS를 사용하여 텍스트의 스타일을 지정할 수 있습니다.

글꼴 속성: 글꼴 가족, 크기, 스타일 등을 지정합니다.

Code: Select all

p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
}

텍스트 정렬(Text Alignment): 텍스트를 좌측, 중앙, 우측 또는 양쪽 정렬합니다.
Code: Select all
```
p {
    text-align: center;
}
```
텍스트 장식(Text Decoration): 텍스트에 밑줄, 윗줄, 취소선을 추가합니다.
Code: Select all
```
a {
    text-decoration: none;
}
```

결론

이 글에서는 CSS의 기본 구조와 문법에 대해 상세히 설명했습니다. CSS는 웹 페이지의 외형을 꾸미고 레이아웃을 잡는 데 필수적인 도구입니다. 다양한 선택자, 박스 모델, 레이아웃 기술을 익히고 실습하면서 CSS의 기초를 탄탄히 다지세요. 웹 디자인의 첫 걸음을 내딛는데 도움이 되기를 바랍니다.

NEXTAGORA

CSS에 대하여.araboza

CSS에 대하여.araboza