1. CSS 기본 개념

CSS는 웹 페이지의 디자인과 레이아웃을 결정하는 스타일 시트 언어입니다. CSS는 HTML과 함께 사용되며, HTML로 작성된 웹 문서의 스타일을 지정하여 화면에 보여지는 방식을 조정할 수 있습니다.

1.1 CSS의 역할

CSS는 웹 페이지의 모양과 레이아웃을 지정하는 역할을 합니다. HTML은 웹 페이지의 구조와 내용을 정의하고, CSS는 이러한 구조와 내용에 스타일을 적용하여 시각적인 효과를 부여합니다. CSS를 사용하면 글꼴, 색상, 배경, 여백, 위치 등 다양한 스타일 요소를 설정할 수 있습니다.

1.2 CSS의 적용 방법

CSS는 다음과 같은 세 가지 방법으로 적용할 수 있습니다.

1.2.1. Inline 스타일

Inline 스타일은 HTML 요소의 inline 속성을 이용하여 직접 스타일을 지정하는 방법입니다. 이 방법은 해당 요소에만 스타일을 적용할 수 있으며, 스타일이 한 곳에 집중되지 않아 유지보수가 어렵습니다.

<p style="color: blue;">이 문장은 파란색으로 표시됩니다.</p>

1.2.2. Embedded 스타일 시트

Embedded 스타일 시트는 <style> 태그를 사용하여 HTML 문서 안에 CSS 코드를 작성하는 방법입니다. 이 방법은 한 HTML 문서에만 스타일을 적용할 수 있으며, 여러 요소에 동일한 스타일을 적용할 경우에는 반복적인 코드 작성이 필요합니다.

<style>
    p {
        color: blue;
    }
</style>

1.2.3. External 스타일 시트

External 스타일 시트는 별도의 .css 파일에 CSS 코드를 작성하고, HTML 문서에서 외부 파일을 연결하여 스타일을 적용하는 방법입니다. 이 방법은 여러 HTML 문서에서 동일한 스타일을 공유할 수 있으며, 관리가 용이하고 유지보수도 편리합니다.

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

1.3 CSS 규칙 구성

CSS는 다음과 같은 형식으로 규칙을 작성합니다.

선택자 {
    속성: 값;
}

선택자는 CSS로 스타일을 적용할 HTML 요소를 선택하는 역할을 합니다. 속성은 선택한 요소에 적용할 스타일의 종류를 정의하며, 값은 해당 스타일의 실제 값입니다. 여러 속성과 값은 세미콜론으로 구분하여 작성합니다.

h1 {
    color: red;
    font-size: 24px;
    background-color: yellow;
}

위의 예시에서는 h1 선택자를 사용하여 <h1> 태그에 스타일을 적용합니다. 해당 요소의 글자색을 빨간색, 글꼴 크기를 24픽셀, 배경색을 노란색으로 지정합니다.

CSS 기본 개념에 대한 간략한 설명을 마쳤습니다. 다음으로는 CSS 선택자와 속성에 대해 알아보겠습니다.

2. CSS 선택자와 속성

2.1. 선택자 (Selector)

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 다양한 선택자를 사용하여 특정 요소 또는 그룹의 요소를 선택할 수 있습니다.

2.1.1. 요소 선택자 (Element Selector)

요소 선택자는 HTML 요소의 이름을 사용하여 해당 요소를 선택하는 방법입니다. 요소 이름을 그대로 사용하면 됩니다.

h1 {
    color: blue;
}

위의 예제에서는 <h1> 태그를 선택하여 글자색을 파란색으로 지정합니다.

2.1.2. 클래스 선택자 (Class Selector)

클래스 선택자는 HTML 요소에 클래스를 지정하여 해당 클래스를 선택하는 방법입니다. 클래스 선택자는 .클래스이름 형식으로 작성합니다.

<p class="highlight">이 문장은 강조되어 표시됩니다.</p>

.highlight {
    background-color: yellow;
}

위의 예제에서는 highlight 클래스를 가지고 있는 <p> 태그를 선택하여 배경색을 노란색으로 지정합니다.

2.1.3. ID 선택자 (ID Selector)

ID 선택자는 HTML 요소에 고유한 ID를 지정하여 해당 ID를 선택하는 방법입니다. ID 선택자는 #아이디이름 형식으로 작성합니다.

<p id="intro">이 문단은 소개 내용입니다.</p>

#intro {
    font-weight: bold;
}

위의 예제에서는 intro ID를 가지고 있는 <p> 태그를 선택하여 글자를 굵게 지정합니다.

2.2. 속성 (Property)과 값 (Value)

