[CSS 공부] CSS의 기본 문법

웹문서 작성이나 워드프레스의 글 작성 환경을 만들기 위해서 사용되는 CSS의 기본 문법에 대해서 알아보겠습니다. 먼저, CSS의 기본 문법에 대한 개요를 먼저 살펴보고, 그 구성요소인 선택자와 선언블록의 특징과 세부 내용을 살펴 보겠습니다.

CSS의 기본 문법 개요

CSS(Cascading Style Sheets)의 기본 문법은 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다.

선택자: 선택자는 HTML 요소를 선택하여 스타일을 적용할 대상을 지정합니다. 이는 HTML 태그 이름, 클래스, ID 등이 될 수 있습니다.

선언 블록: 선언 블록은 중괄호 {} 안에 위치하며 하나 이상의 선언(declaration)을 포함합니다. 각 선언은 속성(property)과 값(value)으로 구성되며 콜론(:)으로 구분합니다. 여러 개의 선언은 세미콜론(;)으로 분리합니다.

다음은 CSS 규칙의 기본적인 형식입니다:

예를 들어, 모든 <h1> 태그에 적용되는 CSS 규칙을 만들려면 다음과 같이 작성할 수 있습니다:

위 코드에서 h1이 선택자이며 color와 font-size가 속성이고 blue와 20px가 각각 해당 속성의 값입니다.

또한 CSS에서 클래스와 ID를 사용하여 특정 HTML 요소를 대상으로 할 수 있습니다. 클래스 선택자는 점(.), ID 선택자는 해시(#)로 시작합니다:

위 예제에서 .my-class 규칙은 “my-class”라는 클래스명을 가진 모든 요소에 배경색을 노란색으로 설정하고, #my-id 규칙은 “my-id”라는 아이디를 가진 요소의 글꼴 두께를 굵게 설정합니다.

CSS의 선택자의 특징

CSS에서 선택자(selector)는 스타일을 적용할 HTML 요소를 지정하는 데 사용됩니다. 다양한 유형의 선택자가 있으며, 각각은 서로 다른 방식으로 요소를 대상으로 합니다:

1. 요소(태그) 선택자: 이는 HTML 태그 이름에 해당하는 요소를 대상으로 합니다. 예를 들어, p 선택자는 모든 <p> 요소에 스타일을 적용합니다.
2. 클래스 선택자: 클래스 선택자는 특정 클래스 속성이 부여된 요소를 대상으로 합니다. 점(<code>.</code>) 기호와 클래스 이름 을 사용하여 지정합니다.
3. ID 선택자: ID 선택자는 특정 ID 속성이 부여된 단일 요소를 대상으로 합니다. 해시(<code>#</code>) 기호와 ID 이름 을 사용하여 지정합니다.
4. 속성 선택자: 속성 선택자는 특정 속성을 가진 모든 요소를 대상으로 합니다.
5. 가상 클래스 선택자 및 가상 요소 선택자: 가상 클래스와 가상 요소는 특별한 상태의 HTML요소나 페이지의 일부분에 스타일을 적용하려 할 때 사용됩니다.
6. 조합(복합) 선택자 : 여러 개의 선택자를 조합하거나 그룹화하여 더 복잡한 조건에 맞추거나 코드 중복을 줄일 수 있습니다.
7. 계층적인 선택자: 자식(child), 후손(descendant), 형제(sibling), 인접(adjacent sibling) 등과 같은 계층적 관계에 따라 HTML요소들을 대응할 수 있습니다.

선택기법은 매우 유연하며, 원하는 HTML요소들에 정확히 스타일 규칙들이 적용되도록 만드는 데 필수적입니다.

1. 요소(태그) 선택자

2. 클래스 선택자

3. ID 선택자

4. 속성 선택자

5. 가상 클래스 선택자 및 가상 요소 선택자

가상 클래스 선택자와 가상 요소 선택자는 특별한 상태의 HTML 요소나 페이지의 일부분에 스타일을 적용하려 할 때 사용됩니다.

1)가상 클래스 선택자

: 가상 클래스는 특정 상태에 있는 요소를 스타일링하기 위해 사용됩니다. 예를 들어, :hover 가상 클래스는 마우스 커서가 요소 위에 있을 때 그 요소에 스타일을 적용합니다.

이 외에도 많은 종류의 가상 클래스들이 있습니다. :active, :focus, :visited 등은 사용자의 인터랙션 상태를 나타내며, :first-child, :last-child, :nth-child() 등은 부모 내에서의 자식 요소 위치를 기반으로 합니다.

2)가상 요소 선택자

: 가상 요소는 실제 HTML 구조 내에서 존재하지 않지만 CSS를 통해 생성되어 스타일링할 수 있는 임시요소입니다. 이것들은 문서 내의 특정 부분(예 : 첫 글자, 첫 줄 등)에 스타일을 적용하는 데 사용됩니다.

위 코드에서 ::first-letter 는 <p> 태그의 첫 번째 글자에 대한 가상요소입니다.

