본문 바로가기
HTML5

HTML 2일차

by teg0 2025. 9. 10.

미디어

이미지

<h1>이미지 관련 태그</h1>
<!-- <img src="추가하려는 이미지 경로" [alt="이미지 설명 문구"] width="가로길이(px/%)" height="세로길이(px/%)"> -->

<img src="/Web/imgs/빵빵이.jfif" alt="빵빵이" width="" height="">
<p>불러올 이미지 리소스의 경로를 나타냄</p>
<img src="https://www.google.com/imgres?q=%EB%B9%B5%EB%B9%B5%EC%9D%B4&imgurl=https%3A%2F%2Fi1.sndcdn.com%2Fartworks-znAnUJP3I5CZk9cK-2DTUDA-t500x500.jpg&imgrefurl=https%3A%2F%2Fsoundcloud.com%2Fkyhsh98wtm2v%2Fedm-prod-dboby-studio&docid=-L_AMfURiPBEbM&tbnid=669gsz5ZItiWnM&vet=12ahUKEwjI_d7i9MyPAxUjUGwGHehMHzEQM3oECC0QAA..i&w=500&h=500&hcb=2&ved=2ahUKEwjI_d7i9MyPAxUjUGwGHehMHzEQM3oECC0QAA" alt="빵빵이">

<h3>alt 속성</h3>
<p>
    이미지의 경로가 잘못되었거나 이미지를 제대로 불러올 수 없을 때 대체 텍스트로 사용 <br>
    시각 장애인들을 위한 스크린리더에서 이미지를 읽어주는 설명 문구
</p>

<h3>width, height 속성</h3>
<h4>고정길이단위(px) : 화면사이즈와 상관없이 이미지크기는 고정되어 있음</h4>
<img src="/Web/imgs/빵빵이.jfif" alt="빵빵이" width="200" height="150">
<img src="/Web/imgs/빵빵이.jfif" alt="빵빵이" width="100" height="150">
<img src="/Web/imgs/빵빵이.jfif" alt="빵빵이" width="50" height="150">
<img src="/Web/imgs/빵빵이.jfif" alt="빵빵이" width="50" height="100">

<h4>가별길이 단위(%) : 화면사이즈 또는 부모요소 사이즈에 따라 이미지 크기가 변경</h4>
<img src="/Web/imgs/빵빵이.jfif" alt="빵빵이" width="10%" height="150">
<img src="/Web/imgs/빵빵이.jfif" alt="빵빵이" width="15%" height="150">
<img src="/Web/imgs/빵빵이.jfif" alt="빵빵이" width="20%" height="150">
<img src="/Web/imgs/빵빵이.jfif" alt="빵빵이" width="25%" height="150">

이미지 관련 태그

빵빵이

불러올 이미지 리소스의 경로를 나타냄

빵빵이

alt 속성

이미지의 경로가 잘못되었거나 이미지를 제대로 불러올 수 없을 때 대체 텍스트로 사용
시각 장애인들을 위한 스크린리더에서 이미지를 읽어주는 설명 문구

width, height 속성

고정길이단위(px) : 화면사이즈와 상관없이 이미지크기는 고정되어 있음

빵빵이 빵빵이 빵빵이 빵빵이

가별길이 단위(%) : 화면사이즈 또는 부모요소 사이즈에 따라 이미지 크기가 변경

빵빵이 빵빵이 빵빵이 빵빵이

 

오디오&비디오

<h1>오디오 관련 태그</h1>
    <!-- <audio src="오디오파일경로" controls autoplay loop></audio> 
        controls : 재생도구 출력 여부
        autoplay : 자동재생(브라우저별로 지원x)
        loop : 반복재생
    -->
    
    <br>

    <h1>비디오 관련 태그</h1>
    <!-- <video src="비디오파일경로" controls autoplay loop width="100" height="100" poster="썸네일"></video> -->
    <video src="비디오파일경로" controls autoplay loop width="300" height="200" poster="./imgs/빵빵이.jfif"></video>

오디오 관련 태그


