<LG CNS 5기> 3일차 TIL HTML5 Core 레이아웃 제어: Form, Box Model, Table, Media Query

728x90

SMALL

작성일: 2026.5.20

📌 오늘 학습한 주제

풀스택 프론트엔드 역량 강화 / HTML5 Core 레이아웃 제어: Form, Box Model, Table, Media Query의 이해와 실습

💡 오늘 배운 것

📍입력 폼 만들기

html 에서 html 이동시에는 get방식만 가능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배송예약 정보입력 최종</title>

    <link href="../css/reservation.css" rel="stylesheet">

    <style>
        /*
        주석구문: 선택자(class,id,tag) { 속성: 속성값 }
        내부 스타일 시트 적용
        ul {
            list-style: none;
        }
        label{
            width: 100px;
            float: left;
        }
        li{
            line-height: 30px;
        }
        button{
            background-color: bisque;
            border:none;
        }
        */
    </style>
    
</head>
<body>

    <form action="./thanks.html" method="get">
        
        <fieldset>
            <legend>배송예약 정보입력</legend>
            
            <ul>
                <li>
                    <label>주문상품</label>
                    
                    <input 
                    type="text" 
                    id="prd-name" 
                    name="prd-name"
                    placeholder="상품을 입력하세요">
                </li>
                <li>
                    <label>주문자명</label>
                    
                    <input 
                    type="text" 
                    id="prd-name" 
                    name="cus-name"
                    placeholder="상품을 입력하세요">
                </li>
                <li>
                    <label>배송지</label>
                    
                    <input 
                    type="text" 
                    id="prd-name" 
                    name="address"
                    placeholder="상품을 입력하세요">
                </li>
                 <li>
                    <label>연락처</label>
                    
                    <input 
                    type="tel" 
                    id="prd-name" 
                    name="tel"
                    placeholder="상품을 입력하세요">
                </li>
                 <li>
                    <label>배송일 지정</label>
                    
                    <input 
                    type="date" 
                    id="prd-name" 
                    name="date"
                    placeholder="상품을 입력하세요">
                </li>
            </ul>

            <div align="center">
                <button type="submit">예약</button>
                
                <button type="reset">취소</button>
            </div>

        </fieldset>
    </form>

</body>
</html>

- submit은 form의 액션과연결

- button은 form의 액션과 연결 x

📍박스 모델의 이해

* CSS 박스 모델(Box Model)은 쉽게 말해 모든 HTML 요소를 하나의 네모난 상자로 취급하는 개념이다.
* 실제 데이터가 담기는 'content', 박스 내부의 숨통을 트여주는 안쪽 여백인 'padding', 박스의 형태를 시각적으로 보여주는 경계선인 'border', 그리고 다른 요소와의 간격을 조절하는 바깥쪽 여백인 'margin'이 유기적으로 결합하여 최종적인 웹 컴포넌트의 물리적 크기를 결정한다.

📍테이블 생성하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="../css/table.css" rel="stylesheet">
     <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> -->
</head>
<body>

    <h2>상품 구성</h2>

    <table id="table">
        <caption>선물용 또는 가정용 상품 구성</caption>
        
        <thead>
            <tr>
                <th>용도</th>
                <th>중량</th>
                <th>갯수</th>
                <th>가격</th>
            </tr>
        </thead>

        <tbody id="tbody">
            <tr>
                <td rowspan="2">선물용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>35,000원</td>
            </tr>
            <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>52,000원</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="4">상품요약</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

/* 전체 페이지 여백 및 폰트 설정 */
body {
    padding: 40px;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

/* 제목 스타일 */
h2 {
    text-align: center;
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
}

/* 테이블 전체 스타일 */
#table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse; /* 셀 사이의 틈을 없애고 선을 하나로 합침 */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 테이블 외곽선에 부드러운 그림자 효과 */
    background-color: white;
}

/* 테이블 캡션(제목) 스타일 */
#table caption {
    font-size: 1.1em;
    font-weight: bold;
    color: #666;
    margin-bottom: 15px;
    caption-side: top; /* 캡션을 테이블 상단으로 배치 */
}

/* 테이블 헤더(thead) 스타일 */
#table thead th {
    background-color: #007bff; /* 파란색 배경 */
    color: white; /* 글자색 흰색 */
}

/* 테이블 셀(칸) 공통 스타일 */
#table th, #table td {
    padding: 12px 15px;
    border: 1px solid #ddd; /* 연한 회색 테두리 적용 */
    vertical-align: middle; /* 텍스트 수직 중앙 정렬 */
}

