레이아웃 기초

1. 도입 (왜 배워야 하는가)

웹 개발에서 레이아웃은 사용자가 웹사이트를 어떻게 경험하는지를 결정짓는 중요한 요소입니다. 레이아웃은 웹 페이지의 구조와 내용 배치를 의미하며, 잘 설계된 레이아웃은 사용자가 정보를 쉽게 찾고, 페이지를 직관적으로 사용할 수 있게 도와줍니다. 반대로, 레이아웃을 무시하거나 잘못 설계하면 사용자는 원하는 정보를 찾기 어려워하고, 이는 웹사이트의 신뢰도를 떨어뜨립니다. 따라서 레이아웃 기초를 배우는 것은 웹 개발의 필수적인 첫걸음입니다.

2. 핵심 개념 설명

레이아웃을 구성하는 기본 개념은 크게 블록 레벨 요소와 인라인 요소로 나뉩니다.

• 블록 레벨 요소: 페이지에서 가로 전체를 차지하며, 항상 새로운 줄에서 시작합니다. 예를 들어, <div>, <p>, <h1> 등이 있습니다.
• 인라인 요소: 블록 레벨 요소와 달리, 내용에 따라 너비가 결정되며, 같은 라인에서 다른 인라인 요소와 함께 존재할 수 있습니다. 예를 들어, <span>, <a>, <img> 등이 있습니다.

비유하자면, 블록 레벨 요소는 큰 가구(소파, 침대)로 방의 구조를 잡아주고, 인라인 요소는 소품(쿠션, 장식품)으로 공간을 꾸며주는 역할을 합니다.

용어	설명
블록 레벨 요소	가로 전체를 차지하며, 새로운 줄에서 시작
인라인 요소	내용에 따라 너비가 결정되며, 같은 줄에 존재

3. 기본 코드 예제

아래는 블록 레벨 요소와 인라인 요소를 활용한 기본적인 HTML 레이아웃입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본 레이아웃</title>
</head>
<body>
    <div style="background-color: lightblue; padding: 20px;">
        <h1>제목</h1> <!-- 블록 레벨 요소 -->
        <p>이것은 단락입니다.</p> <!-- 블록 레벨 요소 -->
        <span style="color: red;">이것은 인라인 요소입니다.</span> <!-- 인라인 요소 -->
    </div>
</body>
</html>

실행 결과

• 페이지 상단에 "제목"이 보이고, 그 아래에 "이것은 단락입니다."라는 문장이 있습니다. 마지막으로 "이것은 인라인 요소입니다."라는 문구가 빨간색으로 표시됩니다.

코드 한 줄씩 동작 설명

1. <!DOCTYPE html>: HTML5 문서임을 선언합니다.
2. <html lang="ko">: 한국어로 작성된 HTML 문서임을 지정합니다.
3. <head>: 문서의 메타데이터를 포함하는 섹션입니다.
4. <meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.
5. <title>: 브라우저 탭에 표시될 문서 제목을 지정합니다.
6. <body>: 실제 페이지 내용을 포함하는 섹션입니다.
7. <div style="background-color: lightblue; padding: 20px;">: 배경색과 패딩을 가진 블록 레벨 요소입니다.
8. <h1>: 제목을 표시하는 블록 레벨 요소입니다.
9. <p>: 단락을 표시하는 블록 레벨 요소입니다.
10. <span style="color: red;">: 빨간색 텍스트를 가진 인라인 요소입니다.

4. 실전 활용 예제

11. 웹사이트 헤더: 쇼핑몰 웹사이트에서 상단에 로고와 메뉴 바를 구성할 때 <header>와 <nav>를 사용해 블록 레벨 요소로 배치합니다.

   <header>
       <h1>내 쇼핑몰</h1>
       <nav>
           <ul>
               <li><a href="#">홈</a></li>
               <li><a href="#">상품</a></li>
               <li><a href="#">장바구니</a></li>
           </ul>
       </nav>
   </header>

12. 상품 리스트: 여러 상품을 나열할 때 <section>과 <article>을 사용하여 각각의 상품 정보를 블록으로 구성합니다.

   <section>
       <article>
           <h2>상품1</h2>
           <p>설명1</p>
       </article>
       <article>
           <h2>상품2</h2>
           <p>설명2</p>
       </article>
   </section>

5. 흔한 실수와 주의사항

13. 블록 레벨 요소 안에 인라인 요소를 잘못 사용하기:

- 잘못된 코드:

     <p><h2>제목</h2></p>

- 올바른 코드:

     <h2>제목</h2>
     <p>내용</p>

- 설명: 블록 요소인 <h2>를 인라인 요소인 <p> 안에 넣는 것은 잘못된 사용입니다.

14. 스타일을 직접 HTML에 적용하기:

- 잘못된 코드:

     <div style="color: red;">이것은 텍스트입니다.</div>

- 올바른 코드:

     <style>
       .red-text { color: red; }
     </style>
     <div class="red-text">이것은 텍스트입니다.</div>

- 설명: 스타일 코드는 CSS 파일이나 <style> 태그에서 관리하는 것이 더 효율적입니다.

6. 정리

15. 레이아웃은 웹사이트의 사용자 경험을 결정짓는 중요한 요소입니다.
16. 블록 레벨 요소와 인라인 요소의 이해는 레이아웃 설계의 기초입니다.
17. HTML의 구조적 요소(<div>, <header>, <nav>, <section>, <article>)를 활용하여 명확한 레이아웃을 만드는 것이 중요합니다.
18. 다음에 학습하면 좋은 주제: CSS를 활용한 레이아웃 스타일링, Flexbox와 Grid 시스템.