이렇게 가상 클래스와 가상 요소 선택자는 웹페이지 디자인과 상호작용을 보다 세밀하게 제어할 수 있게 해줍니다.

6. 조합(복합) 선택자

: 여러 개의 선택자를 조합하여 더 복잡한 조건에 맞는 요소를 선택할 수 있습니다. 예를 들어, p.intro는 <p> 태그 중에서 “intro”라는 클래스가 부여된 요소만을 대상으로 합니다.

7. 계층적인 선택자

“계층적인 선택자”는 HTML 문서의 요소들 사이의 계층적 관계를 이용해 요소를 선택하는 방식을 말합니다. 주요 계층적 선택자에는 다음과 같은 것들이 있습니다:

1) 자식 선택자(>)

: 자식 선택자는 특정 요소의 직접적인 자식만을 대상으로 합니다.

2) 후손(하위) 선택자( )

: 후손 선택자는 특정 요소 아래의 모든 하위 요소를 대상으로 합니다.

3) 인접 형제 선택자(+)

: 인접 형제 선택자는 같은 부모를 가지고 바로 뒤따라 오는 형제 요소만을 대상으로 합니다.

5) 일반 형제 선택자(~)

: 일반 형제 선택자는 같은 부모를 가지고 뒤따라 오는 모든 형제 요소를 대상으로 합니다

이렇게 계층적인 관계에 따라 HTML요소들을 정확히 지정하여 스타일링할 수 있습니다.

▣ 선택자를 한 줄에 여러 개 열거하는 방법

CSS에서 여러 선택자를 한 줄에 열거하려면 쉼표(,)를 사용하면 됩니다. 이 방법을 사용하면 여러 선택자에 대해 동일한 스타일 규칙을 적용할 수 있습니다.

예를 들어, 만약 h1, h2, p 태그 모두에 동일한 폰트 색상을 적용하고 싶다면 다음과 같이 작성할 수 있습니다:

위의 CSS 코드는 h1, h2, 그리고 p 태그 모두에 파란색 폰트를 적용합니다.

이렇게 하면 중복 코드를 줄이고 효율적으로 스타일링을 할 수 있습니다.

CSS의 선택블록의 특징

CSS의 선언 블록(declaration block)은 선택한 HTML 요소에 적용할 스타일 규칙을 포함합니다. 이러한 선언 블록은 중괄호 {}로 감싸져 있으며, 그 안에는 하나 이상의 CSS 선언(declaration)이 들어갑니다.

선언 블록의 주요 특징은 다음과 같습니다:

1. 속성과 값: 각 선언은 속성(property)과 값(value)으로 구성됩니다. 속성은 스타일링하려는 CSS 속성을 나타내며, 값은 해당 속성에 적용하려는 값을 나타냅니다.
2. 구분자: 각 선언 내에서 속성과 값은 콜론(:)으로 구분되며, 여러 개의 선언들 사이는 세미콜론(;)으로 구분됩니다.
3. 다중 스타일링: 하나의 선택자에 대해 여러 가지 스타일을 동시에 지정할 수 있습니다. 이를 통해 복잡한 디자인 요구 사항도 충족시킬 수 있습니다.
4. 주석: CSS 주석(/* comment */)도 사용하여 코드를 설명하거나 임시로 코드를 비활성화 할 수 있습니다.
5. 우선 순위 및 상속: 같은 요소에 대해 여러 규칙이 존재하는 경우, CSS는 우선 순위(priority)와 상속(inheritance) 원칙을 따라 결정합니다.

예를 들어, 다음과 같이 작성된 CSS 코드에서 color와 font-size는 각각 blue와 20px라는 값을 가진 두 개의 선언입니다:

1. 속성과 값

CSS의 선언 블록 내부에서, ‘속성(property)’과 ‘값(value)’은 특정 스타일 규칙을 정의하는 데 사용됩니다.

