코딩스쿨

HTML CSS

1. HTML과 CSS란?

HTML(하이퍼텍스트 마크업 언어)은 웹 페이지의 구조를 정의하는 언어입니다. 하지만 HTML 자체는 웹 페이지의 시각적 스타일을 정의하지는 않습니다. CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어로, HTML로 만들어진 웹 페이지에 디자인을 적용하는 데 사용됩니다. CSS는 글꼴, 색상, 레이아웃, 배경 등 다양한 시각적 요소를 제어합니다.

2. CSS 적용 방법

2.1 인라인(In-line) 스타일

인라인 스타일은 HTML 요소의 style 속성 안에 직접 CSS 코드를 입력하는 방식입니다.

<p style="color: blue; font-size: 20px;">이 텍스트는 파란색이고 글자 크기는 20px입니다.</p>

2.2 내부(Internal) 스타일 시트

내부 스타일 시트는 <style> 태그를 사용하여 HTML 문서의 <head> 영역에 CSS를 정의하는 방식입니다.

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

<body>
    <p>이 텍스트는 녹색이고 글자 크기는 18px입니다.</p>
</body>

2.3 외부(External) 스타일 시트

외부 스타일 시트는 별도의 CSS 파일을 작성하여 여러 HTML 문서에서 공통적으로 스타일을 적용하는 방식입니다.

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

3. CSS 선택자

3.1 태그 선택자 (Tag Selector)

HTML 태그 이름을 사용하여 모든 해당 태그에 스타일을 적용합니다.

p {
    color: blue;
}

3.2 클래스 선택자 (Class Selector)

클래스 선택자는 HTML 요소의 class 속성을 참조하여 여러 요소에 동일한 스타일을 적용할 때 사용합니다.

<p class="highlight">이 텍스트는 강조 표시되었습니다.</p>

.highlight {
    background-color: yellow;
}

3.3 아이디 선택자 (ID Selector)

아이디 선택자는 HTML 요소의 id 속성을 참조하여 특정 요소에만 스타일을 적용합니다. 선택자 앞에 #를 붙여서 정의합니다.

<p id="main-text">이 텍스트는 메인 텍스트입니다.</p>

#main-text {
    color: green;
}

4. CSS의 속성

CSS는 다양한 속성을 사용하여 HTML 요소의 스타일을 정의합니다. 자주 사용하는 속성은 다음과 같습니다.

color: 텍스트의 색상을 정의합니다.
font-size: 텍스트의 크기를 정의합니다.
background-color: 요소의 배경 색상을 정의합니다.
margin: 요소의 외부 여백을 정의합니다.
padding: 요소의 내부 여백을 정의합니다.
border: 요소의 테두리를 정의합니다.

5. CSS의 상속(Inheritance)과 우선순위(Specificity)

CSS는 상속(Inheritance)과 우선순위(Specificity) 개념을 통해 어떤 스타일이 적용될지 결정합니다.

5.1 상속

일부 CSS 속성은 부모 요소로부터 자식 요소에게 상속됩니다.

<div style="color: blue;">
    <p>이 텍스트는 부모 요소로부터 파란색을 상속받습니다.</p>
</div>

5.2 우선순위

CSS는 여러 스타일이 적용될 때 우선순위를 적용합니다. 우선순위는 다음과 같은 순서로 결정됩니다:

인라인 스타일 (`style` 속성)
ID 선택자
클래스 선택자
태그 선택자

<p id="text" class="highlight" style="color: red;">이 텍스트는 빨간색입니다.</p>

6. CSS 반응형 디자인

CSS는 다양한 화면 크기에서 적절한 디자인을 제공하는 반응형 디자인을 지원합니다. 이를 위해 미디어 쿼리(Media Queries)를 사용합니다.

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

코딩 스쿨 HTML