풀스택 개발자 과정 35일차

너구·2026년 6월 25일

풀스택 성장과정

목록 보기

37/79

레이아웃

레이아웃 구성 방식

크게 Semantic/Non-Semantic 방식으로 나뉜다.

Semantic Layout

Semantic 엘리먼트

시멘틱 레이아웃의 장점

화면에 보여지는 모습은 시멘틱 태그를 사용하던 div 엘리먼트만 사용하던 똑같다.

검색 엔진 최적화(SEO)
웹 접근성(스크린 리더가 현재 위치를 읽어줌)
가독성

Non-Semantic Layout

시멘틱 레이아웃 구성 예제

시멘틱 엘리먼트들을 활용해 문서의 전체 구조를 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 헤더 (머릿말) -->
     <header>
        <h1>Amazon</h1>
        <p>Welcome to Amazon!</p>
     </header>

     <!-- 메뉴 (Navigation) -->
      <nav>
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Products</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
      </nav>

      <!-- 본문 (Main Contents) -->
       <main>
        <section>
            <h2>Food</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur 
                adipisicing elit. Architecto delectus, 
                enim sed perferendis aspernatur repellat 
                accusantium iste fugiat reprehenderit 
                quam illo consequuntur excepturi impedit. 
                Placeat et similique blanditiis. Nemo, nobis.
            </p>
        </section>

        <!-- 섹션 1 전자제품 -->
        <section>
            <h2>Electronics</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur 
                adipisicing elit. Rem accusantium 
                quisquam ipsam, magni recusandae et 
                voluptates laudantium praesentium 
                laborum natus aliquid aliquam explicabo 
                quis, vitae doloremque hic a beatae optio?
            </p>
        </section>
        
        <!-- 섹션 2 패션 -->
        <section>
            <h2>Fashion</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur 
                adipisicing elit. Ullam explicabo amet quidem 
                sit aspernatur eius vero porro rem. Debitis
             modi quisquam eaque earum alias fugiat 
             dignissimos, quam commodi mollitia ab?
            </p>
        </section>
    </main>

    <!-- 사이드 컨텐츠 (Side Contents) -->
     <!-- 추천 상품 -->
     <aside>
        <h2>Recommended for you</h2>
        <ul>
            <li>Galaxy S26</li>
            <li>Watermelon</li>
        </ul>
     </aside>

     <!-- 꼬릿말(footer) -->
      <footer>
        <p>2025 &copy; Amazon</p>
      </footer>
    
</body>
</html>

넌 시멘틱 레이아웃 구성 예제

넌 시멘틱 방식으로 웹페이지의 전체 구조를 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 헤더 -->
    <div id="header">
        <h1>Amazon</h1>
        <p>Welcome to Amazon!</p>
    </div>

    <!-- 메뉴 -->
     <div>
        <ul>
            <li><a href="#">Home</a></li>
        </ul>
        <ul>
            <li>
                <a href="#">Products</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
     </div>
    
     <!-- 메인 컨텐츠 -->
      <div id="main">
        <!-- 섹션1 음식 -->
         <!-- id는 중복이 될 수 없습니다 따라서 id=section 사용 불가 -->
        <div>
            <h2>Food</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur 
                adipisicing elit. Magni, corporis quas! 
                Accusamus a cumque in neque vitae 
                voluptatem hic iure rerum soluta nulla 
                commodi repellendus corrupti eaque, ducimus 
                unde iusto.
            </p>
        </div>

        <!-- 섹션2 전자제품 -->
         <div>
            <h2>Electronics</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur 
                adipisicing elit. Quasi sed numquam illum 
                laborum cum vitae iusto assumenda voluptas 
                velit, voluptatum expedita dolorem optio 
                perferendis aliquid, voluptate veniam minima 
                animi tenetur.
            </p>
         </div>

         <!-- 섹션3 패션 -->
          <div>
            <h2>Fashion</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing 
                elit. Accusamus nihil doloremque quod, culpa, 
                et commodi consequatur eveniet perspiciatis porro 
                explicabo aliquam distinctio quisquam praesentium 
                fuga corporis quas pariatur quae! In.
            </p>
          </div>
      </div>

      <!-- 사이드 컨텐츠 -->
       <div id="aside">
        <h2>Recommended for you</h2>
        <ul>
            <li>Galaxy S26</li>
            <li>Watermelon</li>
        </ul>
       </div>

       <!-- 꼬릿말 -->
        <div id="footer">
            <p>
                2025 &copy; Amazon
            </p>
        </div>