• 속성(Property): 속성은 스타일링하려는 CSS 특징을 나타냅니다. 예를 들어, 요소의 배경색을 변경하려면 ‘background-color’ 속성을 사용하고, 폰트 크기를 변경하려면 ‘font-size’ 속성을 사용합니다.
• 값(Value): 값은 해당 속성에 적용할 구체적인 스펙이나 설정입니다. 예를 들어, ‘background-color’ 속성에는 색상 코드나 이름(예: red, #FF0000 등)이 값으로 들어갑니다. 마찬가지로, ‘font-size’에는 크기를 나타내는 단위(예: 16px, 1em 등)가 값으로 들어갑니다.

속성과 값은 콜론(:)으로 구분되며 각 선언은 세미콜론(;)으로 종료됩니다.

다음은 color와 font-size라는 두 개의 속성에 각각 blue와 20px라는 값을 지정하는 CSS 선언 블록의 예입니다:

여기서 color와 font-size가 속성이고, blue와 20px가 그들 respective values입니다. 이러한 방식으로 웹 페이지에서 사용하는 HTML 요소들에 다양한 스타일을 지정하고 조절할 수 있습니다.

2. 구분자

CSS 선언 블록 내에서 구분자는 주로 두 가지가 있습니다: 콜론(:)과 세미콜론(;). 이들은 각각 속성과 값의 구분, 그리고 다른 선언들 사이의 구분을 위해 사용됩니다.

• 콜론 (:): CSS에서 콜론은 속성(property)와 값(value)을 구분하는 역할을 합니다. 예를 들어, color: red;에서 color는 속성이고 red는 그에 대한 값입니다. 이 둘 사이를 콜론으로 구분하게 됩니다.
• 세미콜론 (;): CSS에서 세미콜론은 여러 개의 선언(declaration)을 분리하는 역할을 합니다. 각각의 선언은 하나의 속성과 그에 대한 값을 포함하며, 이러한 선언들 사이를 세미콜론으로 분리합니다. 예를 들어, color: red; font-size: 20px; 에서 첫 번째 선언은 color: red, 두 번째는 font-size: 20px 입니다.

따라서 아래와 같은 CSS 코드에서:

여기서 color와 blue, 그리고 font-size와 20px 사이에 있는 콜론(:)이 각각의 속성과 값을 연결해주며, 각각의 스타일 규칙 (즉, ‘선택자 {속성 : 값}’) 은 세미콜론(;)으로 종료되어 다음 규칙과 구분됩니다.

3. 다중 스타일링

CSS에서 ‘다중 스타일링’은 하나의 HTML 요소에 여러 개의 스타일 규칙을 적용하는 것을 의미합니다. 이는 CSS 선언 블록 내에서 여러 속성-값 쌍을 세미콜론(;)으로 구분하여 나열함으로써 이루어집니다.

예를 들어, <h1> 태그에 대해 글자 색상, 폰트 크기, 배경색 등 다양한 스타일을 동시에 지정하려면 다음과 같이 작성할 수 있습니다:

위의 코드에서 color, font-size, background-color는 각각 다른 속성들이며, 각각 blue, 20px, yellow라는 값을 가지고 있습니다. 이렇게 하나의 선택자(h1)에 대해 여러 개의 스타일 규칙(속성-값 쌍)을 선언함으로써 ‘다중 스타일링’이 가능해집니다.

단, 같은 속성에 대해 서로 다른 값을 지정하는 경우 CSS의 우선 순위와 상속 규칙에 따라 어떤 값이 실제로 적용될지 결정되므로 주의가 필요합니다.

4. 주석

CSS에서 주석은 코드의 특정 부분을 설명하거나, 나중에 참고할 수 있도록 만드는 데 사용됩니다. 주석은 브라우저에 의해 해석되지 않으므로, CSS 코드 내에서 어떤 부분이 어떤 목적으로 작성되었는지 설명하는 데 이용할 수 있습니다.

CSS에서 주석은 /*로 시작하고 */로 종료합니다. 예를 들어:

위와 같이 한 줄짜리 주석과 여러 줄에 걸친 주석을 작성할 수 있습니다.

주의할 점은, CSS 주석 내부에 HTML과 같은 다른 언어의 주석 형식(<!-- --> 등)을 사용하면 안된다는 것입니다. CSS는 오직 /* */ 형식의 주석만 인식합니다.

5. 우선 순위 및 상속

CSS에서 우선 순위와 상속은 스타일 규칙이 어떤 요소에 적용되는지 결정하는 중요한 원칙입니다.

• 우선 순위: CSS에서 여러 스타일 규칙이 동일한 요소에 적용될 수 있습니다. 이 경우, CSS는 다음과 같은 규칙으로 어떤 스타일을 적용할지 결정합니다:
  • 중요성(Importance): !important 키워드가 붙은 스타일이 일반적인 스타일보다 우선시 됩니다.
  • 특정성(Specificity): ID 선택자는 클래스 선택자보다, 클래스 선택자는 태그 선택자보다 높은 우선순위를 가집니다.
  • 소스 순서(Source Order): 나중에 선언된 규칙이 먼저 선언된 규칙을 덮어씁니다.
• 상속: 상속은 부모 요소의 일부 스타일(예: 글꼴, 색상 등)이 자식 요소로 전달되는 것을 의미합니다. 하지만 모든 속성이 상속되는 것은 아닙니다(예: 배경색, 패딩 등). inherit 키워드를 사용하면 명시적으로 속성을 상속받게 할 수 있습니다.

예를 들어, 아래의 코드에서 div의 자식인 p태그는 부모의 color 속성값(red)을 상속받아 사용하게 됩니다:

HTML 구조가 다음과 같다면,

여기서 <p> 태그 내의 텍스트 “Hello World”는 red색으로 보여집니다. 이처럼 부모 요소에서 지정된 일부 CSS 속성들은 자식 요소로 자동적으로 상속됩니다.

CSS의 우선 순위와 상속 원칙을 이해하고 확실하게 구분하는 것은 복잡한 웹 페이지를 정확히 스타일링하는 데 매우 중요합니다.