소개는 첫인상이 전부! HTML의 문 앞, header 태그

시크한 비버 캐릭터가 태그 구조를 소개하는 장면의 일러스트

페이지의 얼굴을 담당하는 <header> 태그 완전 정복 1. <header> 태그란? <header> 태그는 웹페이지나 개별 구역의 ‘머릿말’ 역할을 합니다. 사이트 전체의 로고, 메뉴, 제목 등을 담거나, 각 섹션의 제목 역할을 하기도 하죠. 쉽게 말해 책의 ‘표지’ 또는 ‘챕터 제목’ 같은 느낌이에요. 단, <header>는 단순히 맨 위에 둔다는 의미보단 ‘해당 영역의 소개 역할’이라는 구조적인 의미가 더 중요해요. … 더 읽기

HTML 본문의 핵심, body 태그

선글라스를 낀 비버 캐릭터가 노트북을 사용하는 모습과 태그를 강조한 썸네일

웹페이지의 본문을 품는 그릇, <body> 태그 완전정복 1. <body> 태그란 무엇인가요? <body> 태그는 HTML 문서의 본문 내용을 감싸는 아주 핵심적인 태그입니다. 우리가 웹브라우저에서 보는 텍스트, 이미지, 버튼, 링크 등 모든 시각적 요소는 <body> 안에 있어야 화면에 표시됩니다. 이 태그는 <html> 태그 내부에서 <head>와 함께 등장하며, 실제 사용자에게 보여지는 영역은 <body> 부분이 담당하죠. 즉, 웹페이지의 얼굴과 … 더 읽기

제목이 둘? HTML에서 왜 title과 h1을 나눠 쓸까?

vs - HTML 제목 태그 비교 썸네일

HTML에서 제목은 어디에 쓰는 걸까? <title> vs <h1> 1. 겉과 속이 다른 두 제목 웹페이지를 처음 열었을 때, 브라우저 탭에 보이는 문구와 화면 안에 있는 큰 글자가 다르다는 걸 느껴본 적 있나요? 사실 이 둘은 모두 ‘제목’이라는 역할을 하지만 서로 전혀 다른 영역에서 활동합니다. <title>은 무대 뒤에서 조명을 조절하는 조명감독 같은 존재고, <h1>은 무대 위에서 … 더 읽기

HTML 기본 구조 이대로 외우세요 – head, body, html 딱 정리했습니다

시크한 헤어스타일과 검정 선글라스를 쓴 비버가 키보드를 두드리며 HTML 코딩을 하는 모습

HTML 문서 구조란? HTML 태그는 아는데, 어디에 써야 할지 막막하다면 처음 HTML을 배우면 태그 하나하나는 익히기 쉬운데, 막상 페이지를 만들려 하면 뭐부터 써야 할지 막막해진다. 이럴 땐 문서 구조가 머릿속에 없기 때문이다. 건축으로 치면 설계도 없이 벽돌부터 쌓으려는 것과 비슷하다. 이 글에서는 HTML 문서의 기본 구조를 실제 웹사이트처럼 구성해보며, 태그들이 어디에 어떻게 들어가는지를 입체적으로 다뤄본다. … 더 읽기