</body>
</html>

Form

HTML 폼 (Form)

사용자로부터 데이터를 입력받아 서버에 제출하는 역할을 수행한다.
다음은 폼을 생성하기위해 사용되는 엘리먼트들을 용도에 따라 분류한 표이다.

form

폼을 만드는 역할을 수행한다. 다음은 form 엘리먼트의 속성이다.

input

정보를 수집받는 기본 요소로 가장 많이 사용된다. 다음은 용도별 input의 타입이다.

textarea

게시물 본문 등 사용자로부터 긴 글을 입력받을 수 있도록 큰 텍스트 입력 공간을 제공한다.

Select

사용자에게 선택 가능한 옵션을 제공한다. option 엘리먼트와 함께 사용된다.

label

input, textarea, select 등 입력을 받는 엘리먼트의 이름표(label)을 수행한다.
다음은 label 엘리먼트의 속성이다.

button

폼 제출 뿐만 아니라 사용자와의 상호작용에도 사용되는 요소이다.
타입에 따라 다르게 사용된다.

form 엘리먼트 예제

구독 폼(Subcribe Form)을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>구독하기</h1>

    <!-- 
    action: 요청 주소
    method: 요청 메서드
    POST /subcribe 요청을 전송한다
     -->
    <form action="/subcribe" method="POST">
        <!-- 
        사용자 이메일 입력란 
        name: 서버에서 폼에 입력한 데이터를 구분하는 기준
        type=email: 입력한 값이 유효한 이메일이 아니면 제출을 거부
        placeholder: 예시 데이터를 보여준다
        required: 필수값으로 지정한다
        -->
        <input 
         type="email" 
         name="email" 
         id="" 
         placeholder="johndoe@example.com"
         required
        >
        <!-- 제출버튼 -->
         <button type="submit">구독하기</button>
    </form>
    
</body>
</html>

input(text) 예제

성과 이름을 받는 폼을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>개인정보</h1>

    <!-- form 엘리먼트는 생략되었다 -->
    <p>
        <!-- 
        input의 이름표 
        for 속성: 원하는 input과 연결하는 용도. input의 id와 일치해야 한다.
        -->
        <label for="first-name">이름</label>
        <!-- 텍스트 입력란 -->
        <input 
        type="text"
        name="first-name"
        id="first-name"
        placeholder="John"
        required
        >
    </p>

    <p>
        <label for="last-name">성</label>
        <input 
        type="text" 
        name="last-name" 
        id="last-name"
        placeholder="Doe"
        required
        >
    </p>
    
</body>
</html>

input(password) 예제

로그인 폼을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>로그인</h1>

    <!-- form 엘리먼트는 생략 -->

    <p>
        <label for="username">아이디</label>
        <input type="text" name="username" id="username">
    </p>

    <p>
        <label for="password">비밀번호</label>
        <input type="password" name="password" id="password">
    </p>
    
</body>
</html>

input(date), input(time)

예약 폼을 만들어라

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>예약하기</h1>

    <label for="date">날짜</label>
    <input type="date" name="date" id="date">

    <label for="time">시간</label>
    <input type="time" name="time" id="time">
    
</body>
</html>

input(checkbox) (1)

로봇이 아닙니다 폼을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>로봇입니까?</h1>

    <input type="checkbox" name="is-robot" id="is-robot">
    <label for="is-robot">로봇이 아닙니다</label>
    
</body>
</html>

input(checkbox) (2)

