본문 바로가기

ID와 Class

Modified Date: 2015-12-30

HTML의 ID와 class 이름은 해당 요소가 담게되는 콘텐츠, 기능에 따라 정한다.

  • 동일 단위(페이지, 모듈 등)를 두 사람 이상의 작업자가 협업할 경우에는 일반적인 명명 규칙에 따른다.
  • 사이트 구조와 규모에 따라 저장 디렉토리를 결정한다.

ID

  • layout이나 반복 사용되는 일반 콘텐츠 요소를 구성할 때 id를 사용한다.
  • 한 페이지에는 동일한 이름을 가진 ID가 두 번 등장할 수 없으므로, layout 구성 방식에 따라 추가적으로 사용할 수 있다. 이 경우 명명 규칙의 조어법에 따라 추가 영역의 ID를 지정한다.

layout용 예약 ID

  • wrap : 페이지 전체를 한 화면에 배치할 경우 사용
  • header : 일반적으로 로고, GNB 등이 들어가는 페이지 상단 영역
  • container : header, footer를 제외한 전체 콘텐츠 영역
  • content : 비주얼 등 개별적으로 관리되는 콘텐츠를 제외한 일반 콘텐츠 영역
  • aside: 주된 본문 콘텐츠 흐름과 관련없는 인접한 콘텐츠 영역
  • footer : 정책 링크, 관련 사이트 링크 등이 들어가는 하단 영역

일반 구성 요소 예약 ID

  • gnb : 전체 섹션을 기준으로 작성된 최상위 메뉴(Global Navigation Bar)
  • lnb: 해당 페이지의 서브 메뉴 (Local Navigation Bar)

콘텐츠 레벨 구분을 가지는 name을 가지고, 단순한 디자인 만의 차이라면, 다중 class나 감싸는 div 등으로 추가하는 방식을 사용한다.

CLASS

기타 컨텐츠 구성 요소 (CLASS)
범용적인, 일반 컨텐츠 및 레이아웃을 제외한 기타 컨텐츠 구성 시엔 class를 사용한다.

  • desc : 이미지 + 설명글로 이루어진 콘텐츠 타입
  • tabMenu : 탭메뉴
  • btnArea: 버튼영역의 묶음
  • btn: 버튼
  • filter : 검색 필터링
  • control: 시작/정지/이전/다음등 해당 영역의 기능버튼의 묶음
  • hGroup : 제목과 부가적인 요소가 함께 사용될 때 묶어주기 위한 용도
  • gallery : 이미지 갤러리
  • notFound : 검색결과나 리스트가 없을 경우
  • postList: 블로그 형식의 리스트

댓글 쓰기