비디오 관련 태그

 

영역

div와 span의 차이

1. 줄 바꿈 처리

<h3>div영역</h3>
<div style="background: red;">첫번째 영역</div>
<div style="background: orange;";>두번째 영역</div>
<div style="background: yellow;">세번째 영역</div>

<h3>span태그</h3>
<p>span태그는 인라인 요소로 content영역만 차지(줄바꿈 발생 x)</p>
<span style="background: red;">첫번째 영역</span>
<span style="background: orange;">두번째 영역</span>
<span style="background: yellow;">세번째 영역</span>

 

div영역

첫번째 영역
두번째 영역
세번째 영역

span태그

span태그는 인라인 요소로 content영역만 차지(줄바꿈 발생 x)

첫번째 영역 두번째 영역 세번째 영역

 

2. 영역지정방식

<h3>div태그 : 사각형 박스로 영역을 지정</h3>
<div style="height: auto;">
    삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 
    갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 
    삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
</div>
<h3>span태그 : 문장단위로 영역을 지정</h3>
<span style="height: auto;">
    삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 
    갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 
    삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
</span>

div태그 : 사각형 박스로 영역을 지정

삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.

span태그 : 문장단위로 영역을 지정

삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.

 

iframe

(요즘 사용하지 않는다고 함)

<h1>iframe</h1>
<p>웹문서 안에 다른 웹페이지를 추가하는 태그(인라인 요소)</p>
<iframe src="01_글자관련태크.html" frameborder="0" width="300" height="300"></iframe>
<iframe src="02_목록관련태그.html" frameborder="0" width="300" height="300"></iframe>
<iframe src="03_표관련태그.html" frameborder="0" width="300" height="300"></iframe>
<iframe src="04_미디어관련태그.html" frameborder="0" width="300" height="300"></iframe>

iframe

웹문서 안에 다른 웹페이지를 추가하는 태그(인라인 요소)

 

하이퍼 링크

하이퍼링크 기능은 웹문서의 가장 핵심적인 기능.
클릭을 통해 연결된 곳으로 이동하여 사용을 편리하게 해주는 기능.
텍스트를 클릭해 링크를 이동하는 방법, 이미지를 클릭해 링크로 접속하는 방법 등이 존재.
페이지 내에서의 링크를 통한 이동도 가능.

<h1>a(anchor)태그 : 하이퍼링크를 걸어주는 태그</h1>
<!-- <a href=""> href속성으로 연결링크를 지정할 수 있음</a> -->
<ul>
    <li><a href="01_글자관련태크.html">글자관련태그</a></li>
    <li><a href="02_목록관련태그.html">목록관련태그</a></li>
    <li><a href="03_표관련태그.html">표관련태그</a></li>
    <li><a href="04_미디어관련태그.html">미디어관련태그</a></li>
</ul>

<h3>target 속성 : 연결된 페이지를 어느  탭에서 열것인지를 지정(_self(기본값), _blank)</h3>
<a href="https://www.naver.com" target="_blank">네이버</a>

<h3>img태그 이용해서 링크 만들기</h3>
<a href="https://www.naver.com">
    <img src="/Web/imgs/빵빵이.jfif" alt="빵빵이">
</a>

a(anchor)태그 : 하이퍼링크를 걸어주는 태그

target 속성 : 연결된 페이지를 어느 탭에서 열것인지를 지정(_self(기본값), _blank)

네이버

img태그 이용해서 링크 만들기

빵빵이

 

Id를 찾아 이동

<h3 id="main">한 페이지 내에서 아이디 속성(페이지내에 오직 1개)를 통해서 이동 -> 식별자이동</h3>
    <a href="#main2">맨 아래로 이동</a>
    <h4>본문내용</h4>
    <p>
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
    
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
    </p>

        <h4 id="main2">본문내용</h4>
    <p>
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
    
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
        삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.
    </p>

    <br><br>
    <a href="#main">맨 위로 이동</a>

 

한 페이지 내에서 아이디 속성(페이지내에 오직 1개)를 통해서 이동 -> 식별자이동

