CSS 기초 문법은 선택자와 삽입 위치 공부로 해결!

by

CSS 기초 문법은 선택자에 대한 이해와 어느 위치에 삽입되는가에 초점을 맞추면 됩니다. 선택자를 지정하는 이유는 태그를 좀 더 세분화하여 선택해서 디자인 효과를 주기 위함입니다.

CSS 기초 구조

CSS는 크게 선택자영역과 속성 영역으로 분류됩니다. 문장이 끝나면 세미콜론 ;을 입력해줍니다.

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

선택자 영역

디자인할 HTML 태그 영역을 불러오는 행위를 선택자 지정이라고 말합니다. 예를 들어 <p> 태그를 선택자로 불러온다는 뜻은 <p> 태그에 디자인 효과를 삽입하기 위해서 따로 추출한다는 의미입니다.

속성 영역

선택자로 HTML 태그의 요소들을 불러오면, 중괄호 { }로 새로운 영역을 생성합니다. 이 영역에서 적용한 디자인 효과는 불러온 HTML 태그 요소에 적용됩니다.

문법의 의미는 <p> 태그를 선택자로 불러와서 color(글자색)를 red(빨강)로 만든다는 뜻입니다. color는 속성명이고 red는 속성값입니다.

p{color:red;}
<p>형을 잘 따르는 동생을 형광펜이라 부릅니다.</p>

줄바꿈

선택자 영역에는 여러 속성을 삽입할 수 있습니다.

<p> 태그의

글자색(color)을 파란색(blue),

배경색(background-color)을 검은색(black)

글 간격(padding)을 20px,

글자 크기(font-size)를 30px

로 늘리고 싶은 경우 어떻게 해야 할까요?

p{color:blue;background-color:black;padding:20px;font-size:30px;}

예시와 같이 길게 작성되어 가독성이 떨어집니다.

그럴 경우 아래 처럼 하나의 속성명과 속성값 및 세미콜론 ;으로 끝나는 문장을 한 줄씩 적으면 해결됩니다.

p{
  color:blue;
  background-color:black;
  padding:20px;
  font-size:30px;
}

CSS 삽입 위치

삽입 위치 구조

CSS의 삽입 위치는 태그 뒤에 직접 삽입하거나 외부 링크로 삽입하는 방법 등이 있습니다. 하지만 CSS 기초 문법에서 가장 핵심은 CSS는 <head> 태그의 <style> 태그 사이에 삽입된다는 것을 이해하는 것입니다.

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

<body> 태그 내부의 <p> 태그 사이에 데이터가 존재합니다. CSS는 <head> 태그 사이에서 삽입됩니다.

<style> 태그 사이에 변경을 원하는 <body> 태그 내에 위치하는 선택자를 불러옵니다. 예시의 경우 <p> 태그를 선택자로 불러왔습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p{
        color:red;
      }
    </style>
  </head>
  <body>
    <p>아기공룡 둘리가 졸업한 고등학교의 이름은 빙하타고입니다.</p>
  </body>
</html>

삽입 위치 예시

위에서 봤던 두 가지 예제도 CSS 코드가 HTML 문서에서 실제로 삽입된 위치는 <head> 태그 사이의 <style> 태그 사이에 위치합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p{
        color:red;
      }
    </style>
  </head>
  <body>
    <p>형을 잘 따르는 동생을 형광펜이라 부릅니다.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p{
        color:blue;
        background-color:black;
        padding:20px;
        font-size:30px;
      }
    </style>
  </head>
  <body>
    <p>반만 통통한 사람이 모여사는 지역은 반포동입니다.</p>
  </body>
</html>

CSS 선택자 예시

CSS에서는 <p> 태그와 같은 HTML 태그 이외에도 클래스, 아이디 등도 선택자로 지정할 수 있습니다. CSS의 탄생목적은 웹문서의 정보와 디자인의 분리에 있습니다.

따라서 정보에서 디자인 요소를 구분하기 위해서는 선택자의 종류도 다양할 수 밖에 없습니다. 몇 가지 선택자의 종류를 간단히 살펴보겠습니다.

태그 선택자

태그 선택자, 요소 선택자 또는 타입 선택자로 불립니다.

아래 예시에서는 <h1>태그 영역과 <pre> 태그 영역을 각각 선택자로 지정하여 배경색 또는 글자색을 변경했습니다.

h1{
   color:white;
   background-color:black;
}
pre{
    color:purple;
}
<!DOCTYPE html>
<html>
  <head>
  <style>
    h1{
      color:white;
      background-color:black;
    }
    pre{
      color:crimson;
      font-size:20px;
    }
    </style>
  </head>
  <body>
    <h1>석유가 유통되는 기간은?</h1>
      <pre>오일입니다.</pre>
  </body>
</html>

클래스 선택자

클래스 선택자는 클래스를 선택자로 지정합니다.

아래 예시에서는 <strong> 태그가 세 번 나옵니다. 하지만 하나의 strong 태그에만 CSS 선택자를 지정하고 싶다면 어떻게 해야 할까요?

<strong> 태그에 클래스를 지정하면 됩니다.

<strong class="fire1">"송구하옵니다."</strong>

지정된 클래스를 호출할 경우 마침표 . 를 클래스명 앞에 붙이면 됩니다.

클래스명이 fire1이므로 선택자는 .fire1로 정의됩니다.

.fire1{
       color:crimson;
       font-size:20px;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      .fire1{
        color:crimson;
        font-size:20px;
      }
    </style>
  </head>
  <body>
    <p><strong>투수</strong>가 <strong>사과</strong>를 할 때 하는 말은 <strong class="fire1">"송구하옵니다."</strong>입니다.</p>
  </body>
</html>

ID 선택자

id 선택자도 클래스 선택자와 마찬가지로 선택자로 지정할 수 있습니다. 차이점은 선택자로 지정시 샵 # 기호를 id값 앞에 붙입니다.

아래 예시에서는 id명이 babo이므로 선택자 지정시 #babo가 됩니다.

#babo{
      color:green;
      font-size:30px;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #babo{
        color:green;
        font-size:30px;
      }
    </style>
  </head>
  <body>
    <h1>대학생이 봄에 강한 이유는?</h1>
      <p><u id="babo">개강</u>하기 때문입니다.</p>
  </body>
</html>

CSS 선택자의 종류에는 그 밖에 그룹 선택자, 전체 선택자, 자식 선택자, 자손 선택자, 형제 자매 선택자 등이 있습니다.