jonbeo 님의 블로그

HTML5 시맨틱 태그 정리 💡 section, article, aside, nav, header, footer 차이점과 예제

HTML5부터 도입된 시맨틱(Semantic) 태그는 단순히 화면을 구성하는 것뿐 아니라,의미 있는 구조를 가진 웹 문서를 만들기 위해 도입되었습니다.이러한 태그를 활용하면 검색 엔진 최적화(SEO), 웹 접근성, 유지보수성까지 좋아집니다.이번 포스팅에서는 HTML5의 주요 시맨틱 태그와 그 사용 예시를 자세히 살펴보겠습니다! ✅🧠 1. 시맨틱 태그란?Semantic = 의미 있는구조를 명확히 하여 사람이 보기에도, 기계(브라우저, 크롤러, 스크린리더)도 이해하기 좋게 만드는 태그입니다.🏗️ 2. 주요 시맨틱 태그 설명 태그 역할 사용 위치 문서 또는 섹션의 헤더페이지 최상단, 각 섹션 내네비게이션 메뉴전체 레이아웃, 사이드바문서의 주요 콘텐츠페이지 1개당 1개만독립적인 구역컨텐츠 그룹핑독립적으로..

CSS에서 레이아웃을 만들다 보면 "이 요소 왜 여기 있어?", "왜 고정이 안 되지?" 같은 혼란이 생기죠.그 핵심 원인은 바로 position 속성을 정확히 이해하지 못해서입니다.이번 포스팅에서는 CSS position 속성의 5가지 값인static, relative, absolute, fixed, sticky를 실제 예제와 함께 정리해드립니다. ✅ position: static (기본값)모든 요소는 기본적으로 position: static입니다.별도로 좌표를 지정해도 무시되며, HTML의 문서 흐름에 따라 배치됩니다.div { position: static; top: 20px; /* ❌ 적용되지 않음 */} ✅ position: relative기존 위치(문서 흐름)를 기준으로 상대적으로 이동합..

지금까지 Flexbox로 멋진 정렬과 반응형 레이아웃을 만들었다면,이제는 2차원(행 + 열) 레이아웃을 더 강력하게 다룰 수 있는CSS Grid의 차례입니다. Flex가 “흐름 기반”이라면,Grid는 “정해진 틀 기반”입니다.그만큼 레이아웃 설계가 더 직관적이고 강력해져요! ✅ display: grid란?.container { display: grid;} 이 한 줄로 Grid 컨테이너가 만들어집니다.그리고 이 안에 있는 자식 요소들은 **행(row)과 열(column)**을 기준으로 정렬됩니다. 🧩 기본 속성 정리속성설명grid-template-columns열(column) 개수 및 너비 설정grid-template-rows행(row) 개수 및 높이 설정gap셀 사이 간격 (row + column 동..

웹페이지를 만드는 기초 언어인 HTML과 CSS를 아주 쉽게 하나씩 설명 해보는 포스팅을 할까 합니다 😊첫 번째 포스팅은 HTML이란 무엇인지, 누가, 어떤 상황에서 사용하는지를 천천히 알아보도록 할게요!✅ HTML이란?HTML은 HyperText Markup Language의 줄임말이에요. 말 그대로, 하이퍼텍스트를 작성하기 위한 마크업 언어랍니다! 📌 여기서 잠깐!하이퍼텍스트란?👉 다른 페이지나 정보로 연결되는 문서예요. 우리가 인터넷에서 링크를 클릭해서 다른 페이지로 이동하잖아요? 그게 하이퍼텍스트예요!✅ HTML은 왜 필요할까?우리가 보는 모든 웹사이트는 결국 HTML로 구성되어 있어요.예를 들어, 네이버, 유튜브, 구글, 인스타그램 같은 사이트도 처음에는 HTML로 기본 뼈대를 만들어요.H..