맨 아래로 이동

본문내용

삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.

본문내용

삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다. 삼성전자가 올해 안에 출시를 예고한 ‘두 번 접는’ 폴더블폰이 약 5만 대 한정 수량으로 판매될 전망이다. 갤럭시 Z 폴드와 플립 시리즈에 이어 새로운 형태의 ‘트리폴드폰’을 내놓으며, 삼성은 폴더블폰 제품군 확장에 본격적으로 나선다.



맨 위로 이동

 

입력

input 태그

<h1>입력양식 관련태그</h1>

<h2>input태그</h2>
<p>사용자에게 값을 입력받을 수 있는 텍스트상자 또는 체크박스등을 만들 수 있음</p>

아이디 : <input type="text"> <br>
비밀번호 : <input type="password"> <br>
성별 : <label>
            <input type="radio" checked name="gender"> 남
        </label>
        <label>
            <input type="radio" name="gender"> 여 <br>
        </label>
<!-- <label></label> label : 특정요소를 설명하는 글을 표현할때 사용하는 태그 -->
<br>
<input type="button" value="회원가입">
<button><img src="/Web/imgs/빵빵이.jfif">취소</button>

입력양식 관련태그

input태그

사용자에게 값을 입력받을 수 있는 텍스트상자 또는 체크박스등을 만들 수 있음

아이디 :
비밀번호 :
성별 :

 

input type

<h2>text와 관련된 input태그의 타입</h2>
<h3>type="text"(기본값)</h3>
<p>
    한줄씩 텍스트를 입력할 수 있는 텍스트상자 <br>
    maxlength(최대길이), placeholder(설명), required(필수입력)등의 속성과 함께 사용
</p>
아이디 : <input type="text" name="userId" placeholder="아이디를 입력하세요" maxlength="12" required>
<br>

<h3>type="password"</h3>
<p>
    입력한 문자를 ***형태로 가려줌, 비밀번호 입력에 사용, 속성은 text와 동일하게 사용함
</p>

<h3>이외 텍스트관련 타입</h3>
<input type="search" value="홍길동">
<input type="url">
<input type="email">

text와 관련된 input태그의 타입

type="text"(기본값)

한줄씩 텍스트를 입력할 수 있는 텍스트상자
maxlength(최대길이), placeholder(설명), required(필수입력)등의 속성과 함께 사용

아이디 :

type="password"

입력한 문자를 ***형태로 가려줌, 비밀번호 입력에 사용, 속성은 text와 동일하게 사용함

이외 텍스트관련 타입

 

숫자, 날짜, 시간 type

<h2>숫자와 관련된 input태그의 타입</h2>
<h3>type="number"</h3>
<p>
    숫자만 입력 가능, 스핀박스 표시<br>
    min, max, step등의 속성사용 가능
</p>
<input type="number" name="amount" min="0" max="20" step="5">

<h3>type="range"</h3>
<p>슬라이드바를 통해 숫자를 입력</p>
<input type="range" min="0" max="20" step="10" value="10">

<hr>

<h2>날짜및 시간 입력</h2>
<h3>type="date | month | week | time | datetime-local</h3>
date : <input type="date"><br> <!--연도/월/일-->
month : <input type="month"><br> <!--연도/월-->
week : <input type="week"><br> <!--연도/주-->
time : <input type="time"><br> <!--시/분-->
datetime-local : <input type="datetime-local"><br> <!--연도/월/일/시/분-->
<!-- date, time 사용 추천 -->

숫자와 관련된 input태그의 타입

type="number"

숫자만 입력 가능, 스핀박스 표시
min, max, step등의 속성사용 가능

type="range"

슬라이드바를 통해 숫자를 입력

날짜및 시간 입력

type="date | month | week | time | datetime-local

date :
month :
week :
time :
datetime-local :

 

radio type & checkbox

<h2>radao button</h2>
<p>
    여러 항목 중 하나만 선택 가능 <br>
    같은 name 속성값을 가진 라디오버튼끼리 그룹화
