CSS 문법 및 규칙

CSS 스타일 규칙은 선택자와 중괄호로 둘러싸인 속성-값 쌍으로 구성됩니다. 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하고, 중괄호 내에서는 해당 요소에 적용할 스타일 속성과 값을 정의합니다. 이제 스타일 규칙의 구성 요소에 대해 자세히 알아보겠습니다.

선택자 (Selectors):

CSS 선택자는 HTML 문서에서 특정 요소를 선택하여 스타일을 적용하는 데 사용되는 패턴입니다. 선택자는 요소의 태그 이름, 클래스, 아이디, 속성 등을 기반으로 요소를 식별합니다.

다양한 유형의 CSS 선택자가 있으며, 일부 일반적인 선택자 유형을 설명하고, 각각의 이해를 돕기 위한 예제 코드를 제공하겠습니다:

태그 선택자 (Tag Selector):

• <tagname>: 해당 태그 이름의 모든 요소를 선택합니다.

• 예제: 모든 <h1> 태그의 색상을 빨간색으로 지정합니다.

h1 {
  color: red;
}

클래스 선택자 (Class Selector):

• .classname: 해당 클래스를 가진 요소를 선택합니다.

• 예제: button 클래스를 가진 모든 요소의 배경색을 파란색으로 지정합니다.

.button {
  background-color: blue;
}

아이디 선택자 (ID Selector):

• #idname: 해당 아이디를 가진 요소를 선택합니다.

• 예제: header 아이디를 가진 요소의 글꼴 크기를 24px로 지정합니다.

#header {
  font-size: 24px;
}

자손 선택자 (Descendant Selector):

• ancestor descendant: ancestor(조상) 요소 내부의 descendant(하위) 요소를 선택합니다.

• 예제: <ul> 태그 내부의 모든 <li> 태그의 왼쪽 여백을 20px로 지정합니다.

ul li {
  margin-left: 20px;
}

자식 선택자 (Child Selector):

• parent > child: parent(부모) 요소의 직계 child(자식) 요소를 선택합니다.

• 예제: nav 클래스를 가진 요소의 직계 <a> 태그의 색상을 녹색으로 지정합니다.

.nav > a {
  color: green;
}

속성 선택자 (Attribute Selector):

• [attribute=value]: 지정된 속성과 값이 일치하는 요소를 선택합니다.

• 예제: type 속성이 "submit"인 <input> 요소의 배경색을 노란색으로 지정합니다.

input[type="submit"] {
  background-color: yellow;
}

가상 클래스 선택자 (Pseudo-class Selector):

• :pseudo-class: 특정 상태의 요소를 선택합니다. (예: :hover, :active)

• 예제: 마우스를 올렸을 때 <a> 태그의 색상을 빨간색으로 지정합니다.

a:hover {
  color: red;
}

 

스타일 속성과 값 (Properties and Values):

• 스타일 속성은 선택한 HTML 요소에 적용할 스타일의 특성을 지정합니다. 예를 들어, color, font-size, background-color, margin, padding 등의 속성이 있습니다.

• 속성에는 값을 할당하여 요소에 적용될 스타일을 결정합니다. 예를 들어, color 속성에는 텍스트 색상을 지정하는 값을 할당할 수 있습니다. 색상 값은 키워드(red, blue), RGB 값(rgb(255, 0, 0)), 16진수(#ff0000) 등으로 표현될 수 있습니다.

스타일 규칙의 구성

• 스타일 규칙은 선택자와 중괄호로 둘러싸인 속성과 값으로 이루어집니다. 여러 개의 속성과 값을 입력할 때는 세미콜론으로 해당 속성과 값 입력 종료를 알릴 수 있습니다.

아래 예시에서는 h1 선택자로 선택된 요소에 color, font-size, text-align 속성이 적용되며, 각각의 속성에는 해당하는 값을 할당합니다.

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

스타일 규칙을 사용하여 선택한 요소에 원하는 스타일을 적용할 수 있습니다. 속성과 값을 조합하여 텍스트 스타일, 배경, 여백, 레이아웃 등 다양한 스타일을 지정할 수 있습니다.

 

CSS 스타일링에서 많이 사용되는 속성들

1. 백그라운드 (Background):
   • background-color: 요소의 배경색을 지정합니다.

     .container {
       background-color: #f1f1f1;
     }
     

   • background-image: 요소의 배경에 이미지를 추가합니다.

     .header {
       background-image: url("image.jpg");
     }
     

2. 글꼴 (Typography):
   • font-family: 요소의 글꼴을 지정합니다.

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

   • font-size: 요소의 글꼴 크기를 지정합니다.

     p {
       font-size: 16px;
     }
     

3. 여백 (Spacing):
   • margin: 요소의 외부 여백을 지정합니다.

     .box {
       margin: 10px;
     }
     

   • padding: 요소의 내부 여백을 지정합니다.

     .content {
       padding: 20px;
     }
     

4. 테두리 (Border):
   • border-width: 요소의 테두리 두께를 지정합니다.

     .box {
       border-width: 2px;
     }
     

   • border-color: 요소의 테두리 색상을 지정합니다.

     .box {
       border-color: #000;
     }
     

5. 크기 (Size):
   • width: 요소의 너비를 지정합니다.

     .image {
       width: 200px;
     }
     

   • height: 요소의 높이를 지정합니다.

     .image {
       height: 150px;
     }
     

6. 위치 (Positioning):
   • position: 요소의 위치 지정 방법을 설정합니다.

     .box {
       position: relative;
     }
     

   • top, right, bottom, left: 요소의 위치를 조정합니다.

     .box {
       top: 20px;
       left: 10px;
     }
     

7. 애니메이션 (Animation):
   • animation-name: 요소에 적용할 애니메이션 이름을 지정합니다.

     .box {
       animation-name: slide

이외에도 CSS에서 사용되는 속성과 값들은 무수히 많은데요. 앞으로 다양한 스타일링 실습을 통해 CSS 속성들에 대해 배워봅시다. CSS 문법과 규칙에 대해 질문이 있으시면 아래 댓글을 남겨주세요!