의미론적 HTML

    HTML 문서의 기본 구조 설명 (2) ✔️

    안녕하세요. 휘입니다. 지난 글에서는 HTML 문서의 대략적인 기본 구조에 대해 살펴봤는데요. 이번 글에서는 HTML 페이지 작성에 공통적으로 활용되는 추가적인 태그 요소들에 대해 알아보도록 하겠습니다. 이 글은 MDN, Document and website structure를 참고하여 작성되었습니다. HTML 문서의 기본 구성 HTML 문서의 구성은 작성자에 따라 크게 달라질 수 있지만 몇 가지 기본적인 공통 사항들이 존재합니다. 헤더, 네비게이션 바, 메인 콘텐츠, 사이드바, 푸터가 이에 해당하는데요. 이들의 주된 역할은 다음과 같이 정리할 수 있습니다. 헤더(header): 헤더는 상단의 큰 문구, 로고, 태그 라인 등으로 구성되며 대부분의 웹페이지에서 활용됩니다. 네비게이션 바(navigation..


    의미론적 HTML 뜻과 구성 방법 설명 ✔️

    HTML을 공부하다보면 의미론적(semantic) HTML이라는 표현을 접하게 됩니다. 의미론적이라.. 대체 어떤 뜻일까요? 다음은 의미론에 대한 위키백과의 정의입니다. '의미론이란 의미를 연구하는 것인데 의미의 뜻이 정확하지 않으니.. 의미란 무엇인지에 대한 논의부터 시작해보자..'가 의미론에 대한 철학적 접근입니다. 그러나 다행히도 HTML에서 의미론은 이처럼 심오한 개념은 아닙니다. 의미론적 HTML이란 'HTML의 태그들을 의미에 맞게 사용해 문서를 구성하자'는 것입니다. 예를 들어보겠습니다. 우리는 다음과 같이 HTML 문서를 작성할 수 있습니다. Is this a top level heading? 이렇게 하면 글자는 기본 폰트보다 커지고 마치 태그를 사용한 효과를 낼 것입니다. 그러나 여기에는..