• 목록

아티클(Article) 용어 정리

아티클은 HTML5에서 도입된 <article> 태그를 의미하며, 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분해 재사용할 수 있는 보도물이나 콘텐츠 블록을 말합니다.

• 독립성: 그 자체만으로도 완벽한 내용을 담고 있어야 하며, 다른 곳에 떼어 놓아도 의미가 통해야 합니다.

• 재사용성: 블로그 포스트, 뉴스 기사, 포럼 게시물, 고객 리뷰 등 반복되는 콘텐츠 단위에 사용됩니다.

• 구조적 특징: 일반적으로 내부에 제목(<h1>~<h6>)을 포함하는 것을 권장합니다.

아티클에 자주 사용하는 가상 클래스 (순서별)

여러 개의 아티클이 나열될 때, 특정 위치의 아티클만 선택하여 스타일을 입히는 순서입니다.

1. article:first-child

   • 부모 요소 내에서 가장 첫 번째로 등장하는 아티클을 선택합니다.

2. article:nth-child(n)

   • 앞에서부터 n번째 위치한 아티클을 선택합니다.

   • 2n(짝수), 2n-1(홀수) 등 패턴으로도 선택 가능합니다.

3. article:last-child

   • 부모 요소 내에서 가장 마지막에 위치한 아티클을 선택합니다.

4. article:not(.special)

   • 특정 클래스나 조건에 해당하지 않는 아티클만 골라 스타일을 적용합니다.

가상 클래스 작성 순서 주의사항

링크나 버튼 형태의 아티클을 다룰 때는 브라우저가 스타일을 덮어쓰지 않도록 다음 순서를 엄수해야 합니다.

:link → :visited → :hover → :active

이 순서가 뒤섞이면 마우스를 올리거나 클릭했을 때의 효과가 제대로 나타나지 않을 수 있습니다.

• 목록