06.HTML 속성 id 와 class 의 차이, div와 span 요소 알아보기

06.HTML 속성 id 와 class 의 차이, div와 span 요소 알아보기

오늘은 HTML 에서 저번시간에 알아본 id속성과 함께 비슷한기능을 가진 class속성의 차이점에 대해서 알아보고 HTML태그 중 div 와 span 에 대해서 알아보겠습니다. 그리고 class, id에 이름을 지을땐 어떻게 짓는것이 좋은지 알아보겠습니다.

 

<div>,<span>

div와 span 은 어떠한 의미를 가지고 있지 않은 의미없는 요소 입니다. 

의미없는 요소는 필요에 따라 그룹을 생성하거나 css로 조절할 때 사용합니다. 앞으로 우리는 div와 span태그로 css 를 활용하여 HTML 을 작성하게 될것입니다.

div는 블럭요소, span은 인라인 요소 입니다.  화면전체를 사용하는 요소가 블럭요소이고 화면의 일부를 차지하는 요소가 인라인 요소 입니다. div 는 레이아웃을 잡는 용도로 많이 사용합니다. 

<div>
우리는 이깁니다.<span>승리합니다.</span>
</div>

class 속성

div 와 span 요소는 class 속성을 같이 사용할 수 있습니다. 물론 다른 요소들에게도 class 속성을 사용할 수 있습니다. class 속성은 원하는 이름을 넣고 css 로 class 에 지은 이름을 선택하여 사용할 수 있습니다. 

<style type="text/css">
.hi{
	color:red;
}
</style>

<span class="hi">빨강 안녕</span>

class와 id의 이름을 짓자

id 와 class는 css에서 스타일을 주는데 주로 사용합니다. 이들의 이름을 지을땐 규칙이 있습니다.

 

1. 첫 글자는 알파벳으로 시작해야합니다. 

2. 두 번째 글자부터 '-', '_' 을 사용할 수 있습니다.

3. 대소문자를 구분합니다.

 

class와 id의 차이

앞에서 본것과 같이 클래스와 이이디는 공통적인 부분들이 많습니다. 하지만 이둘은 각각 차이점이 있습니다.

아이디는 페이지에서 딱 한번만 선언 할 수 있습니다. 클래스는 여러번 선언하여 사용이 가능합니다. 

 <div class="ch" id="ch-1">
  <h2>안녕하세요</h2>
  <p>안녕하세요</p>
</div>
<div class="ch" id="ch-2">
  <h2>감사해요</h2>
  <p>감사해요</p>
</div>
<div class="ch" id="ch-3">
  <h2>잘있어요</h2>
  <p>끝.</p>
</div>

div요소는 모두 같은 클래스명을 가지고 있습니다. 그리고 각 div요소의 id 는 고유한 이름을 가지고 있습니다. 이렇게되면 아이디와 클래스에 기능을 달리주어 특별한 스타일을 만들 수 있습니다.

 

의미있게 이름을 지어보자

클래스와 아이디의 이름은 임의대로 입력할 수 있습니다. 하지만 이름은 나중에 다시 사용할 수 있으므로 누구나 알기 쉽게 지어주는 것이 좋습니다. 나중에 다시 손을 댈 일이 생길때 이름을 어렵게 지어놓으면 수정하기 어려워 질 수 있기 때문입니다. 

예를들어 메인메뉴가 빨강배경이라고 해서 'red-bar'라고 이름을 지어주면 후에 배경의 색상을 변경 할 수도 있기 때문에 문맥의 의미나 요소의 역할에 따라 'red-bar' 보단 'main-menu'라 지어주시면 더 알기 쉽습니다.

 

이렇게 오늘해본내용은 아이디와 클래스의 이름짓기, 차이점을 알아보았고 더불어 div, span 태그의 사용을 알아보았습니다. 다음시간에 조금더 유익한 내용을 들고 찾아오겠습니다. 감사합니다.