css의 class 이름을 어떻게 지어야 하며 어떨때 써야하는지 고민이 많이 될것이다.
수업을 마치고 클래스 작명과 구분 방법에 대하여 공부 겸 정리를 하려고 한다.
섹션 구분
가장 많이 헷갈리는 div, article, section 구분에 대해 먼저 시작하려고 한다.
div
- HTML div tag는 플로우 컨텐츠를 위한 통용 컨테이너다. CSS로 꾸미기 전에는 컨텐츠나 레이아웃에 어떤 영향도 주지 않는다.
<div>요소는 "순수" 컨테이너로서 아무것도 표현하지 않는다. 대신 다른 요소 여럿을 묶어 class, id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시하는 등의 용도로 사용할 수 있다.<div>는 division의 약자입니다. 별도의 의미가 없고, 그냥 정말 어떤 내용이든 담을 수 있는 박스라고 생각하면 된다.- 사용방법은
<div>요소는 의미를 가진 다른 요소 (article,section,nav등)가 적절하지 않을 때만 사용해야 한다.
article
- HTML
<article>tag는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. - 사용 예) 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다.
- 하나의 문서가 여러개의
<article>을 가질 수 있다. - 사용 예) 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이
<article>요소가 되며, 그 안에는 또 여러 개의<section>이 존재할 수 있다. - 사용방법은 각각의
<article>을 식별할 수단이 필요하다. 주로 제목(<h1>~<h6>)요소를<article>의 자식으로 포함하는 방법을 사용한다.
<article>요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타낸다.
사용 예) 블로그 글의 댓글은, 글을 나타내는<article>요소 안에 중첩한<article>로 나타낼 수 있다.
<article>요소의 작성 일자와 시간은<time>요소의 datatime 속성을 이용하여 설명할 수 있다.
section
-
HTML의
<section>요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통<section>은 제목을 포함하지만, 항상 그런 것은 아니다. -
사용 방법은 각각의
<section>을 식별할 수단이 필요하다. 주로 제목(<h1>~<h6>) 요소를<section>의 자식으로 포함하는 방법을 사용한다.
요소의 컨텐츠를 따로 구분해야 할 필요가 있으면<article>요소를 고려한다.
<section>요소를 일반 컨테이너로 사용하면 안 된다. 특히 단순히 스타일링이 목적이라면<div>요소를 사용하는 것이 좋다. 대게 문서 요약에 해당 구획이 논리적으로 나타나야 하면<section>이 좋은 선택이다.
✅ 예시 👎
<div>
<p>시도할 횟수를 입력해주세요.</p>
<input name="racingCount" placeholder="10" />
<button>확인</button>
</div>✅ 예시 👍
<section>
<h2 hidden>시도할 횟수 입력</h2>
<label for="racingCount">시도할 횟수를 입력해주세요.</label>
<input type="number" id="racingCount" name="racingCount" placeholder="10" />
<button>확인</button>
</section>상위/하위요소 구분
크게 상위요소로는
header/section/gnb/footer가 있고,
그 아래로는group→area→wrap→box순으로 정렬을 할 수 있다.
✅옳은 예시
group → area → wrap → box (⭕)
<div class="group">
<div class="area">
<div class="wrap">
<div class="box">
<p>안녕</p>
</div>
</div>
</div>
</div>✅틀린 예시
group → area → box → wrap (❌)
<div class="group">
<div class="area">
<div class="box"> 👎
<div class="wrap">👎
<p>안녕</p>
</div>
</div>
</div>
</div>
box는wrap보다 작은 크기의 클래스명으로,
wrap보다 상위의 클래스로 존재하면 안된다.
section 태그 작명
section 태그의 클래스명은 대게 아래와 같이 짓고
000에는 숫자나 간략하게 설명가능한 콘텐츠 이름을 집어넣는다.
- sc-000
- main-000
- section1,2,
- main1,2,3
