header 2

[Web] 시멘틱 태그란

HTML을 처음 배울 때는 div나 span 같은 태그로도 충분히 화면을 만들 수 있는데, 굳이 타른 태그들이 왜 필요하나 싶을 수 있다.물론, 실제로 웹 페이지는 div 태그 만으로도 충분히 구성하긴 할 수 있다. 그러나 시간이 지나면서 프로젝트 규모가 커지고, 협업이 시작되고, 검색 엔진이나 스크린 리더 같은 도구들이 개입하는 순간부터 의미가 있는 HTML 구조라는 게 매우 중요해진다.그리고 이 때 등장하는 개념이 바로 시멘틱 태그(sementic tag)이다. 1. 시멘틱 태그란시멘틱이란 '의미'라는 뜻으로, 시멘틱 태그는 그 영역이 무엇을 의미하는지를 HTML에 직접 드러내는 태그이다.브라우저가 화면을 그리는 기능 자체는 div와 크게 다를 건 없지만, 문서의 구조를 읽고 이해해야 하는 사람..

[Web] 제목과 본문 글자 태그

웹 페이지는 글자 태그의 비중이 가장 크다.지금 내 블로그만 봐도 그렇고, 위키피디아 같은 걸 들어가봐도 글자가 압도적으로 많은 것을 볼 수 있다. 위의 사진에서 보면 글자의 크기나 굵기 등이 여러가지임을 확인할 수 있는데, 오늘은 제목과 본문의 글자를 표현하는 태그에는 어떤 것들이 있는지 알아보자. 1. 제목 태그와 본문 글자 태그1.1. 제목 태그HTML 문서에서 제목은 아래 표에 있는 6가지 태그들로 표현 가능하다.태그설명h1첫 번째로 큰 제목 글자 생성h2두 번째로 큰 제목 글자 생성h3세 번째로 큰 제목 글자 생성h4네 번째로 큰 제목 글자 생성h5다섯 번째로 큰 제목 글자 생성h6여섯 번째로 큰 제목 글자 생성 이처럼 숫자가 커질수록 글자는 작아진다고 생각하면 된다. 실제로 어느 정도..