CSS 속성은 스타일의 종류를 정의하며, 값은 해당 속성의 실제 값입니다. 속성과 값은 중괄호 내에 속성: 값; 형식으로 작성합니다.

h1 {
    color: blue;
}

위의 예제에서는 color 속성에 blue 값을 지정하여 <h1> 태그의 글자색을 파란색으로 지정합니다.

2.2.1. 일반 속성

일반적으로 사용되는 일반 속성은 다음과 같습니다.

color: 글자색을 지정합니다.
font-size: 글자 크기를 지정합니다.
background-color: 배경색을 지정합니다.
margin: 요소의 외부 여백을 지정합니다.
padding: 요소의 내부 여백을 지정합니다.
border: 테두리 스타일과 두께, 색상을 지정합니다.

2.2.2. 상속 속성

상속 속성은 부모 요소로부터 상속된 스타일을 가지는 속성입니다. 일부 속성은 자식 요소로 자동으로 상속될 수 있습니다.

font-family: 글꼴을 지정합니다.
font-weight: 글자 굵기를 지정합니다.
text-decoration: 텍스트의 장식을 지정합니다.
line-height: 줄 높이를 지정합니다.

CSS 선택자와 속성에 대한 간략한 설명을 마쳤습니다. 다음으로는 CSS 상속과 우선순위에 대해 알아보겠습니다.

3. CSS 상속과 우선순위

3.1. 상속 (Inheritance)

CSS에서 일부 속성은 부모 요소로부터 상속될 수 있습니다. 상속은 스타일을 더 효율적으로 적용할 수 있도록 도와줍니다.

일반적으로 텍스트와 관련된 속성이 상속됩니다. 부모 요소에 지정된 텍스트 속성은 자식 요소로도 상속되어 적용됩니다.

p {
    color: blue;
    font-size: 18px;
    font-family: Arial, sans-serif;
}

div {
    font-weight: bold;
}

위의 예제에서 <p> 요소는 부모 요소인 <body>로부터 color, font-size, font-family 속성을 상속받습니다. 따라서 <p> 요소의 글자색은 파란색이고, 글자 크기는 18픽셀이며, 글꼴은 Arial 또는 sans-serif로 설정됩니다.

그러나 <div> 요소는 부모 요소로부터 color, font-size, font-family 속성을 상속받지 않고, 별도로 font-weight 속성을 지정하여 글자를 굵게 설정합니다.

3.2. 우선순위 (Specificity)

CSS 규칙이 동일한 요소에 여러 번 적용될 경우, 적용 우선순위를 결정하기 위해 "특수성"과 "선언 순서"를 고려해야 합니다.

특수성은 선택자의 구체성을 나타냅니다. 구체성이 높은 선택자가 구체성이 낮은 선택자보다 우선순위가 높습니다.

일반적으로 우선순위는 다음과 같은 원칙에 따라 결정됩니다.

!important 규칙: !important 키워드를 사용한 속성은 다른 규칙보다 항상 우선순위가 높습니다.
인라인 스타일: HTML 요소에 직접 스타일을 지정한 경우 우선순위가 가장 높습니다.
ID 선택자: ID 선택자에 의해 적용된 스타일은 클래스 선택자나 요소 선택자에 의해 적용된 스타일보다 우선합니다.
클래스 선택자: 클래스 선택자에 의해 적용된 스타일은 요소 선택자에 의해 적용된 스타일보다 우선합니다.
요소 선택자: 일반적인 태그 선택자에 의해 적용된 스타일은 가장 우선순위가 낮습니다.

<p id="myParagraph" class="highlight">Hello, world!</p>

p {
    color: blue;
}

.highlight {
    color: red;
}

#myParagraph {
    color: green;
}

위의 예시에서는 <p> 요소에 id="myParagraph"와 class="highlight"가 지정되어 있습니다. 이 경우 #myParagraph 선택자의 스타일이 가장 우선순위가 높아서 글자색은 녹색으로 표시됩니다. 만약 #myParagraph 선택자의 스타일이 없었다면, .highlight 선택자의 스타일이 우선되어 글자색은 빨간색으로 표시됩니다. 마지막으로, 일반적인 p 태그의 선택자 스타일은 가장 우선순위가 낮아서 글자색은 파란색으로 표시됩니다.

CSS 상속과 우선순위에 대한 내용을 설명했습니다. 다음으로는 CSS 박스 모델에 대해 알아보겠습니다.

소소한 일상과 경제 정보를 드림

CSS(Cascading Style Sheets): 웹 페이지의 디자인과 레이아웃을 결정하는 스타일 시트 언어