HTML 정리

sangeun·2026년 9월 19일

2026-2 farmsystem

<!DOCTYPE html>
<!-- 주석 표시 -->
 <html>
    <head>
        문서 제목, 자바스크립트 코드, CSS 스타일 정의, 메타 데이터 정의
        <title>텍스트 꾸미기</title>
    </head>
    <body>
        <h3> 텍스트 꾸미기</h3><hr>
        <p>
            
            이 문장은 텍스트를 꾸미는 방법을 보여줍니다.
            <b> 진하게</b><br>
            <strong> 굵게</strong><br>
            <em>강조</em><br>

        </p>
        문서의 본문 텍스트 이미지, 테이블, 자바스크립트 코드, 동영상 등
    </body>
</html>

블록 태그 사례 : <p> <h1>, <div>, <ul>

항상 새 라인에서 시작하고 브라우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지

인라인 태그 사례 : <strong>, <a>, <img> <span>

블록에 삽입되어 블록 콘텐트의 일부를 표현하는데 이용

pre 태그:

<pre>안녕 하세요 반갑습니다</pre>

안녕
    하세요
        반갑습니다

→ 작성한 모양 그대로:

<!DOCTYPE html>
<html>
    <head>
        <title>기본 테이블 만들기</title>
    </head>
    <body>
        <h3> 기본 구조를 가진 표</h3>
        <hr>
        <table border"1">
            <caption>2026 1학기 성적</caption>
            <thead>
                <tr>
                    <th>이름</th>
                    <th>HTML</th>
                    <th>CSS</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>합계</th>
                    <th>225</th>
                    <th>230</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>홍길동</td>
                    <td>90</td>
                    <td>95</td>
                </tr>
                <tr>
                    <td>김철수</td>
                    <td>80</td>
                    <td>85</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2026 1학기 성적
이름	HTML	CSS
합계	225	230
홍길동	90	95
김철수	80	85

<!DOCTYPE html>
<html>
    <head><title>링크 만들기
    </title></head>
    <body>
        <h3> 링크 만들기 </h3>
        <a href="#moving"> 이동</a>
        <hr>
        포털 사이트
        <ul>
            <li><a href="https://www.naver.com" target="_blank">네이버</a></li>
            <li><a href="https://www.daum.net">다음</a></li>
        </ul>
        <hr>
        <a href="2.html" id="moving">2.html</a>로 이동
        
    </body>
</html>

같은 파일내 id값을 설정해 해당 위치로 이동할 수 있게 href할 수 있다.

<!DOCTYPE html>
<html>
    <head><title>target 속성 활용</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3> target 속성 활용</h3>
        <hr>
        <iframe src="https://www.naver.com" width="400" height="300" name="iframe1"></iframe>
        <iframe src="4-1.html" width="300" height="200" name="right"></iframe>
    </body>
</html>

한 화면 내에 iframe을 통해 다중 웹을 보일 수 있으며 이중 중첩도 가능하다. 위치를 name으로 정의할 수 있으며 iframe의 내용을 name에 따른 target을 이용해 변경할 수 있다.

<!DOCTYPE html>
<html>
    <head><title> 사이트 리스트</title></head>
    <body>
        <h3> 사이트 리스트</h3>
        <hr>
        <ul>
            <li><a href="https://www.naver.com" target="right">네이버</a></li>
            <li><a href="https://www.daum.net" target="right">다음</a></li>
            <li><a href="https://www.w3c.org" target="iframe1">W3C</a></li>
        </ul>
    </body>
</html>

웹 문서 구조화

검색 엔진의 정보 제공을 위한 한계 존재

→ 시맨틱 웹(semantic web) 활용

<header> : 머리말

<section>: 문서의 장,절

