CSS id / class(선택자)

id

id는 한box에 하나의 정의로 단, 하나의 태그 (id="")만 사용할 수 있다. 즉 로고, 상단메뉴. 하단덩보 같은 스타일을 정희할 때 id를 사용한다.

문법 
<ref id="refer"> ......</div>

class

class는 한페이지에 반복적으로 사용되는 스타일을 정의할 수 있다. 반복적으로 사용되는 스타일에는 class를 이용하여 정의하고, 그 내부에 세부 스타일을 정의할 때 id를 사용해주면 효과적이다.

문법 
<div class="refen"></div>

id와 class 이름 작성하는 규칙

  • 이름의 맨 처음은 숫자로 시작할 수 없습니다.
  • class명과 id명을 작성하는 표기법에는 여러가지가 있는데, 우리는 그 중에서 한가지 '카멜기법'에 대해서 알아보겠습니다. 이 기법은 낙타를 닮아 있어서 카멜기법이라고 합니다. wrap, item, box, container 등과 같은 단순한 클래스명은 그냥 소문자로 작성하면 되지만 코딩을 하다보면 더 많은 뜻을 담기위해 두 가지 이상의 키워드를 연속해서 쓸 때가 있습니다. 예를 들어, icon과 box를 합해서 icon box라고 적고 싶다면, 카멜기법에 의해 iconBox라고 적으면 됩니다. top과 menu의 의미를 동시에 담고 싶다면, 카멜기법에 의해 topMenu라고 적으면 됩니다. 이와같이 모두 소문자로 작성하되 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 써주는 기법을 카멜기법이라고 합니다.

    • 홈페이지 제작시 사용되는 네비게이션 클래스명

    GNB(Golbal Navication

    전체 사이트에서 공통적으로 사용되는 바 입니다.

    LNB(Local Navigation Bar)

    GNB에 속한 Manu Bar를 누를 경우, 소제목 형식으로 나오는 Sub Menu들을 의미합니다.

    SNB(Slde Navigation Bar

    메인메뉴(GNB)와 서브메뉴(LNB)를 제외한 사이드 메뉴바를 뜻합니다.

    FNB(Foot Navigation Bar

    하단영역(footer)에 있는 메뉴들을 카리킵니다.