다음과 같이 사용자가 여러개를 사용할 수 있는 폼을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>Your Skills</h1>

    <!-- 체크박스에서 같은 입력그룹(스킬)은 name을 일치시켜야 한다 -->
     <!-- value: 서버에 실제 제출되는 값 -->
    <input type="checkbox" name="skills" value="html" id="html">
    <label for="html">HTML</label>

    <input type="checkbox" name="skills" value="css" id="css">
    <label for="css">CSS</label>

    <input type="checkbox" name="skills" value="js" id="js">
    <label for="js">JavaScript</label>

    <input type="checkbox" name="skills" value="react" id="react">
    <label for="react">React</label>

</body>
</html>

input(radio)

성별 선택 폼을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h3>성별</h3>

    <input type="radio" name="gender" value="male" id="male">
    <label for="male">남성</label>

    <input type="radio" name="gender" value="femele" id="femele">
    <label for="femele">여성</label>

    <input type="radio" name="gender" value="gay" id="gay">
    <label for="gay">게이</label>
    
</body>
</html>

input(radio) (2)

다음과 같이 세대 선택폼을 만들어라

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>Survey Form</h1>
    <p>Which generation are you in?</p>

    <p>
        <input type="checkbox" name="generation" value="gen-x" id="gen-x">
        <label for="gen-x">Gen X</label>
    </p>

    <p>
        <input type="checkbox" name="generation" value="milenials" id="milenials">
        <label for="milenials">Milenials</label>
    </p>

    <p>
        <input type="checkbox" name="generation" value="gen-z" id="gen-z">
        <label for="gen-z">Gen Z</label>
    </p>
       
    <p>
        <input type="checkbox" name="generation" value="alpha" id="alpha">
        <label for="alpha">Alpha</label>
    </p>
    
</body>
</html>

input(files)

파일 업로드 폼을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>파일 업로드</h1>

    <input type="file" name="file-upload" id="">
    
</body>
</html>

textarea

게시물 작성 폼을 만들어라

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>새 게시물</h1>

    <p>
        <label for="title">제목</label>
        <input type="text" id="title">
    </p>

    <div>
        <label for="content">내용</label>
        <br>
        <!-- 
        rows: 입력 가능한 줄의 수. 그 이상이 되면 스크롤이 생긴다.
        cols: 한 줄에 입력가능한 글자의 수
         -->
        <textarea 
        name="content" 
        id="content"
        rows="5"
        cols="20"
        placeholder="내용을 입력하세요"
        ></textarea>
    </div>
    
</body>
</html>

textarea (2)

다음 그림을 참고해 댓글 입력란을 만들어라

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>Comments</h1>

    <textarea 
    name="content" 
    id="content"
    rows="5"
    cols="20"
    placeholder="Leave a comment.."
    ></textarea>

    <br>

    <button type="submit">Send</button>
    
</body>
</html>

select 예제 (1)

국가를 선택하는 개인정보 폼을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>개인정보</h1>

    <label for="country">국적</label>
    <!-- 선택 가능한 옵션을 제공한다 -->
    <select name="country" id="country">
        <!-- 사용자가 선택한 value가 전송된다 -->
        <option value="kr">대한민국</option>
        <option value="us">미국</option>
        <option value="jp">일본</option>
        <option value="uk">영국</option>
    </select>
    
</body>
</html>

select 예제 (2)

다음과 같이 수량을 선택하는 폼을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>T-Shirts</h1>

    <label for="amount">amount</label>

    <select name="amount" id="amount">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    
</body>
</html>

Media

img

문서에 이미지(image)를 생성한다. 다음은 img 엘리먼트의 속성이다.

img 활용 예제 (1)

HTML 문서에 이미지를 삽입하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
    src(sourse): 이미지의 주소
    alt(alternative text): 대체 텍스트. 이미지 가져오기에 실패한 경우 대신 보여준다
    width: 이미지 넓이(px)
     -->

    <img 
    src="http://tvvmvn.github.io/resource/img/hakuna-matata.jpg"
    alt="라이온 킹"
    width="200"
    >
    