<article>:보조적 기사(블로그 포스트, 댓글이나 독립적인 내용을 담는 영역

<aside>: 본문의 흐름에서 약간 벗어난 노트나 팁, 신문 잡지에서 주요 기사 옆 짤막하게 곁들이는 관련 기사

<footer>: 꼬리말(저자나 저작권 정보)

<figure>: 그림을 블록화

<!DOCTYPE html>
<html>
    <head>
        <title>figure 태그 활용</title>
    </head>
    <body>
        <h3>figure 태그 활용</h3>
        <hr>
        <figure id="1-1">
            <figcaption> alert() 함수 활용</figcaption>
            <pre>
                <code>function f() {alert("경고합니다");}</code>
            </pre>
            <hr>

            <small> 실행결과 </small>
            <pre><img src="1.png" alt="실행결과"></pre>
        </figure>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head><title>detail과 summary</title></head>
    <body>
        <h3>detail과 summary</h3>
        Q &amp; A 리스트
        <hr>
        <details>
            <summary>질문 1</summary>
            <p>
                질문 1에 대한 답변입니다.
            </p>
        </details>
        <details>
            <summary>질문 2</summary>
            <p>
                질문 2에 대한 답변입니다.
            </p>
        </details>
    </body>
</html>

<mark> : 중요한 텍스트임을 표시

<time>:시간 정보임을 표시

<meter> 주어진 범위나 데이터 양 표시

<progress> 작업의 진행 정도 표시

등

← 시맨틱 태그

section는 문서의 장 ↔ article 보조적 기사

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 문서 구조 시맨틱 태그 사용</title>
            <style>html,body{margin:0;padding:0;height:100%}
            .header{width:100%;height:15%;background-color:gray}
            .nav{width:15%;height:70%;float:left;background:orange}
            .section{width:70%;height:70%;float:left;background:yellow}
            .aside{width:15%;height:70%;float:left;background:green}
            .footer{width:100;height:15%;background-color:plum;clear:both}
            </style>
    </head>
    <body>
        <header class="header">haeder</header>
        <nav class="nav">nav</nav>
        <section class="section">section</section>
        <aside class="aside">aside</aside>
        
        <article class="article">article</article>
        <footer class="footer">footer</footer>
    </body>
</html>

css에서 영역을 정의해서 활용함. (div로 영역을 정의해서 사용할 수도 있음)

웹 폼

<!DOCTYPE html>
<html>
    <head><title>로그인 폼</title></head>
    <body>
        <h3> 로그인 폼 </h3>
        <hr>
        <form name="fo" method="get">
            사용자 ID : <input type="text" size="15" value=""><br>
            비밀 번호 : <input tytpe ="password" size="15" value=""><br>
            <input type="submit" value="완료">
        </form>
    </body>
</html>

사용자 ID :
비밀 번호 :

`<form>`

name 속성 : 폼의 이름 지정하는 속성(javascript에서 사용)

action : 웹 서버 응용프로그램 지정

→ submit시 , action속성에 지정된 웹 서버와 브라우저 연결 → 웹 서버 응용프로그램 실행 지시(with 입력 폼 데이터 전송)

method : 폼 데이터를 웹 서버로 전ㅅ송하는 형식 지시 (GET/POST)

form 요소:

<input type=”text||password”> , <textarea>

<!DOCTYPE html>
<html>
    <head><title>자기 소개서 작성</title></head>
    <body>
        <h3>자기 소개서 작성</h3><hr>
        <form>
            이름 : <input type="text" value=""><br>
            암호 : <input type="password" value="" maxlength="10"><br>
            자소서 : <textarea cols="30" rows="5"></textarea><br>
            <br><br>
            나라 : <input type="text" list="country">
            <datalist id="country">
                <option value="대한민국">
                <option value="미국">
                <option value="일본">
                <option value="중국">
            </datalist>
        </form>
    </body>
</html>

이름 :
암호 :
자소서 :

나라 :

text에 list값을 추가해서 <datalist id=”해당 값”>을 활용해 datalist를 구현할 수 있다.

input type=”button||submit||reset||image”와 button type=”’’” 의 유사성

<!DOCTYPE html>
<html>
    <body>
        <h3> 버튼을 만들자 </h3>
        <hr>
        <form>
            검색 : <input type="text" size="15" value=""><br>
            <input type="submit" value="Q1">
            <button type="submit">Q2</button><br>
            submit 버튼 : <input type="submit" value="전송1">
            <button type="submit">전송2</button><br>
            reset 버튼 : <input type="reset" value="리셋1">
            <button type="reset" >리셋2</button><br>
            이미지버튼 : <input type="image" src="button.png" alt="이미지 버튼">
            <button type="button">
                <img src="button.png" alt="이미지 버튼">
            </button>
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>라디오버튼 만들기</title>
    </head>
    <body>
        <h3>라디오버튼 만들기</h3>
        <hr>
        <form>
            <input type="radio" name="china" value="1"> 짜장면<img src="jajang.png" alt="짜장면"> <br>
            <input type="radio" name="china" value="2" checked> 짬뽕<img src="jjam.png" alt="짬뽕"> <br>
            <input type="radio" name="china" value="3"> 탕수육<img src="tang.png" alt="탕수육"> <br>
            <br><br>
            <select name="china">
                <option value="1">짜장면</option>
                <option value="2" selected>짬뽕</option>
                <option value="3">탕수육</option>
            </select>
        </form>
    </body>
</html>

name이 같은 것은 단일 선택만 가능. 추가로 checked를 통해 초기 선택지를 정의할 수 있음.

select로 datalist처럼 사용가능.

<!DOCTYPE html>
<html>
    <body>
        <form>
            <label>사용자 ID: <input type="text" size="15" value=""></label><br>
            <label for="pass"> 비밀번호 </label>
            <input type="password" size="15" value=""> <br>
            <input type="submit" value="완료"><hr>
            <label for="china">중국음식</label>
            <input type="radio" id="china" name="china" value="1">
            <label>
                <input type="radio" name="china" value="1">
                <img src="jajang.png" alt="짜장면"> 짜장면

            </label>
            <br><br><hr>
            <label>
                색 선택 <input type="color" value="#00BFFF" onchange="document.body.style.color=this.value">
            </label>
            <input type ="month" value="2024-06"><br>
            <input type="week" value="2024-W23"><br>
            <input type="date" value="2024-06-10"><br>
            <input type="time" value="12:00"><br>
            <input type="datetime-local" value="2024-06-10T12:00"><br>
            지속시간 : <input type="number" min="0.0" max="10.0" step="0.5" value="5.0"> <br><br>
            온도 설정 : <input type="range" min="0" max="100"  value="50" list="tem"><br><br>
            <datalist id="tem">
                <option value="0"></option>
                <option value="10"></option>
                <option value="20"></option>
                <option value="30"></option>
                <option value="80"></option>
                <option value="90"></option>
                <option value="100"></option>
            </datalist>
        </form>
        
    </body>
</html>

label을 활용해 선택시 텍스트나 그림을 선택해도 선택될 수 있게 만듦 추가로 라벨에 대한 하는 것을 선택지와 함께 군집가능.

<input type = “color”> 를 활용해 색 선택

<input type=”시간 관련”>을 통해 활용

<input type=”number||range”>를 통해 범위 설정 min max step할 수 있음.

<!DOCTYPE html>
<html>
    <head>
        <title>형식 유효성 검사</title>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>회원정보</legend>
                <input type="email" placeholder="id@host">
                <input type="url" placeholder="https://www">
                <input type="tel" placeholder="010-0000-0000">
                <input type="search" placeholder="검색어">
                <input type="submit" value="전송">
            </fieldset>
            
        </form>
    </body>

회원정보 email과 url은 placeholder를 통해 유효성검사를 통과해야 submit이 가능하다.

tel과 search는 형식만 제공해주며 search는 검색창에 x표로 삭제할 수 있게 함.

추가로 fieldset으로 폼 요소들을 그룹핑할 수 있으며 legend를 통해 그룹핑의 제목 출력을 표시해준다.

sangeun

이전 포스트

spring boot

다음 포스트

HTML 정리

웹 문서 구조화

웹 폼

<form>

spring boot

CSS

0개의 댓글

`<form>`