</p>
<label>
    <input type="radio" checked name="color" value="red"> 빨강
</label>
<label>
    <input type="radio" name="color" value="blue"> 파랑
</label>

<h2>checkbox</h2>
<p>
    동시에 여러값을 선택할 수 있음 <br>
    같은 name을 부여하면 배열형태로 서버에 전달됨
</p>
    <label>
    <input type="checkbox" checked name="color" value="red"> 빨강
</label>
<label>
    <input type="checkbox" name="color" value="blue"> 파랑
</label>
    <label>
    <input type="checkbox" name="color" value="yellow"> 노랑
</label>

radao button

여러 항목 중 하나만 선택 가능
같은 name 속성값을 가진 라디오버튼끼리 그룹화

checkbox

동시에 여러값을 선택할 수 있음
같은 name을 부여하면 배열형태로 서버에 전달됨

 

textarea

<h2>여러줄 입력 : textarea태그</h2>
<p>
    여러줄의 텍스트를 한번에 입력 가능<br>
    cols, rows로 크기 지정, resize:none으로 크기조절 제한 가능
</p>
<textarea name="descript" style="resize: none;", cols="50" rows="10">안녕하세요</textarea>

여러줄 입력 : textarea태그

여러줄의 텍스트를 한번에 입력 가능
cols, rows로 크기 지정, resize:none으로 크기조절 제한 가능

 

form 태그

<h1>폼(form) 관련 태그</h1>
<p>
    폼 태그는 사용자로부터 입력을 받아 서버에 전달하는 영역을 정의하는 html태그 <br>
    폼 태그내에 submit버튼을 클릭시 해당 폼안에 작성된 input요소의 값들을 전부 서버로 전달하는 요청을 보냄<br>

    action="" method="" <br><br>
    action : 해당 폼에 사용자가 입력한 값들을 전당하면서 요청을보낼 서버의 경로 <br>
    method : 요청 전송방식을 지정하는 속성(get(기본값), post) <br>
        get : 요청시 사용자가 입력한 값들을 head에 담아 전송한다 -> url에 값이 전부 노출 <br>
        post : 요청시 사용자가 입력한 값들을 http 본문(body)에 숨겨서 전송 -> url에 값이 노출x <br><br>

        폼내에 submit버튼을 클릭시 action에 지정된 서버로 사용자가 입력한 값들이 전달되면서 요청됨
</p>

<form action="https://search.naver.com/search.naver" method="get">
    <label for="q">검색어</label>
    <input type="text" id="q" name="query">
    <input type="submit" value="검색">
    <!-- <button type="submit">검색</button> -->
</form>

폼(form) 관련 태그

폼 태그는 사용자로부터 입력을 받아 서버에 전달하는 영역을 정의하는 html태그
폼 태그내에 submit버튼을 클릭시 해당 폼안에 작성된 input요소의 값들을 전부 서버로 전달하는 요청을 보냄
action="" method=""

action : 해당 폼에 사용자가 입력한 값들을 전당하면서 요청을보낼 서버의 경로
method : 요청 전송방식을 지정하는 속성(get(기본값), post)
get : 요청시 사용자가 입력한 값들을 head에 담아 전송한다 -> url에 값이 전부 노출
post : 요청시 사용자가 입력한 값들을 http 본문(body)에 숨겨서 전송 -> url에 값이 노출x

폼내에 submit버튼을 클릭시 action에 지정된 서버로 사용자가 입력한 값들이 전달되면서 요청됨

로그인

 

select box

<h2>select box</h2>
<p>드롭다운 목록에서 무조건 하나를 선택</p>
<select name="menu">
    <option value="1">국밥</option>
    <option value="2" selected>비빔밥</option>
    <option value="3">피자</option>
</select>
<!-- 만약 피자 선택 후 서버로 선택시 데이터는 menu=3으로 전송됨 -->

select box

드롭다운 목록에서 무조건 하나를 선택

 

'HTML5' 카테고리의 다른 글

HTML 1일차  (0) 2025.09.09

관련글

티스토리툴바