</body>
</html>

img 활용 예제 (2)

HTML 문서에 좋아하는 이미지를 다음과 같이 삽입하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>고양이</h1>
    <br>
    <p>
        치즈
    </p>
    <img 
    src="https://www.fitpetmall.com/wp-content/uploads/2023/10/shutterstock_1844153299-1024x683-1.png" 
    alt="치즈"
    width="200"
    >
    <br>
    <p>
        고등어
    </p>
    <img 
    src="https://cdn.crowdpic.net/detail-thumb/thumb_d_7B130F55DB53F09CEEE163024C8DF7E6.jpg" 
    alt="고등어"
    width="200"
    >
    <br>
    <p>
        턱시도
    </p>
    <img 
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSY6UvuK34AW2b8jaXBv5k6leVj__WCFeWztoVCGaFa9v0DaqMe381wK5o&s=10" 
    alt="턱시도"
    width="200"
    >

    
</body>
</html>

Video

HTML 문서에 영상(비디오)를 추가한다. source 엘리먼트와 함께 사용된다.
다음은 video 태그의 속성이다.

video 활용 예제

HTML 문서에 샘플 비디오를 삽입하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
    controls: 컨트롤 버튼(재생/중지 버튼, 소리조절 등)
    autoplay: 자동재생
    muted: 음소거
    loop: 무한 재생
     -->
    <video
    controls
    autoplay
    muted
    loop
    width="400"
    >
        <source
        type="video/mp4"
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        >
    </video>

</body>
</html>

아이콘 사용하기

대표적인 HTML 아이콘 라이브러리로 fontawesome이 있다.

fontawesome 활용 예제

fontawesome 아이콘을 문서에 추가하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- fontawesome CDN-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" 
     integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" 
     crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

    <!-- 좋아요 아이콘 -->
     <i class="fa-solid fa-thumbs-up"></i>
    
</body>
</html>

iframe

inline frame을 을미하는 것으로 웹페이지 안에 또 다른 웹페이지를 액자처럼 삽입할 수 있게 해주는 엘리먼트이다.
유튜브 영상 퍼오기, 구글 지도 넣기, 광고 삽입 등에 사용된다.

유튜브 영상 넣기 예제

HTML 문서에 좋아하는 유튜브 영상을 삽입하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <iframe width="775" 
    height="444" 
    src="https://www.youtube.com/embed/mxROJA4Edo8?list=RDmxROJA4Edo8" 
    title="[𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭] 락은 사람을 찢어" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>

</body>
</html>

마무리

오늘은 HTML의 전체적인 내용을 모두 배웠다.
솔직히 조금 지루했었는데 좋아하는 사진을 넣고 동영상을 넣으며 움직이는 모습을 보니 재미있었다.
css랑 js까지 얼른 배워서 웹꾸를 빨리 하고 싶다.

너구

이전 포스트

풀스택 개발자 과정 34일차 +@

다음 포스트

풀스택 개발자 과정 35일차

풀스택 성장과정

레이아웃

레이아웃 구성 방식

Semantic Layout

Semantic 엘리먼트

시멘틱 레이아웃의 장점

Non-Semantic Layout

시멘틱 레이아웃 구성 예제

넌 시멘틱 레이아웃 구성 예제

Form

HTML 폼 (Form)

form

input

textarea

Select

label

button

form 엘리먼트 예제

input(text) 예제

input(password) 예제

input(date), input(time)

input(checkbox) (1)

input(checkbox) (2)

input(radio)

input(radio) (2)

input(files)

textarea

textarea (2)

select 예제 (1)

select 예제 (2)

Media

img

img 활용 예제 (1)

img 활용 예제 (2)

Video

video 활용 예제

아이콘 사용하기

fontawesome 활용 예제

iframe

유튜브 영상 넣기 예제

마무리

풀스택 개발자 과정 34일차 +@

풀스택 개발자 과정 36일차

0개의 댓글