영역 관련 태그
block 형식
- 항상 새로운 줄에서 시작
- 이전 요소의 아래에 위치 (블럭이 아래로 쌓임)
- 크기를 지정하는 width, height 속성을 사용할 수 있음
ex) p/pre (문단 나누기), h1~h6 (제목 영역 나누기)
hr (수평선 넣어서 화면 나누기), div (영역 나누기) (division)
ul, li 등
inline 형식
- 동일한 줄에 다른 inline 요소와 나란히 배치
- 크기를 지정하는 width, height 속성을 사용할 수 없음
(콘텐츠의 너비만큼 차지)ex) strong/b, em/i, mark, span (한줄을 나누는 용도)
block(div) / lnline(span) 차이점 1: 줄바꿈(개행)
div 태그
block 형식의 태그는 한 줄을 모두 차지하기 때문에
뒤에 오는 내용은 다음 줄에 작성이 된다.<div>첫번째 영역</div> <div>두번째 영역</div> <div>세번째 영역</div>span 태그
inline 형식의 태그는 한 줄 내에서 일정한 칸을 차지하기 때문에
뒤에오는 내용은 줄이 바뀌지 않고 옆에 붙어 출력된다.<span>첫번째 영역</span> <span>두번째 영역</span> <span>세번째 영역</span>
block(div) / inline(span) 차이점 2 : 영역 지정 방식
- block : 사각형 박스 형태로 영역을 지정
- lnline : 내부에 작성된 내용(content) 단위로 영역을 지정
<div style="background-color: chartreuse;"> 1. 동해물과 백두산이 마르고 닳도록 <br> 하느님이 보우하사 우리나라 만세 <br> 무궁화 삼천리 화려 강산 <br> 대한 사람 대한으로 길이 보전하세 <br> 2. 남산 위에 저 소나무 철갑을 두른 듯 <br> 바람 서리 불변함은 우리 기상일세 <br> 무궁화 삼천리 화려 강산 <br> 대한 사람 대한으로 길이 보전하세 <br> </div> <span style="background-color:orange;"> 1. 동해물과 백두산이 마르고 닳도록 <br> 하느님이 보우하사 우리나라 만세 <br> 무궁화 삼천리 화려 강산 <br> 대한 사람 대한으로 길이 보전하세 <br> 2. 남산 위에 저 소나무 철갑을 두른 듯 <br> 바람 서리 불변함은 우리 기상일세 <br> 무궁화 삼천리 화려 강산 <br> 대한 사람 대한으로 길이 보전하세 <br> </span>
block(div) / inline(span) 차이점 3: 크기 지정(width / height)
- block : 크기 지정 가능
- inline : 크기 지정 불가능
<h3>div 태그</h3> <!-- 크기조정 됐고 아래로 쌓이고--> <div style="width: 200px; height: 200px;">Test</div> <div style="width: 200px; height: 200px;">Test</div> <h3>span 태그</h3> <!-- 크기 안 바뀌고 옆으로 쌓이고--> <span style="width: 200px; height: 200px;">Test</span> <span style="width: 200px; height: 200px;">Test</span>
ifram
- 웹문서 내부에 다른 웹문서를 추가하는 태그
lnline 형식이지만 크기 지정 가능<iframe src="05_표연습문제.html" width="800px" height="1000px"></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/cw8k2ISOnD8?si=jJ8J6RWqegtnSCWA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
이미지 관련 태그
img 태그
- inline 형식이지만 크기를 지정할 수 있음
- 웹문서에 사진, 그림같은 이미지를 삽입하는 용도의 태그
[속성]
1) src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹주소)
2) width / height : 이미지의 크기를 지정하는 속성
3) alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접표시
- 상대 경로 : 현재 위치를 기준으로 경로를 지정
.. : 상위 폴더
/ : 아래, 하위, 안쪽 폴더
./ : 동일 레벨의 폴더나 파일
- 절대 경로 : 웹사이트의 루트폴더(/) 기준으로 경로 지정
http://192.168.50.237:5500/1_HTML5/07_이미지관련태그.html
5500/ <- 이 슬래시가 루트 폴더<img src="/images/cats/cat1.jpg">
<!-- 웹이미지 경로(웹상 절대 경로)를 이용해서 이미지 출력--> <img src="https://plus.unsplash.com/premium_photo- 1670444332402-4cb1347f5a55? w=500&auto=format&fit=crop&q=60&ixlib=rb- 4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3M tZmVlZHwzM3x8fGVufDB8fHx8fA%3D%3D">
width, height 속성을 이용한 크기 조절(고정/가변크기)
고정 크기 단위(px)
- 화면의 크기와 상관없이 지정된 값의 크기를 갖는 단위
<img src="/images/dogs/dog1.jpg" width="300px" height="300px"> <img src="/images/dogs/dog2.jpg" width="300px" height="300px"> <img src="/images/dogs/dog3.jpg" width="300px" height="300px"> <img src="/images/dogs/dog4.jpg" width="300px" height="300px"> <img src="/images/dogs/dog5.jpg" width="300px" height="300px"> <!-- 창을 늘리든 줄이든 사진의 크기는 변하지 않음-->
가변 크기 단위(%)
- 화면이나 영역 기준으로 사이트 크기에 따라 이미지의 크기가 변경되는 단위
<img src="/images/cats/cat1.jpg" width="45%"> <!--height는 오토가 됨, 반대도 마찬가지 --> <img src="/images/cats/cat2.jpg" width="45%"> <img src="/images/cats/cat3.jpg" width="45%"> <img src="/images/cats/cat4.jpg" width="45%"> <img src="/images/cats/cat5.jpg" width="45%">
alt 속성 확인
<img src="/images/cats/cat6.jpg " alt="고양이1">
하이퍼링크 관련 태그
a (anchor) 태그
- a태그는 현재 HTML 문서와 다른 HTML 문서를 연결해서
페이지 이동을 할 수 있게 하는 기능을 제공.- 이때, a 태그로 감싸진 문자열 == 하이퍼링크
a태그를 이용한 하이퍼링크 구현
<ul> <li> <a href="01_글자관련태그.html">01_글자관련태그</a> </li> <li> <a href="02_목록관련태그.html" target="_blank">02_목록관련태그</a> </li> <li> <a href="https://www.naver.com" target="_blank">네이버로 이동</a> </li> </ul>
target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성
기본값 : 같은 탭
_blank : 새 탭
이미지 클릭 시 페이지 이동
<a href="https://www.naver.com"> <img src="/images/flowers/flower1.jpg" width="120px"> </a>
한 페이지 내에서 이동하기
<ul id="list"> 목록 <li><a href="#cat1">고양이1</a></li> <li><a href="#cat2">고양이2</a></li> <li><a href="#cat3">고양이3</a></li> </ul> <h3 id="cat1">고양이1</h3> <img src="/images/cats/cat1.jpg"> <h3 id="cat2">고양이2</h3> <img src="/images/cats/cat2.jpg"> <h3 id="cat3">고양이3</h3> <img src="/images/cats/cat3.jpg"> <a href="#list">목록으로 이동</a>
각 목록들을 클릭하면 해당 사진으로 이동!!
입력 관련 태그
input 태그
- 웹문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그
text 관련된 input 태그
- type="text"
- 한 줄 짜리 문자열(텍스트)을 입력할 수 있는 입력 상자
- input 태그의 type의 기본값으로, 생략 가능하다.
- inline 형식 (모든 input 태그는 inline)
<input> <input type="text">
text 관련 input 태그의 공용 속성
- size : 입력 상자 크기
- manlength : 입력 받는 텍스트의 최대 길이
- placeholder : 입력 상자에 작성될 내용을 설명
type="text"
아이디 : <input type="text" size="15" placeholder="아이디 입력">
type="password"
- 비밀번호 입력 상자 (단순히 입력되는 텍스트를 가려줌)
비밀번호 : <input type="password">
type="url"
- 주소 입력 시 사용하는 입력 상자
홈페이지 : <input type="url" value="https://"> <!-- value : 모든 input 태그의 type에서 사용 가능한 속성 input 태그에 들어갈 초기값을 지정 -->
type="tel"
- 전화번호 입력 시 사용하는 입력 상자
전화번호 : <input type="tel" placeholder="'-'' 기호 포함">
type="email"
- 이메일 입력 시 사용하는 입력 상자
이메일 : <input type="email">
<!-- url, email, tel 단독 사용 시 type="text"와 같지만 form 태그 내부에서 사용되면 각 type에 따라 입력된 값이 용도에 맞는 값인지 간단히 검사. 단, tel은 유효한 전화번호 형식인지 검사하는게 아니라 모바일 환경에서 키패드를 켜준다는 특징이 있음. -->숫자 관련 input 태그
- min : 최소값
- max : 최대값
- step : 증가/감소 단계 지정
type="number"
- 숫자만 입력할 수 있는 입력 상자
- 브라우저에 따라 스핀박스 표시되게 함
점수 입력 : <input type="number" step="10" min="0" max="100">
type="range"
- 슬라이드바를 이용해서 숫자 지정(단독 사용 X, JS와 함께 사용)
<input type="range" min="0" max="50" step="10">
날짜/시간 관련된 input 태그
<input type="date"> <br> <input type="month"> <br> <input type="week"> <br> <input type="time"> <br> <input type="datetime-local">
radio와 checkbox
- 여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type
- 묶음으로 다루려는 input 태그들은 반드시 같은 name 속성값을 가져야 한다 !!!!!!!
name 속성
- radio, checkbox 뿐만 아니라 input 태그들 중
관련된 것들을 묶어서 부를 때 사용 (== 그룹 이름)- 서버쪽에 제출되는 input태그 값의 이름 지정
(form 태그와 같이 사용)radio : <input type="radio"> checkbox : <input type="checkbox">
type="radio"
성별 선택 <!-- name이 같으면 같은 그룹이구나 해서 하나만 선택 가능 --> <label for="male">남</label> <input type="radio" name="gender" id="male"> <label>여 <input type="radio" name="gender"></label>
<!-- lable 태그 : 입력해야 할 내용을 설명하는 텍스트 제공. 보통 radio, checkbox와 함께 사용. for 속성 : 연결할 입력창의 id 속성과 일치하게 끔 작성. 입력창과 label를 연결해줌. -->type="checkbox"
<h5>취미 선택</h5> <!-- hobby={야구, 축구, 농구} --> <label>야구 <input type="checkbox" name="hobby"> </label> <label>축구 <input type="checkbox" name="hobby"> </label> <label>농구 <input type="checkbox" name="hobby"> </label>
기타 input 태그
type="color" : <input type="color"> <br> type="file" : <input type="file"> <br> type="hidden" : <input type="hidden" value="홍길동"> <!-- 화면 상에는 보이지 않지만 분명 값은 존재함 form 태그 안에서 사용하면 화면상에서 보이지 않지만 서버로 value에 있는 값이 제출됨 -->
form 태그
- div와 같은 영역(block 형식)
- 내부에 작성된 input 태그의 값을 서버로 전달하는 역할
[속성]
1) action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
(미작성 시 기본값으로 현재 페이지의 URL 적용)2) name : form 태그의 이름을 지정하여 form 태그 구분(JS 사용)
3) method(방식) : 서버로 데이터 전달하는 방식을 지정하는 속성
- GET / POST 지정 가능(기본값 GET)4) target : action에 지정된 주소를 현재탭/새탭 중 어디서 열지 지정
form 예시 1
<!-- 기본값이 GET 방식 --> 아이디 : <input type="text" name="id" value="user01"> <br> 비밀번호 : <input type="password" name="pw"> <input type="hidden" name="secret" value="hello"> <!-- 화면에 보이진 않지만 주소창엔 보임 --> <button>제출</button>
<!-- 주소?id=user01&qw=1234 ? : 제출된 값을 나타내는 문자열의 시작부분 id, pw : input 태그 name 속성값 user01, 1234 : input 태그에 입력한 값(value값) id=user01&qw=1234 : name 속성값인 'id'인 input 태그에 작성된 값 'user01'과 name 속성값인 'pw'인 input 태그에 작성된 값 '1234'가 GET 방식으로 제출되었다. (제출하면 주소창에 입력한 값이 노출됨) --> <!-- button 태그 : 클릭 가능한 버튼을 생성. 폼 제출, JS와 연결된 기능 수행 역할 type 속성 1. submit (기본값) : 폼 태그 내부에 작성되어 있을 때 클릭이 되면 input에 작성된 값을 서버로 제출하는 역할. 2. reset : 입력창 안에 작성된 내용을 초기화하는 기능. 3. button : 그냥 버튼(+ JS 연결하여 사용) -->form 예시 2
<!-- type이 checkbox, radio인 경우 value 속성값이 없으면 on 이라는 값으로 제출됨. value 속성값이 있으면 value 속성값으로 제출됨. --> <form action="07_이미지관련태그.html" target="_blank" method="get"> <input type="checkbox" name="hobby" value="야구"> 야구 <!-- hobby=야구 --> <input type="checkbox" name="hobby" value="축구"> 축구 <!-- hobby=축구 --> <input type="checkbox" name="hobby" > 게임 <!-- hobby=on, name 까지 지우면 축구에서 끝남--> <button>제출</button>
<form> <input> <button type="reset">초기화</button> </form> <br> <button type="button" id="btn">그냥 버튼</button><script> // 자바스크립트 영역 document.getElementById("btn").addEventListener("click", function(){ // click 했을 때 어떤 기능을 수행할 지 작성 alert("버튼 클릭됨"); }); </script>
fieldset / legend
- fieldset : 테두리를 만들어 그룹을 구분하는 영역
- legend : fieldset 테두리에 이름을 붙이는 것
<form> <fieldset> <legend>로그인 폼</legend> 아이디 : <input> <br> 비밀번호 : <input type="password"> <button>로그인</button> </fieldset> </form>
textarea / select & option
- textarea 태그 : 여러줄을 입력하기 위한 입력상자
<textarea rows="5" cols="70" placeholder="자기소개를 입력하세요..." style="resize:none;"> </textarea>
select 태그와 option 태그
<form> <select name="test"> <option value="1">선택1</option> <option>선택2</option> <option selected>선택3</option> <option>선택4</option> <option disabled>선택5</option> </select> <button>제출</button> </form>
<!-- select 제출 시 option 태그에 value가 있으면 : value 속성안에 작성된 값 option 태그에 value가 없으면 : <option></option> 사이에 작성된 값이 제출됨 selected 속성 : select의 기본값을 설정하는 속성 disabled 속성 : option을 비활성화(클릭 및 입력 불가) --> <input type="checkbox" checked> <input type="radio" checked> <!-- checked 속성 : checkbox / radio 체크해두는 속성 -->
연습문제
1번
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>10_HTML연습문제1</title> </head> <body> <p> 고객명 : <input type="text" size="15"> <br> <br> 전화번호 : <input type="tel" size="20"> <br> <br> E-Mail : <input type="email" size="20"> <br> <br> <form> 피자선택 : <select> <option>피자를 선택하세요</option> <option>페퍼로니피자</option> <option>치즈피자</option> <option>고구마피자</option> </select> </form> </p> <form> <fieldset> <legend>피자 사이즈</legend> <label><input type="radio" name="pizza"></label> Small <br> <br> <label><input type="radio" name="pizza"></label> Medium <br> <br> <label><input type="radio" name="pizza"></label> Large <br> </fieldset> </form> <form> <fieldset> <legend>토핑 선택</legend> <label><input type="checkbox" name="베이컨"></label> 베이컨 <br> <br> <label><input type="checkbox" name="치즈"></label> 치즈 <br> <br> <label><input type="checkbox" name="양파"></label> 양파 <br> <br> <label><input type="checkbox" name="버섯"></label> 버섯 <br> </fieldset> </form> <p> 희망배송시간 : <input type="time"> <br> <br> 배송 시 요청사항 : <textarea rows="3" cols="20"></textarea> <br> <br> <button>주문하기</button> </p> </body> </html>
2번
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>11_HTML연습문제2</title> </head> <body> <form> <fieldset> <legend>납품자 정보</legend> <ol type="1"> <li>납품자명 : <input type="text" size="15"></li> <br> <li>email : <input type="email" placeholder="answer@naver.com"></li> <br> <li>홈페이지 : <input type="url" value="https://"></li> <br> <li>지역 : <form> <select> <option>서울</option> <option>경기</option> <option selected>부산</option> <option>제주</option> </select> </li> </ol> </form> </fieldset> </form> <form> <fieldset> <legend>납품 정보</legend> <p> <ul> <li>상품명 : <input type=""></li> <br> <li>납품 수량 : <input type="" placeholder="최소 100"></li> <br> <li>납품 등급 : <input type="range" min="0" max="10" step="1"></li><br> <li>기타사항 : <textarea rows="5"></textarea></li> </ul> </p> </fieldset> </form> <br> <button>send message</button> </body> </html>
3번
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>12_HTML연습문제3</title> </head> <body> <h1>회원 가입</h1> <br> <form> <fieldset> <legend>필수 입력 정보</legend> <table> <tr> <th>ID</th> <td> <input type="" size="15"> <button>중복 확인</button> </td> </tr> <tr> <th>비밀번호</th> <td colspan="2"> <input type="" size="25" placeholder="영문,숫자,특수문자 포함 8자 이상"> </td> </tr> <tr> <th>비밀번호 확인</th> <td colspan="2"> <input type="" size="25"> </td> </tr> <tr> <th>Email</th> <td> <input type="" size="15"> <form> <select> <option>직접입력</option> <option>naver.com</option> <option>daum.net</option> <option>nate.com</option> </select> </form> </td> </tr> </table> </fieldset> </form> <form> <fieldset> <legend>추가 정보</legend> 프로필 사진 <button>파일 선택</button> <small>선택된 파일 없음</small> <br> <br> 성별 : <label><input type="radio" name="gender"> 남자</label> <label><input type="radio" name="gender"> 여자</label> <br> <br> 생년월일 : <input type="date"> <br> <br> 취미 <br> <label> <input type="checkbox" name="hobby"> 야구 <input type="checkbox" name="hobby"> 농구 <input type="checkbox" name="hobby"> 축구 <br> <input type="checkbox" name="hobby"> 공부 <input type="checkbox" name="hobby"> 음악감상 <br> <input type="checkbox" name="hobby"> 기타 <input type="" size="15"> <br> <br> 자기소개<br> <textarea rows="10" cols="70" style="resize: none;"></textarea> </label> </fieldset> </form> <br> <button>회원가입</button> <button>다시입력</button> <button>이전으로</button> </body> </html>
인생은 변수