[CSS] CSS 규칙, id, class

HTML, CSS/CSS

[CSS] CSS 규칙, id, class

모든 것을 처음 시작하는 초짜 개발자 2023. 8. 26. 15:33

앞서 배웠던 방식의 경우, 여러 스타일을 적용하려면 코드가 보기가 힘들어지는 일이 생겼다.

이를 방지하기 위해 적용되는 것이 CSS 규칙이다.

<head>
  <style>
    tag{
      styletag: value;
    }
  </style>
</head>

CSS 규칙은 다음과 같이 적용된다.

head에 <style> 쓰고 값을 적용하고 싶은 태그이름에 {}를 치고 스타일 태그를 입력하면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      font-family: sans-serif;
      width: 480px;
      margin: 82px auto
    }

    #context {
      background-color: yellow;
    }
    .context2{
      color:red;
    }
  </style>
</head>
<body>
  <div id="context">
    아메리칸 항공 11편 테러 사건
  </div>
  <div class="context2">
    (영어: American Airlines Flight 11 Terror Incident, AA11)
  </div>
  <div class="context2">
    은 2001년 9월 11일 알카에다 소속 테러리스트 5명이 미국 국내선 항공편 '아메리칸 항공 11편'을 납치하여 9·11 테러를 일으킨 사건이다.[2] 이 테러의 주도범인 모하메드 아타는 항공기를 뉴욕 세계 무역 센터 북쪽 타워에 충돌시켰다. 그로 인해 탑승객 92명과 충돌 지점에 있던 사람 다수가 사망했다.[3] 이 항공기는 아메리칸 항공 소속 보잉 767-223ER 기종으로, 원래 미국 매사추세츠주 보스턴 로건 국제공항에서 이륙하여 캘리포니아주 로스앤젤레스 국제공항에 착륙할 예정이었던 아침 미국 대륙 횡단 항공편이었다.[4]
  </div>
</body>
</html>

위 코드를 보면 body 태그에 3가지 스타일이 적용되는 것을 확인할 수 있다. 하지만 본문 중 한 줄이나 여러 줄에만 스타일을 넣고 싶은 경우가 발생할 수 있다. 이 경우 div에 태그를 적용하면 모든 div에 영향을 미칠 것이다.

이를 해결하기 위한 방법이 id와 class이다. 원하는 범위를 감싸는 태그에 id와 class를 적고 이름을 짓고 id는 #id명, class는. class 명으로 style을 선언한다. 이러면 원하는 범위에 원하는 스타일을 적용시킬 수 있다.

단, id와 class의 차이는 id는 단 하나만 설정할 수 있고 class는 여러번 선언이 가능하다.

여러 class의 요소가 필요하면 class="클래스이름1 클래스이름2 클래스이름3" 처럼 쓸 수 있다.