ch2 - 2. id와 class

Index

Index 1. id와 class 특징 1.1 About id 1.2 About class 2. CSS에서 사용하는 방법 3. 우선순위

선택자 id와 class 태그는 HTML, CSS 그리고 Javascript까지 사용됩니다. HTML에서는 적어둔 텍스트의 속성을 정해주거나 CSS와 Javascript에서는 태그 별로 특징을 정해줄 때 사용하니 정말 광범위하게 쓰이죠. id와 class의 특징, css에서 사용하는 방법, 그리고 우선순위를 함께 살펴볼까요.

1. id와 class 특징

1.1 About id

id 속성은 페이지에 있는 해당 요소를 유일하게 식별할 때 씁니다. 주의 사항으로는 같은 페이지 안에 id는 단 한 개만 존재해야 합니다. 또 id 이름은 알파벳 또는 '_'으로 시작해야 합니다. id를 이용해 css와 javascript에서 활용할 수 있으니 중요한 속성 중 하나입니다. 개인 프로젝트일 경우는 상관없지만 여러 사람들과 같이 하는 프로젝트에서는 id이름을 최대한 직관적이고 간단명료하게 지어주는 것도 중요하답니다.

CODE


<head>
  <meta charset="utf-8">
  <title>id</title>
  <style type ="text/css">
    #blue { color : blue;}
  </style>
</head>
<body>
  <p>이 문단은 평범한 p태그를 사용하였습니다.</p>
  <p id = "blue">이 문단은 blue id를 부여하였습니다.</p>
</body>

실행화면

1.2 About class

class 속성은 또한 id 속성과 마찬가지로 해당 요소를 식별할 때 사용합니다. 그러나 id 속성은 한 페이지에 하나만 존재해야 하는 반면 class 속성은 한 페이지에 여러 개가 존재할 수 있기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별할 수 있습니다. class 속성도 id 속성과 마찬가지로 css와 javascript에서 활용할 수 있으니 아주 중요한 속성 중 하나입니다. class도 id와 마찬가지로 이름을 지을 때 직관적이고 간단명료하게 적어주는 것이 중요합니다.

CODE


<head>
  <meta charset="utf-8">
  <title>id</title>
  <style type ="text/css">
    .blue  { color          : blue;      }
    .bic   { font-size      : 20px;      }
    .upper { text-transform : uppercase; }
  </style>
</head>
<body>
  <p>이 문단은 평범한 p태그를 사용하였습니다.</p>
  <p class="blue">이 문단은 blue class를 부여하였습니다.</p>
  <p class="blue bic">이 문단은 blue, bic class를 부여하였습니다.</p>
  <p class="blue upper">이 문단은 blue, bic class를 부여하였습니다. </p>
</body>

실행화면

2. CSS에서 사용하는 방법

위에 간략한 코드에서도 유추가 가능하지만 조금 더 세분화하여 살펴보도록 하겠습니다.


<h1>h1의 첫번째</h1>
<h1>h1의 두번째</h1>
<h1>h1의 세번째</h1>
<h1>h1의 네번째</h1>

위 h1의 4개 전부를 빨간색으로 바꿔보도록 하겠습니다. CSS를 적용하는 3가지 방법 중에 우리는 HTML에 <style> 태그를 사용해서 css 속성을 넣어보도록 하겠습니다.


<head>
<style>
	h1 {color: red;}
</style>
</head>
<body>
	<h1>h1의 첫번째</h1>
	<h1>h1의 두번째</h1>
	<h1>h1의 세번째</h1>
	<h1>h1의 네번째</h1>
</body>

h1 모두가 빨간색으로 변한 것을 확인할 수 있습니다. 모두 h1 태그로 작성이 되어 있기 때문에 모두 다른 색을 주고 싶을 때에는 아래와 같이 특정 태그를 지정해야 합니다. 이럴 경우 사용하는 태그가 id입니다.


<head>
<style>
	h1 {color: red}
	#two {color: yellow}
	#three {color: green}
	#four {color: blue}
</style>
</head>
<body>
    <h1>h1의 첫번째</h1>
    <h1 id='two'>h1의 두번째</h1>
    <h1 id='three'>h1의 세번째</h1>
    <h1 id='four'>h1의 네번째</h1>
</body>

두번째 h1 id 이름을 'two', 세번째 h1 id 이름을 'three', 네번째 h1 id 이름을 'four'로 지정해주었습니다. 그리고 <style>에서 해당 id를 꾸며주기 위하여 two는 yellow, three는 green, four는 blue로 색상을 지정해주었습니다. 여기서 중요한 부분은 CSS에서 id를 불러올 때 #을 쓴다는 부분입니다.

이번에는 첫번째 / 두번째부터 네번째까지 색을 달리해보도록 하겠습니다.


<head>
<style>
	h1 {color: red}
	#two {color: green}
	#three {color: green}
	#four {color: green}
</style>
</head>
<body>
	<h1>h1의 첫번째</h1>
	<h1 id='two'>h1의 두번째</h1>
	<h1 id='three'>h1의 세번째</h1>
	<h1 id='four'>h1의 네번째</h1>
</body>

두번째부터 네번째까지 다 같은 색임에도 불구하고 하나하나 지정을 해주는 것은 비효율적입니다. 이럴 경우 사용하는 것이 class입니다. class는 묶어서 적용할 수 있습니다.


<head>
<style>
	h1 {color: red}
	.yellowgreen {color: yellowgreen}
</style>
</head>
<body>
	<h1>h1의 첫번째</h1>
	<h1 id='two' class='yellowgreen'>h1의 두번째</h1>
	<h1 id='three' class='yellowgreen'>h1의 세번째</h1>
	<h1 id='four' class='yellowgreen'>h1의 네번째</h1>
</body>

각 라인마다 class 명(yellowgreen)을 추가해 주었습니다. 그리고 <style>태그에 .yellowgreen을 불러 색상을 지정해주었죠. class는 id와 다르게, 점(.)을 class 명 앞에 두어야 합니다.

3. 우선순위

아래 코드와 같이 id와 class가 동시에 있을 경우에는 id > class > tag 순으로 style 적용이 됩니다.


<head>
<style>
	h1 {color: red}
	.yellowgreen {color: yellowgreen}
	#four {color: skyblue}
</style>
</head>
<body>
	<h1>h1의 첫번째</h1>
	<h1 id='two' class='yellowgreen'>h1의 두번째</h1>
	<h1 id='three' class='yellowgreen'>h1의 세번째</h1>
	<h1 id='four' class='yellowgreen'>h1의 네번째</h1>
</body>

h1의 두번째, 세번째, 네번째는 다 같은 class(yellowgreen)이었습니다. 여기서 마지막 h1에 id 속성을 style에서 변경해보았습니다. 다시 말해, h1의 네번째는 class의 style도, id의 style도 적용되었지만 우선순위에 따라 id의 속성인 skyblue색을 나타내게 되었습니다.

또한 동일한 속성을 여러 파일이나 class에서 다중으로 정의하고 있다면 가장 나중에 적용된 파일이나 class가 해당 속성을 덮어쓰게 됩니다. 아래와 같은 경우 one이라는 클래스가 one.css, two.css, three.css 모두 적용되어 있다고 하더라도 three.css가 적용됩니다.


<html>
<head>
  <link rel="stylesheet" href="/css/one.css">
  <link rel="stylesheet" href="/css/two.css">
  <link rel="stylesheet" href="/css/three.css">
</head>
<body>
  <h1 class="one">hello world</h1>
</body>
</html>