Leeyanggoo

지난 HTML의 포스트에서 웹 페이지를 구조를 만들 때 의미를 고려한 태그를 사용하여 구현하는 시멘틱(semantic)과 논리적 순서(logical sequence) 마크업을 소개해드렸습니다. 웹 페이지의 구조가 의미에 따라 구성되어 있다면, 그 구조를 이루는 태그들 또한 각자 의미와 쓰이는 경우가 있습니다. 이번엔 그 태그들 중에 구획을 나누는 태그에 대해 자세히 알아봄으로써 좀 더 접근성 있고, 명확한 정보를 갖춘 웹 페이지를 구현하는 데 한 걸음 더 나아가 봅시다! 위의 웹 페이지 구조를 보면 태그가 다양한 곳에 쓰이는 걸 알 수 있습니다. 왜 그런 것인지 태그와 관련된 태그를 알아보겠습니다! 🔎 header : 문서의 소개, 제목, 탐색에 도움이 되는 콘텐츠를 나타냅니다. 또한 는 구획을 나눌 때..

시멘틱 마크업Semantic Markup 시멘틱(Semantic)은 '의미론적인'의 뜻으로, 시멘틱 마크업이란 웹 페이지의 구조와 의미를 고려하여 태그를 사용하는 방식을 의미합니다. header, nav, section, article, aside, footer 등 각각의 태그 안에 알맞은 데이터를 채워넣음으로써 보다 명확한 정보를 갖춘 웹 페이지를 구현할 수 있습니다. header 웹 페이지의 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 네비게이션, 검색 등의 내용을 포함합니다. nav 메인 메뉴나 목차, 색인 등을 포함하는 구획입니다. section 맥락이 같은 요소들을 주제별로 그룹화하는 태그. 문서의 일반적인 영역을 나타냅니다. article 게시판, 블로그 포스팅, 뉴스 기사 등과 ..

블록 레벨 요소Block-level Elements 블록 레벨 요소는 일반적으로 목록·표 등을 포함하고 있으며, 문단으로 큰 공간을 차지하고 있습니다. 여기서 말하는 "문단Parahraph"이란 블록 레벨 요소가 기본적으로 가지고 있는 줄이 바뀌는 특성을 뜻합니다. 블록 레벨 요소는 새로운 줄에서 시작하기 때문에 '세로'로 쌓이는 형태를 보입니다. See the Pen block_1 by leeyanggoo (@leeyanggoo) on CodePen. 위의 코드는 "블록 레벨 요소는 줄이 바뀌는 특성을 가지고 있습니다."라는 하나의 문장을 블록 레벨 요소 중 하나인 태그를 이용해 세 문단으로 나눈 것입니다. 블록 레벨 요소가 차지하는 "문단의 공간"이란 부모 요소의 좌우 전체를 차지하여 블록을 만든다는..