/* 테이블 푸터(tfoot) 스타일 */
#table tfoot td {
    background-color: #e9ecef; /* 약간 어두운 회색 */
    font-weight: bold;
    color: #333;
}

🔍 사용된 핵심 속성 분석

rowspan="2" (세로 셀 병합): 첫 번째 행의 '선물용' 칸이 아래쪽으로 총 2개의 행(Row)을 차지하도록 병합했다. 덕분에 두 번째 행에서는 '선물용' 데이터 자리를 비워두고 바로 <td>5kg</td>로 시작할 수 있게 된 것이다.
colspan="4" (가로 셀 병합): <tfoot> 구역의 '상품요약' 칸이 가로 방향으로 총 4개의 열(Column)을 통째로 차지하도록 병합했다. 표의 전체 너비만큼 한 줄을 가득 채울 때 실무에서 가장 많이 쓰는 방식이다.

📍media-Query

* 미디어 쿼리(@media)는 하나의 HTML 문서로 모바일, 태블릿, 데스크톱 등 다양한 디바이스 환경에 맞춰 레이아웃을 유연하게 변형시키는 반응형 웹의 핵심 기술이다.
* 브라우저의 가로 너비(min-width, max-width)를 중단점(Breakpoint)으로 설정하여, 기기 해상도가 변할 때마다 감지된 구역의 CSS 스타일(배경 이미지, 폰트 크기, 컴포넌트 배치 등)을 동적으로 스위칭하는 원리이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1. 모바일 구간 (320px ~ 767px) */
        @media screen and (min-width: 320px) and (max-width: 767px) {
            body {
                /* bg.jpg 이미지를 배경으로 깔고, 바둑판식 반복을 하지 않음(no-repeat) */
                background: url('../img/bg.jpg') no-repeat ;
            }
        }

        /* 2. 태블릿 구간 (768px ~ 1023px) */
        @media screen and (min-width: 768px) and (max-width: 1023px) {
            body {
                /* 태블릿 화면에 맞춰서 조금 더 가벼운 bg-light.jpg 이미지를 배경으로 지정 */
                background: url('../img/bg-light.jpg') no-repeat ;
            }
        }

        /* 3. 데스크톱 및 특정 해상도 이하 구간 (최대 1024px까지) */
        @media screen and (min-width: 1024px) {
            body {
                /* 1024px 이하 해상도 환경에서 bg.jpg 이미지를 배경으로 지정 */
                background: url('../img/bg.jpg') no-repeat ;
            }
        }
    </style>
</head>
<body>
    <h1>안녕하세요~ 미디어쿼리입니다.</h1>
</body>
</html>

🧐 오늘의 회고

이전에 프론트엔드를 경험해 본 적이 있지만, 이번 기회를 통해 HTML의 기본 뼈대와 레이아웃 구조, 그리고 기본적인 웹 서비스 통신 메커니즘을 아래 레이어부터 다시 확실하게 잡는 계기가 되었다. 특히 URL 구조와 HTTP 상태 코드의 명확한 인과관계를 학습하면서, 과거에 무심코 지나쳤던 프론트엔드와 백엔드 간의 데이터 흐름을 아키텍처 관점에서 재정립하는 유익한 시간이었다. 오늘 다진 탄탄한 기본기를 발판 삼아, 내일부터 진행될 자바스크립트의 깊이 있는 핵심 원리들도 막힘없이 파고들어 완벽한 풀스택 역량으로 확장해 나갈 것이다.

728x90

LIST

'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글

<LG CNS 5기> 6일차 TIL :React 컴포넌트 설계와 현대 자바스크립트(ES6+) 핵심 문법 (0)	2026.05.26
<LG CNS 5기> 5일차 TIL : 자바스크립트 제어문 및 비동기 통신(Promise / Async-Await) (0)	2026.05.22
<LG CNS 5기> 4일차 TIL : 동적 DOM 렌더링 및 이벤트 처리 (0)	2026.05.21
[LG CNS AM 5기] 2일차 TIL : HTML5 핵심 구조 (0)	2026.05.19
[Day 1] LG CNS AM Inspire Camp 5기 TIL (0)	2026.05.18

codiary

<LG CNS 5기> 3일차 TIL HTML5 Core 레이아웃 제어: Form, Box Model, Table, Media Query

'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글

티스토리툴바

<LG CNS 5기> 3일차 TIL HTML5 Core 레이아웃 제어: Form, Box Model, Table, Media Query

'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글

관련글

티스토리툴바