🩵[HTML 4일차]

ttt00·2025년 9월 8일

HTML

목록 보기

4/4

1️⃣ <form> 태그

<label for = 'grade'>학년</label><br>
        <select name = "grade">
            <option value = "선택하세요" required>선택하세요.</option>
            <option value = "1"> 1학년</option>
            <option value = "2"> 2학년</option>
            <option value = "3"> 3학년</option>
        </select><br>
<label for = "tel">전화번호</label>
<input type = "tel" name = "phone" pattern = "^010-[0-9]{4}-[0-9]{4}$" placeholder="010-1234-1234">

2️⃣ <태그>

- ✅ <p> : 하나의 문단(블록 요소, 자동으로 줄바꿈)
- ✅ <br> : 줄바꿈
- ✅ <!--주석 내용--> : 주석 처리
- ✅ <html></html> : HTML문서의 시작과 끝
- ✅ <a>, <span> : 인라인 요소 (공간이 부족하면 밑으로 줄바꿈)
- ✅ <hN> : 글씨 크기
- ✅ <div> : container로 사용하는 태그 (의미X, CSS 적용시 레이아웃 나눔으로
디자인 다르게 적용)
- ✅ <ol> : 순서 있는 목록 (1.--- 2.--- 3.---)
- ✅ <ul> : 순서 없는 목록 (-... -... -...)
- ✅ <li> : 목록 항목 (<ol>, <ul> 각 항목을 정의할 때 사용)
- ✅ <a href = "링크">home</a> : 하이퍼링크 구문 
- ✅ <img src = "이미지 경로" alt = "이미지 설명 텍스트"> : 이미지 삽입
- ✅ <input type = "password"> : 비밀번호 입력창 (····)
- ✅ <input type = "number"> : 숫자 하나씩 증가 또는 감소
- ✅ <input type = "checkbox"> : 중복 선택 가능한 체크박스
- ✅ <input type = "radio"> : 같은 lable로 묶었을 때 중복 선택 불가한 체크박스
- ✅ <input type = "file"> : 파일 가져오기
- ✅ <input type = "submit"> : 제출 버튼
- ✅ <input type = "reset"> : 초기화 버튼
- ✅ <label for = "usergender">성별</label> : lable로 태그 요소(input)를 묶음으로써 설명(연결하려는 속성 같게하기)
- ⭐️ required : 필수 입력
- ⭐️ <pattern = "^010-[0-9]{4}-[0-9]{4}$"> : 전화번호 형식을 검사하는 pattern 속성 문법 (^ : 문자열 시작, [0-9]{4} : 0부터 9안에서 숫자 4자 $ : 문자열 끝)
- ⭐️ placeholder="010-1234-1234"> : 입력 예시

ttt00

이전 포스트

🩵[HTML 4일차]

HTML

1️⃣ <form> 태그

2️⃣ <태그>

🩵[HTML 3일차]

0개의 댓글