챕터 3: HTML의 기본 개념과 div 태그 이해하기
서론
웹페이지는 HTML이라는 언어로 구조를 만듭니다. HTML은 HyperText Markup Language의 약자로, 웹페이지의 뼈대를 만드는 언어입니다. 이것을 건물에 비유하자면, HTML은 건물의 철근 콘크리트 구조와 같습니다. 벽이 어디에 있고, 방이 몇 개이며, 창문과 문이 어디에 위치하는지를 정의하는 것이 HTML의 역할입니다.
이번 챕터에서는 HTML의 가장 기본적이면서도 가장 많이 사용되는 태그인 div에 대해 깊이 있게 알아보겠습니다. div를 제대로 이해하면 웹페이지 구조의 70%는 이해한 것이나 다름없습니다. 실제로 현대 웹사이트의 대부분은 div 태그로 이루어져 있다고 해도 과언이 아닙니다.
본론
HTML 태그란 무엇인가
HTML 태그는 꺽쇠 괄호(<>)로 둘러싸인 명령어입니다. 태그는 브라우저에게 "이 부분은 이렇게 표시해주세요"라고 지시하는 역할을 합니다. 대부분의 태그는 여는 태그와 닫는 태그의 쌍으로 이루어져 있습니다. 예를 들어 <div>가 여는 태그라면 </div>가 닫는 태그입니다. 닫는 태그는 슬래시(/)가 추가된다는 점만 다릅니다.
Next.js에서는 JSX라는 문법을 사용하는데, 이것은 JavaScript 안에서 HTML과 비슷한 문법을 사용할 수 있게 해주는 확장 문법입니다. 기본적인 사용법은 HTML과 동일하므로 걱정하지 마십시오.
div 태그의 의미와 역할
div는 'division'의 줄임말로, '구역' 또는 '영역'을 의미합니다. 웹페이지를 여러 구역으로 나누는 보이지 않는 상자라고 생각하면 이해가 쉽습니다. 방을 가구로 구분하듯이, 웹페이지를 div로 구분하는 것입니다. div 자체는 아무런 의미를 가지지 않는 중립적인 컨테이너입니다. 이것이 오히려 장점이 되어, 어떤 용도로든 자유롭게 사용할 수 있습니다.
app/page.js 파일을 열고 다음과 같이 수정해보겠습니다:
export default function Home() {
return (
<div>
<div>첫 번째 상자입니다</div>
<div>두 번째 상자입니다</div>
<div>세 번째 상자입니다</div>
</div>
)
}
저장하고 브라우저를 확인하면 세 개의 문장이 세로로 나열된 것을 볼 수 있습니다. div는 기본적으로 '블록 레벨 요소'로, 가로 전체 너비를 차지하고 세로로 쌓입니다. 마치 상자를 차곡차곡 쌓아올리는 것과 같습니다.
div 중첩하기 - 상자 안의 상자
div의 강력한 기능 중 하나는 중첩이 가능하다는 것입니다. 큰 상자 안에 작은 상자들을 넣을 수 있고, 그 작은 상자 안에 또 다른 상자를 넣을 수 있습니다. 이렇게 중첩 구조를 만들면 복잡한 레이아웃도 체계적으로 구성할 수 있습니다.
export default function Home() {
return (
<div>
<div>
<div>헤더 영역입니다</div>
</div>
<div>
<div>메인 콘텐츠 영역입니다</div>
<div>
<div>사이드바 영역입니다</div>
<div>사이드바 안의 작은 상자입니다</div>
</div>
</div>
<div>
<div>푸터 영역입니다</div>
</div>
</div>
)
}
이 코드는 웹페이지의 전형적인 구조를 보여줍니다. 최상위 div 안에 헤더, 메인 콘텐츠, 푸터를 위한 div들이 있고, 메인 콘텐츠 안에는 또 다시 콘텐츠와 사이드바를 위한 div들이 있습니다. 이런 식으로 구조를 잡으면 나중에 스타일을 적용하기도 쉬워집니다.
div에 의미 부여하기 - className 속성
div 자체는 의미가 없지만, className 속성을 사용하면 각 div에 이름을 붙일 수 있습니다. 이것은 마치 상자에 라벨을 붙이는 것과 같습니다. className은 나중에 CSS로 스타일을 적용할 때 매우 중요한 역할을 합니다.
export default function Home() {
return (
<div className="container">
<div className="header">
<div className="logo">로고가 들어갈 자리</div>
<div className="navigation">메뉴가 들어갈 자리</div>
</div>
<div className="main-content">
<div className="article">
<div className="title">기사 제목</div>
<div className="text">기사 내용이 들어갑니다</div>
</div>
<div className="sidebar">
<div className="widget">위젯 1</div>
<div className="widget">위젯 2</div>
</div>
</div>
<div className="footer">
<div className="copyright">© 2024 My Website</div>
</div>
</div>
)
}
className을 사용하면 코드를 읽기도 쉬워지고, 각 div의 역할을 명확히 알 수 있습니다. 또한 같은 className을 여러 요소에 사용할 수 있어 반복되는 스타일을 효율적으로 관리할 수 있습니다.
div와 다른 컨테이너 태그들
HTML5에서는 div보다 더 의미가 명확한 컨테이너 태그들이 추가되었습니다. 이들은 기능적으로는 div와 동일하지만, 의미론적으로 더 명확합니다:
export default function Home() {
return (
<div>
<header>
<nav>네비게이션 영역</nav>
</header>
<main>
<article>
<h1>기사 제목</h1>
<p>기사 내용</p>
</article>
<aside>
사이드바 내용
</aside>
</main>
<footer>
푸터 내용
</footer>
</div>
)
}
header는 머리말 영역, nav는 네비게이션, main은 주요 콘텐츠, article은 독립적인 콘텐츠, aside는 부가 정보, footer는 꼬리말 영역을 나타냅니다. 이런 태그들을 시맨틱(의미론적) 태그라고 부릅니다. 검색 엔진이나 스크린 리더가 웹페이지를 더 잘 이해할 수 있게 도와줍니다.
실습: 간단한 카드 컴포넌트 만들기
지금까지 배운 내용을 활용하여 실제로 유용한 카드 컴포넌트를 만들어보겠습니다. 카드는 현대 웹 디자인에서 매우 자주 사용되는 패턴입니다:
export default function Home() {
return (
<div className="page">
<div className="card">
<div className="card-image">
[이미지가 들어갈 자리]
</div>
<div className="card-content">
<div className="card-title">
카드 제목입니다
</div>
<div className="card-description">
카드에 대한 설명이 들어갑니다.
여러 줄의 텍스트를 넣을 수 있습니다.
</div>
<div className="card-footer">
<div className="card-date">2024.01.15</div>
<div className="card-author">작성자: 홍길동</div>
</div>
</div>
</div>
<div className="card">
<div className="card-image">
[다른 이미지]
</div>
<div className="card-content">
<div className="card-title">
두 번째 카드입니다
</div>
<div className="card-description">
같은 구조를 재사용하여 여러 개의 카드를 만들 수 있습니다.
</div>
<div className="card-footer">
<div className="card-date">2024.01.16</div>
<div className="card-author">작성자: 김철수</div>
</div>
</div>
</div>
</div>
)
}
이렇게 div를 체계적으로 구성하면, 나중에 CSS를 적용하여 아름다운 카드 디자인을 만들 수 있습니다. 각 div가 명확한 역할을 가지고 있어 유지보수도 쉬워집니다.
결론
div 태그는 HTML에서 가장 기본적이면서도 가장 중요한 요소입니다. 처음에는 단순한 상자처럼 보이지만, 이 상자들을 적절히 조합하면 복잡하고 아름다운 웹페이지를 만들 수 있습니다. div를 마스터하는 것은 웹 개발의 기초를 탄탄히 다지는 것과 같습니다.
이번 챕터에서 우리는 div의 기본 개념부터 중첩 구조, className 활용, 그리고 시맨틱 태그까지 알아보았습니다. 또한 실제로 자주 사용되는 카드 컴포넌트 구조도 만들어보았습니다. 지금은 화면에 밋밋한 텍스트만 보이지만, 다음 챕터들에서 CSS를 배우면 이 구조들이 얼마나 아름답게 변신할 수 있는지 보게 될 것입니다.
div는 웹페이지의 뼈대를 만드는 도구입니다. 이제 여러분은 이 도구를 사용할 수 있게 되었습니다. 다음 챕터에서는 div 외의 다른 중요한 HTML 태그들을 배워보겠습니다. 제목, 문단, 링크, 이미지 등 웹페이지를 더욱 풍부하게 만들어주는 태그들이 여러분을 기다리고 있습니다!