코딩하는 거북이

HTML의 문서 한 페이지에는 각각의 섹션이 나누어져 있는데, 어떤 것들이 있는지 알아보고 특징들을 살펴보도록 하겠습니다. 이미지 출처 Header 태그명 로 HTML 문서의 헤더 영역을 의미합니다. 주로 사이트의 이름(제목, 로고), 내비게이션, 헤드라인, 검색 등으로 구성됩니다. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함 할 수 없습니다. Nav 태그명 로 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역입니다. 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것으로 단순 본문 링크인지 메뉴(카테고리) 성격의 링크인지 확인이 가능합니다. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. Section 태그명 으로 맥락이 같은 요소들을 주제별로 ..

텍스트에 관련된 요소 텍스트에 관련된 기본적인 요소들에는 어떤 것이 있는지 알아보고, 어떠한 결과 값이 출력되는지 알아보겠습니다. 1. 기울임체 2. 굵은체 3. 형광펜 4. 굵은체 5. 작은글씨 6. 아래첨자 7. 위첨자 각각의 요소들을 사용하면 위 사진과 같은 결과가 출력됩니다. 이상으로 텍스트에 관련된 기본적인 요소들을 알아보았습니다 !

마크업(Markup) 이란 ? html 문서를 작성할 때 각각의 태그(Tag)를 이용해 요소(element)를 이루어 코딩한 것을 마크업(Markup) 이라고 합니다. 이런 마크업을 할 때 필수적으로 알고 있어야하는 시멘틱 마크업과 논리적인 순서에 따른 마크업 두 가지를 알아보도록 하겠습니다. 시멘틱 마크업 (Sementic markup) 시멘틱 마크업의 기본적인 정의부터 알아보면 시멘틱(sementic)의 사전적인 뜻은 '의미론적인' 이라는 의미를 가지고 있습니다. 결국 직역하자면 의미에 맞는 태그를 사용하라는 뜻입니다. 그렇다면 왜 시멘틱 마크업이 필요한지 알아보겠습니다. 의미를 포함하지 않은 마크업을 보여주는 사진입니다. 제목이라는 의미를 나타내는 태그를 사용하여 마크업 한 사진입니다. 위 두 사진..

블록 레벨 요소 (Block-level Elements) 블록 레벨 요소는 쉽게 해당 요소가 좌, 우 공간을 모두 차지하는 하나의 블록이라고 생각하시면 됩니다. 이미치 출처 위 그림과 같이 각 요소들이 좌우 공간을 모두 차지하는 형태이기 때문에 다음 요소를 마크업하게 되면 다음 줄에 출력되는 것을 볼 수 있습니다. 인라인 요소 (Inline Element) 인라인 요소는 블록 레벨 요소와 달리 해당 요소만큼만 공간을 차지합니다. 이미치 출처 위 그림과 같이 각 요소들이 해당되는 공간만을 차지하는 형태이기 때문에 다음 요소를 마크업하게 되면 같은 행에 출력되는 것을 볼 수 있습니다. 블록 레벨 요소와 인라인 요소의 특징 블록 레벨 요소와 인라인 요소의 구조를 간단하게 알아보았습니다. 그럼 이러한 구조로 인..