안녕하세요~ 오늘은 웹문서의 본문을 구성하는 요소들 중 section 관련한 요소를 알아보려 합니다! 일단 section 태그가 무엇인지 먼저 알고 넘어가는게 좋겠죠? 🔖 정의 및 특징 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다. 태그는 HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다. 태그는 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다. 태그는 블록 요소로서, 문장이나 문서의 스타일링 요소가 아닙니다. 그러므로 스크립트의 편의나 영역을 위함이라면 태그가 적합합니다. 네, 그러면 섹션 관련 요소에 관한 요소를 표로 정리해보겠습니다. 🔖섹션 관련 요소 태그명 태그의 의미 및 특징 사이트 본문에 해당하는 모든 콘텐츠를 포함하는 섹션을 설정 사이트의..

안녕하세요! 오늘은 텍스트 관련 요소에 대해 살펴보겠습니다. 텍스트 관련 요소들은 말 그대로 글자에 태그를 주어 요소를 넣어주는 것입니다. 텍스트 관련 요소들 중 어떤 것이 있는지 한 번 표로 확인해보겠습니다! 💬텍스트 관련 요소 태그명 태그의 의미 및 특징 강조하고 싶은 텍스트를 정의하기 위한 태그이며 기울임체로 표시됩니다. 중요한 텍스트를 정의하기 위한 태그이며 굵은체로 표시됩니다. 주의 깊게 볼 텍스트 부분을 강조하기 위한 태그이며 노란색으로 표시됩니다. 의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시합니다. 주의 사항, 법적 제한, 저작권 등의 정의하기 위한 태그이며 작은 글씨로 표시됩니다. 아래첨자 텍스트를 정의하기 위한 태그입니다. 위첨자 텍스트를 정의하기 위한 태그입니다. 테이블로만..

오늘은 시멘틱 마크업, 논리적인 순서 마크업에 대해 알아보겠습니다. ✔️시멘틱 마크업 먼저 시멘틱 (semantic)의 사전적 뜻은 '의미론적인' 정도로 해석합니다. 시멘틱 마크업은 '의미론적인 HTML 태그 문서 작성'을 뜻합니다. 즉, 의미를 잘 전달할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 이미지 출처 그렇다면 시멘틱 마크업을 사용하는 이유는 무엇일까요? HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수도 있습니다. 예를 들어 시각장애인의 경우 HTML문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그의 의미가 적절해야 합니다. 또, 시멘틱 마크업은 웹을 개발할 때 생..

오늘은 HTML의 가장 기본적인 블록 구조와, 인라인 구조에 대해 알아보겠습니다. 웹사이트에 필수적으로 구성되어야 하는 구조이므로 잘 알아봐야겠죠? 이미지 출처 블록 레벨 요소(Block-level Element) 블록 요소는 쉽게 하나의 박스라고 생각하면 됩니다. 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 레벨 요소는 텍스트와 인라인 요소를 자식 요소로 포함할 수 있습니다. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다. margine과 padding을 줄 수 있습니다. 블록 구조 예제 블록 구조 하나의 박스 형태 줄 바꿈이 생김 인라인 요소(Inline Element) 인라인 요소는 텍스트라고 생각하면 됩..