본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

의미없는 요소 div와 span 그리고 class 속성

최초 작성일
최종 수정일
이번 시간에는...
HTML 태그 중 의미없는 요소인 div와 span에 대해 알아봅니다. 또한 이 요소들을 잘 활용할 수 있는 클래스 속성(class)에 대해 알아보면서, class와 id 속성의 차이점은 무엇인지, 네이밍, 이름짓기는 어떻게 하는것이 좋은지 알아봅니다.

의미 없는 요소

그 동안 살펴보았던 요소들은 모두 각각의 의미 있는 요소들이었습니다. 그리고 물론 여러분들에게 의미 있는 마크 업을 하라고 말씀 드렸고요.

하지만, 이번에 살펴볼 div, span 요소는 아무런 의미를 가지고 있지 않습니다.

이 의미 없는 요소는 필요에 따라 그룹을 만들거나, css로 조절하기 위해서 사용합니다. 아마도 여러분들도 마크 업을 하면서 앞으로 제일 많이 사용하게 될 것입니다.

div는 블럭 요소이고, span은 인라인 요소입니다. 둘 다 자기자신을 중첩할 수 있습니다. 특히, div는 레이아웃 잡는 용도로 많이 쓰기 때문에 많이 중첩됩니다. 다음은 예제입니다.

클래스(class) 속성

div와 span 요소는 보통 class 속성을 같이 사용합니다. 이 class 속성은 원하는 이름을 넣고 css에서 그 class 이름을 선택자로 사용합니다. 아래 예제와 같은 방식입니다.

참고로 class 속성은 아이디(id) 속성과 같이 모든 요소에 사용 가능한 속성입니다.

또한 class 이름은 한 요소에 여러 개를 넣을 수 있습니다. 값은 띄어쓰기로 구분합니다.

클래스(class)와 아이디(id)의 네이밍 (이름 짓기)

id 속성은 지난 a(anchor) 요소를 살펴볼 때 살펴보았습니다. 이 아이디와 클래스는 CSS에서 스타일을 주는데 자주 사용하기 때문에, 때로는 둘의 차이를 헷갈리고 사용하는 경우가 종종 있습니다. 이 둘을 비교하면서 좀 더 살펴보도록 하겠습니다.

일단 클래스와 아이디 쓸 수 있는 이름에는 규칙이 있습니다.

  • 첫 글자는 알파벳으로 시작해야 합니다. (a~z 또는 A~Z)
  • 두 번째부터는 알파벳과 숫자 그리고 '-' 또는 '_'가 사용될 수 있습니다.
  • 대소문자를 구분합니다.
  • 가능한 예시 : abc, Hello, button-2, simpleText, mark_test 등등
  • 잘못된 예시 : 2rd, $uper, ch#1, -top, ^^, rec*3 등등

표기 방식

위의 규칙을 준수하기만 하면 어떠한 이름을 넣으셔도 상관없습니다. 다만, 'main head' 처럼 띄어쓰기를 사용하면 각각 'main', 'head'의 두 개의 클래스로 인식하기 때문에, 띄어쓰기를 대체하는 표현이 필요합니다.

예를 들어 'main head'라는 이름을 'mainHead'라고 표현할 수 있습니다. 띄어쓰기가 일어나는 부분을 대문자로 대체하는 방식인데요, 위와 같은 표현방식을 낙타의 등에 비유하여 낙타 표기법이라고도 합니다. 주로 이러한 네이밍은 '자바스크립트'에서 많이 사용합니다. 또 다른 방식은 이름을 짓는데 있어서 허용되는 특수 문자는 '-'와 '_' 뿐이기 때문에, 'main-head' 또는 'main_head'의 방식으로 표현 될 수 있습니다.

이 중에 어떤 방식을 사용해도 상관 없으나, 웬만하면 여러 방식을 섞어 쓰지 말고, 한가지 방식으로 통일하는 게 나중에 관리하는데 있어서 좋습니다.

그래도 이 중에 가장 추천 하는 방법은 '-'를 사용하여, 'main-head'와 같이 쓰는 방법입니다. 일단 이렇게 씀으로써 자바스크립트와 쉽게 구분이 됩니다. 또한 보통 에디터에서 'Ctrl' + 좌우 방향키를 이용하면 커서가 단어 별로 이동이 되는데, 이러한 이동을 하면서 수정하기에도 적합합니다. 'mainHead'와 같은 방식은 'mainHead'를 한 단어로 인식하기 때문에, 커서가 'Head'에 멈추지 않습니다. '_'의 경우는 커서가 잘 이동하지만, 자판 상 Shift 키를 누른 채로 '-'를 눌러야 하기 때문에 보통 '-'를 사용한 표기법을 많이 사용합니다.

