CSS 기초 강의 1편: CSS의 기본 개념과 문법

🔎 유용한 정보

1. CSS란?

CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 언어입니다. HTML이 웹 페이지의 구조와 콘텐츠를 나타낸다면, CSS는 이 콘텐츠의 색상, 폰트, 간격, 배경 등을 설정하여 웹 페이지의 시각적인 스타일을 지정합니다.

2. CSS 문법

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

선택자 {
    속성: 값;
}

예제

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

선택자: h1은 스타일을 적용할 HTML 요소를 선택합니다.
속성: color와 font-size는 스타일 속성입니다.
값: 각각 blue와 24px는 속성에 지정할 스타일 값입니다.

3. CSS 적용 방식

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

1) 인라인 스타일 (Inline Style)

HTML 태그의 style 속성에 직접 CSS 스타일을 지정합니다. 간단한 스타일을 설정할 때 유용하지만, 코드가 지저분해질 수 있어 많이 사용되지는 않습니다.

<h1 style="color: red; font-size: 24px;">인라인 스타일</h1>

2) 내부 스타일 시트 (Internal Style Sheet)

HTML 문서의 <head> 부분에 <style> 태그를 사용해 CSS를 작성합니다. 하나의 HTML 문서에서 스타일을 지정할 때 사용합니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
            font-size: 28px;
        }
    </style>
</head>
<body>
    <h1>내부 스타일 시트</h1>
</body>
</html>

3) 외부 스타일 시트 (External Style Sheet)

별도의 CSS 파일(style.css)을 만들어 <link> 태그로 HTML 파일에 연결합니다. 여러 HTML 파일에 동일한 스타일을 적용할 때 유용합니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>외부 스타일 시트</h1>
</body>
</html>

style.css 파일:

h1 {
    color: purple;
    font-size: 32px;
}

4. CSS 기본 스타일링

CSS로 가장 기본적인 스타일 요소인 색상과 글꼴 스타일을 설정하는 방법을 살펴보겠습니다.

1) 색상 지정 (color)

색상 이름: red, blue, green 등
HEX 코드: #FF0000 (빨강), #00FF00 (초록), #0000FF (파랑)
RGB: rgb(255, 0, 0) (빨강)
HSL: hsl(0, 100%, 50%) (빨강)

p {
    color: #3498db; /* HEX 코드로 파란색 설정 */
    background-color: rgb(240, 240, 240); /* RGB 코드로 배경색 설정 */
}

2) 글꼴 스타일링 (font-family, font-size, font-weight)

font-family: 글꼴을 설정합니다. 여러 글꼴을 지정할 수 있으며, 사용자의 시스템에 설치된 글꼴을 우선으로 사용합니다.
font-size: 글자의 크기를 지정합니다. px, %, em 단위를 사용합니다.
font-weight: 글자의 두께를 설정합니다. normal, bold, bolder, lighter 또는 100부터 900까지의 숫자로 지정할 수 있습니다.

h1 {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
}

5. CSS 예제

아래는 색상과 글꼴 스타일을 적용한 간단한 CSS 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS 기초 강의</h1>
    <p>CSS는 웹 페이지의 스타일을 지정하는 데 사용됩니다.</p>
</body>
</html>

style.css 파일:

/* h1 스타일 */
h1 {
    color: #2c3e50;
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

/* p 스타일 */
p {
    color: #34495e;
    font-size: 16px;
    line-height: 1.5;
    margin: 20px;
}

6. CSS 주석

CSS에서 주석은 /* 주석 내용 */ 형태로 작성하며, 주석은 브라우저에서 무시됩니다. 코드 설명이나 수정 기록을 남길 때 유용합니다.

/* h1 요소의 색상과 글꼴 스타일 */
h1 {
    color: #2c3e50;
    font-family: Arial, sans-serif;
}

요약

이번 강의에서는 CSS의 기본 개념과 문법, HTML에 CSS를 적용하는 다양한 방법을 배웠습니다. 또한 색상과 글꼴 스타일링을 사용하여 기본적인 CSS 스타일링을 적용해 보았습니다. 다음 강의에서는 CSS 선택자와 우선순위에 대해 알아보겠습니다.

'📁 [4] 개발자 정보 & 코드 노트 > CSS' 카테고리의 다른 글

CSS 기초 강의 6편: 반응형 웹 디자인과 미디어 쿼리 (0)	2024.11.21
CSS 기초 강의 5편: Grid 레이아웃을 활용한 2차원 레이아웃 구성하기 (0)	2024.11.20
CSS 기초 강의 4편: Flexbox를 사용한 유연한 레이아웃 구성하기 (0)	2024.11.19
CSS 기초 강의 3편: CSS 레이아웃 기초와 박스 모델 (0)	2024.11.18
CSS 기초 강의 2편: CSS 선택자와 우선순위 (1)	2024.11.17