코딩스쿨

CSS Introduction

1. CSS란 무엇인가?

*CSS(Cascading Style Sheets)**는 HTML 요소의 스타일을 지정하기 위해 사용되는 스타일 언어입니다. CSS는 색상, 글꼴, 레이아웃, 배경 이미지 등의 스타일을 지정하여 웹 페이지를 더 아름답고 사용자 친화적으로 만들 수 있습니다. 또한 HTML 구조와 디자인을 분리하여, 코드의 가독성을 높이고 유지 관리를 쉽게 할 수 있습니다.

2. CSS의 역할

CSS는 다음과 같은 역할을 합니다:

웹 페이지 스타일 지정: HTML은 콘텐츠의 구조를 정의하고, CSS는 해당 콘텐츠를 시각적으로 표현합니다.
레이아웃 관리: CSS는 웹 페이지의 레이아웃을 결정하며, 반응형 디자인을 구현할 때 사용됩니다.
웹 페이지의 일관성 유지: CSS 파일 하나로 여러 HTML 페이지에 동일한 스타일을 적용할 수 있어, 웹 사이트의 스타일을 일관되게 유지할 수 있습니다.
사용자 경험 향상: 시각적인 요소를 개선하여 사용자 경험을 향상시킵니다. 예를 들어, 버튼, 텍스트, 이미지 등의 스타일을 맞춤 설정하여 인터페이스를 더 직관적이고 보기 좋게 만듭니다.

3. CSS 적용 방법

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

3.1 인라인 스타일 (Inline CSS)

HTML 태그 내에서 style 속성을 사용하여 CSS를 직접 적용하는 방법입니다. 각 요소마다 스타일을 지정해야 하므로 유지 관리가 어렵습니다.

<p style="color: blue; font-size: 16px;">This is a paragraph.</p>

3.2 내부 스타일 시트 (Internal CSS)

HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 CSS를 작성하는 방법입니다. 같은 HTML 문서 내에서만 적용됩니다.

<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>

3.3 외부 스타일 시트 (External CSS)

가장 일반적으로 사용되는 방법으로, 별도의 .css 파일에 스타일을 작성하고, HTML 문서에서 링크하여 사용합니다. 여러 HTML 파일에서 같은 스타일을 공유할 수 있어 유지 관리가 쉽습니다.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

styles.css 파일:

p {
    color: red;
    font-size: 20px;
}

4. CSS 기본 문법

CSS는 **선택자(selector)**와 **선언(declaration)**으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하며, 선언은 **속성(property)**과 그에 대한 **값(value)**을 정의합니다.

선택자 {
    속성: 값;
}

예시:

p {
    color: blue;  /* 텍스트 색상을 파란색으로 */
    font-size: 16px;  /* 글꼴 크기를 16px로 */
}

p: 선택자로, <p> 태그에 스타일을 적용합니다.
color: blue;: 텍스트 색상을 파란색으로 설정합니다.
font-size: 16px;: 글꼴 크기를 16픽셀로 설정합니다.

5. CSS 선택자 (Selectors)

CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 방법입니다. 여러 가지 선택자가 있으며, 특정 요소에만 스타일을 지정할 수 있습니다.

5.1 요소 선택자

특정 HTML 요소에 스타일을 적용합니다.

p {
    color: green;
}

5.2 클래스 선택자

HTML 요소에 클래스 이름을 부여하고, 클래스 선택자를 통해 해당 요소에 스타일을 적용할 수 있습니다. 클래스 선택자는 **.**로 시작합니다.

<p class="intro">This is an introduction paragraph.</p>

.intro {
    color: blue;
}

5.3 ID 선택자

ID는 고유해야 하며, HTML 요소에 특정 ID를 부여하고, **#**로 시작하는 ID 선택자를 통해 해당 요소에 스타일을 적용합니다.

<p id="unique">This is a unique paragraph.</p>

#unique {
    color: red;
}

5.4 그룹 선택자

같은 스타일을 여러 요소에 적용하려면, 쉼표로 구분하여 여러 선택자를 그룹화할 수 있습니다.

h1, h2, h3 {
    color: purple;
    font-family: Arial, sans-serif;
}

5.5 자식 선택자

특정 부모 요소의 직계 자식 요소에 스타일을 적용합니다.

div > p {
    color: gray;
}

6. CSS 상속 (Inheritance)

CSS에서는 일부 스타일이 부모 요소에서 자식 요소로 상속됩니다. 예를 들어, 텍스트 색상(color)이나 폰트 스타일(font-family)과 같은 속성은 상속됩니다.

상속 예시:

<div style="color: blue;">
    <p>This text will be blue.</p>
</div>

위의 예시에서는 <div> 요소에 지정된 color: blue;가 자식 요소인 <p>에도 적용되어 텍스트가 파란색으로 표시됩니다.

7. CSS 박스 모델 (Box Model)

CSS 박스 모델은 HTML 요소가 웹 페이지에서 차지하는 영역을 정의하는 모델입니다. 각 요소는 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성됩니다.

콘텐츠: 요소의 실제 내용이 표시되는 부분입니다.
패딩: 콘텐츠와 테두리 사이의 공간입니다.
테두리: 콘텐츠와 패딩을 둘러싸는 선입니다.
마진: 요소와 다른 요소 사이의 바깥 공간입니다.

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

위 예시에서 div 요소는 200픽셀 너비의 콘텐츠를 가지고 있으며, 10픽셀의 패딩, 5픽셀의 테두리, 20픽셀의 마진을 가집니다.

8. 반응형 웹 디자인과 미디어 쿼리 (Media Queries)

반응형 웹 디자인은 다양한 화면 크기와 장치에 맞춰 웹 페이지의 레이아웃을 조정하는 기술입니다. 미디어 쿼리는 특정 조건에 따라 CSS를 적용할 수 있게 해주는 기능으로, 화면 크기, 해상도 등을 기준으로 조건을 설정합니다.

미디어 쿼리 예시:

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

위의 예시는 화면 너비가 600픽셀 이하일 때, 배경색을 lightblue로 변경합니다. 이를 통해 모바일 장치나 작은 화면에서도 최적화된 사용자 경험을 제공할 수 있습니다.

9. CSS Flexbox와 Grid 레이아웃

9.1 Flexbox

Flexbox는 1차원 레이아웃 모델로, 요소를 쉽게 배치하고 정렬하는 데 사용됩니다. 가로 또는 세로 축을 기준으로 아이템을 배치하며, 유연한 레이아웃을 만들 수 있습니다.

.container {
    display: flex;
    justify-content: space-around;
}

9.2 Grid

CSS Grid는 2차원 레이아웃 모델로, 행(row)과 열(column)을 기준으로 복잡한 레이아웃을 쉽게 만들 수 있습니다.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}

코딩 스쿨 CSS