그리고 '-'나 '_'를 사용하며 표기할 경우, 소문자와 대문자를 섞어서 사용하면 CSS로 작업할 때 오타 같은 혼란을 야기할 수 있습니다. '-','_'을 사용할 경우 웬만하면 소문자로만 작성하는 것이 좋습니다.

의미를 가진 이름 짓기

클래스와 아이디 이름은 여러분의 임의대로 넣습니다. 그렇지만, 이 이름은 다시 봤을 때 알기 쉽게 적어주는 것이 좋습니다. 예를 들어 'side-navigation'식의 이름은 괜찮습니다. 너무 길다면 'side-nav' 정도도 아주 좋습니다. 하지만 'sn'이렇게 적는다면 나중에 다시 소스를 봤을 때, 수정하기 힘들어 집니다.

또한, 클래스 속성이 주로 CSS로 스타일을 주기 위해 넣기 때문에 외형을 따라 이름을 짓는 경우가 많지만, 이 역시 지양해야 하는 방식입니다.

예를 들어 여러분 홈페이지의 메인 메뉴 막대에 클래스 명을 부여한다고 합시다. 그런데 만약 메인 메뉴가 검은 배경이라고 'black-bar'라는 식의 이름을 주는 것은 별로 좋지 않습니다. 왜냐하면, 그 메인 메뉴 배경을 나중에 하얀색으로 바꿀 수도 있기 때문입니다. 웹에서 약간 식의 디자인 개편이 일어나는 것은 비일비재한 일입니다. 디자인은 CSS에서 바꿔버리기 때문에 '하얀 메뉴' 임에도 클래스 명은 '검은색 막대'가 되는 것 입니다.

이렇기 때문에 꼭 강제하는 것은 아니지만, 클래스 명과 아이디 명은 문맥의 의미나 요소의 역할에 따라 지어주는 것이 좋습니다. 좀 전의 메인 메뉴막대는 'black-bar'보다는 'main-menu'라는 식의 이름이 더 좋습니다.

클래스와 아이디의 차이

앞서 살펴본 이름 짓는 방식들은 클래스와 아이디 둘 다 공통적인 내용입니다. 하지만, 클래스와 아이디 둘은 엄연히 차이가 있고 그에 따라 이름 짓는 것도 조금 다릅니다.

일단, 아이디(id)는 지난 강의에서 살펴 보았듯이 페이지에서 딱 한번만 선언 가능합니다. 어떤 한 요소에서 'main-menu'라는 아이디 명을 사용한다면, 페이지 내 다른 요소들은 절대로 'main-menu'라는 아이디를 사용할 수 없습니다. 그래야 a 요소로 해당 아이디 요소에 이동이 가능합니다.

반면, 클래스는 여러 번 사용이 가능합니다. 그렇기 때문에 클래스는 이름을 좀 더 범용적으로 짓고, 아이디는 이름을 좀 더 특수하게 짓습니다. 예를 들어 다음의 코드를 봐주세요, 소설의 장을(Chapter) 작성했습니다.

위의 코드를 보면 각 장을 div로 감싸고, 그 div에 'chapter'라는 클래스를 주었습니다. 세 div 요소 모두 같은 클래스 명을 가지고 있고요. 하지만 각 div 요소의 id는 고유한 이름을 가지고 있습니다. 이를 통해서 해당 장으로 이동도 가능하고, 해당 장만의 특별한 스타일을 줄 수도 있습니다.

또한, 클래스는 심지어 한 요소에 여러 개의 클래스 이름을 지정해 줄 수 있습니다. (아이디는 오직 한 개의 이름만 넣을 수 있습니다.) 띄어 쓰기를 이용해서 "example example-fruit" 라고 값을 넣게되면 이 요소는 "example","example-fruit" 각 두 개의 클래스 이름을 동시에 가진 요소가 됩니다. 이렇게 여러 개의 클래스 이름을 이용한 방식은 CSS 작업을 보다 쉽고, 간편하게 작업할 수 있도록 도와줍니다.

요점 정리
  • div 요소는 의미없는 블럭 요소.
  • span 요소는 의미없는 인라인 요소.
  • class 속성은 모든 요소에 넣을 수 있는 속성으로, 주로 CSS로 스타일을 줄 때 사용
  • id값은 페이지 내 단 한 번만 선언 가능하나, class 값은 여러 번 선언 가능
  • class 값은 띄어쓰기를 통해서 여러 개의 값 지정 가능
  • class와 id 값의 이름은 무조건 짧게하기 보다는 알기 쉽도록 짓고, 의미에 맞게 넣는 것이 적합
  • id는 페이지 내 단 한 번만 선언 가능하여, 유일한 이름을 짓는 것이 적합

이 글이 유용하셨다면 친구들에게 공유 해주세요.