본문 바로가기

개발/HTML

(3)
[HTML] 시맨틱 태그(Semantic Tag) : section, article, div 차이 이번 글에서는 문서의 영역을 구분하는 HTML 태그 중``, ``, ``에 대해 알아보려고 합니다!  태그 설명섹션은 동일한 내용의 요소들을 하나의 그룹으로 묶어주는 역할을 해요.일반적으로 섹션의 주제를 지정하기 위해 h태그(`` ~ ``)를 사용하는데 필수는 아닙니다. A회사 프론트엔드 모집공고 필요한 역량 React, typescript 코드 품질 향상, 테스트 코드 작성 반응형 웹 개발에 대한 이해 원활한 커뮤니케이션 능력 주요 업무 PC 웹 / 모바일 웹 서비스 개발 웹 성능 최적화 테스트 코드 작성위의 예시를 볼까요?A회사의 프론트엔드 모집공고 페이지입니다. 소제목으로 "필요한 역량"과 "주요 업무"가 있는데요,``이 소제목에 해당하는 요소들을 하나로 묶어주고 있습니다. 이처럼 ..
[HTML] 시맨틱 태그 (Semantic Tag) : h1 & header 시맨틱 태그에는 아주 많은 종류가 있어요.그 중 이번 글에서는 과 에 대해 알아봅시다!  태그가 속해있는 섹션의 제목을 나타냅니다. 제목1 에 포함되어있는 내용도 과 같은 섹션으로 묶여있기 때문에 "제목1"에 관한 내용으로 분석되어요. --> 내용1 내용2 `` 부터 `` 까지 있으며, 뒤의 레벨(1~6)는 제목의 위계를 의미해요.``은 가장 최상위 섹션의 제목,``는 서브 섹션의 제목,``는 서브 섹션의 부제목 등의 순서로 사용됩니다. 제목 요소는 하위에 따라오는 내용을 하나의 섹션으로 묶어요. 자신보다 높은 위계의 제목 요소를 만나기 전까지 하나의 섹션으로 구분해요. 시맨틱 태그 공부하는 방법 학습하기 MDN에 나와있는 시맨틱 태그 정의를 학습한다. 예시 찾아보기 ..
[HTML] 시맨틱 태그(Semantic Tag)로 좋은 사이트 만드는 방법 시맨틱 태그 설명 시맨틱 태그란 의미 있는 태그를 뜻합니다. 평소에 어떻게 마크업을 작성하시나요?만약 아래와 같은 페이지를 구현한다고 할 때, 어떻게 마크업 하실 건가요? div만 사용한 경우이미지, 텍스트, 모달, 버튼 등 어떤 요소이든 간에 `` 태그만 있으면 작성할 수 있습니다.다음과 같이 말이죠. 제목입니다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled..