코딩스쿨

CSS Syntax

1. CSS 문법 구조

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

기본 문법 구조:

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

선택자: 스타일을 적용할 HTML 요소를 지정합니다. 예를 들어, p 선택자는 <p> 태그에 스타일을 적용합니다.
속성: 스타일의 종류를 정의합니다. 예: color(색상), font-size(글꼴 크기).
값: 속성에 적용할 구체적인 값을 지정합니다. 예: red, 16px.

예시:

p {
    color: blue;
    font-size: 16px;
}

위의 코드는 <p> 태그의 텍스트 색상을 파란색으로, 글꼴 크기를 16픽셀로 설정합니다.

2. 선택자 (Selectors)

CSS 선택자는 스타일을 적용할 HTML 요소를 지정하는 역할을 합니다. 여러 가지 선택자를 사용할 수 있으며, 각각 특정 요소나 그룹에 스타일을 적용합니다.

2.1 요소 선택자 (Element Selector)

요소의 이름을 사용하여 스타일을 적용합니다. 모든 해당 HTML 요소에 동일한 스타일이 적용됩니다.

h1 {
    color: red;
}

2.2 클래스 선택자 (Class Selector)

HTML 요소에 클래스 이름을 부여한 후, 클래스 선택자를 사용해 해당 클래스가 적용된 모든 요소에 스타일을 적용할 수 있습니다. 클래스 선택자는 **.**로 시작합니다.

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

.intro {
    color: green;
}

2.3 ID 선택자 (ID Selector)

ID 선택자는 특정 ID가 지정된 요소에만 스타일을 적용합니다. ID는 페이지에서 고유해야 하며, 선택자는 **#**로 시작합니다.

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

#unique {
    font-weight: bold;
}

2.4 그룹 선택자 (Group Selector)

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

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

2.5 자식 선택자 (Child Selector)

특정 부모 요소의 직계 자식 요소에만 스타일을 적용합니다. > 기호를 사용합니다.

div > p {
    color: blue;
}

2.6 후손 선택자 (Descendant Selector)

특정 요소 내의 모든 하위 요소에 스타일을 적용합니다. 선택자 사이에 공백을 두어 사용합니다.

div p {
    color: red;
}

3. 선언 (Declarations)

선언은 **속성(property)**과 **값(value)**으로 구성되며, HTML 요소의 스타일을 정의합니다. 선언은 중괄호 {} 안에 포함되며, 각 선언은 세미콜론 ;으로 끝납니다.

예시:

p {
    color: blue;
    font-size: 18px;
    text-align: center;
}

속성: color, font-size, text-align 등.
값: 각 속성에 적용할 스타일 값을 나타냅니다. 예: blue, 18px, center.

속성과 값의 예시:

color: blue;: 텍스트의 색상을 파란색으로 지정합니다.
font-size: 18px;: 글꼴 크기를 18픽셀로 설정합니다.
text-align: center;: 텍스트를 중앙 정렬합니다.

4. CSS 주석 (Comments)

CSS에서 주석은 코드에 설명을 추가하거나 임시로 비활성화할 코드를 표시할 때 사용됩니다. 주석은 브라우저에서 무시되며, /* */ 사이에 작성합니다.

주석 예시:

/* 이 코드는 본문 텍스트의 색상을 지정합니다 */
body {
    color: black;
}

주석을 사용하면 CSS 코드의 가독성을 높이고, 유지 보수를 쉽게 할 수 있습니다.

5. 중요한 CSS 문법 규칙

대소문자 구분 : CSS는 기본적으로 대소문자를 구분하지 않지만, HTML 문서와 연동될 때 태그 이름, 클래스 이름, ID 이름은 대소문자를 구분할 수 있습니다.
선택자와 선언 사이의 중괄호 {} : 선택자와 선언 블록은 반드시 중괄호로 감싸야 합니다.
세미콜론 ; : 각 선언은 반드시 세미콜론으로 끝나야 합니다. 마지막 선언에도 세미콜론을 붙이는 것이 일반적인 관례입니다.
값의 단위 : px, em, rem 등 CSS에서 사용하는 다양한 단위는 값과 함께 사용되어야 합니다. 예를 들어, font-size: 16px;에서 16px은 글꼴 크기의 단위를 나타냅니다.

6. CSS 적용 방법

CSS는 HTML에 세 가지 방법으로 적용할 수 있습니다: 인라인(Inline), 내부(Internal), 외부(External) 스타일 시트.

인라인 스타일:

HTML 요소에 직접 스타일을 지정하는 방법입니다. style 속성을 사용합니다.

<p style="color: blue;">This is a blue paragraph.</p>

내부 스타일 시트:

HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 스타일을 정의합니다.

<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>

외부 스타일 시트:

별도의 .css 파일에 CSS 코드를 작성하고, HTML 파일에서 링크로 연결하는 방법입니다. 여러 HTML 파일에 동일한 스타일을 적용할 수 있습니다.

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

styles.css 파일:

p {
    color: red;
}

7. 상속 (Inheritance)

CSS 속성 중 일부는 부모 요소로부터 자식 요소에게 상속됩니다. 상속되는 속성으로는 color, font-family, line-height 등이 있으며, margin, padding 같은 레이아웃 속성은 상속되지 않습니다.

상속 예시:

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

위 예시에서는 div 요소의 color 속성이 p 요소에 상속되어 텍스트가 파란색으로 표시됩니다.

코딩 스쿨 CSS