☝🏻오늘 배운 것
1. image 관련 태그
- img 태그
http://192.168.50.201:5500/07_%EC%9D%B4%EB%AF%B8%EC%A7%80%EA%B4%80%EB%A0%A8%ED%83%9C%EA%B7%B8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_이미지관련태그</title>
</head>
<body>
<h1>img 태그</h1>
<pre>
- 웹 문서에 사진, 그림 같은 이미지를 삽입하는 용도의 태그
[속성]
1) src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹주소)
2) width / height : 이미지의 크기를 지정하는 속성
3) alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접 표시
(웹접근성과 관련이 있음)
</pre>
<hr>
<h3>scr 속성 확인</h3>
<!--
상대경로 : 현재 위치를 기준으로 경로 지정
.. : 상위 폴더
/ : 아래, 안쪽, 안에
./ : 동일 레벨
-->
<img src="./images/daggu/1.png">
<hr>
<!--웹 이미지경로(웹상 절대 경로)를 이용해서 이미지 출력-->
<img src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80">
<hr><hr>
<h2>width, height 속성을 이용한 크기 조절(고정/가변 크기)</h2>
<h4>고정 크기 단위(px) : 화면의 크기와 상관없이 지정된 값의 크기를 갖는 단위</h4>
<img src="./images/daggu/2.png" width="300px" >
<img src="./images/daggu/2.png" width="300px" height="500px">
<img src="./images/daggu/2.png" width="300px" height="100px">
<img src="./images/daggu/2.png" width="300px" height="200px">
<img src="./images/daggu/2.png" width="300px" height="300px">
<hr>
<h4>가변 크기 단위(%) : 화면이나 영역 기준 사이트 크기에 따라 이미지의 크기가 변경되는 단위</h4>
"
<img src="./images/cat/3.png" width="15%">
<img src="./images/cat/4.png" width="15%">
<hr>
<h2>alt 속성 확인</h2>
<img src="./images/cat/5.png" alt="나는 고양이야">
<div style="height : 500px;"></div>
</body>
</html>
2. 하이퍼링크 관련 태그
- a(anchor) 태그를 이용한 하이퍼링크 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08_하이퍼링크 관련 태그</title>
</head>
<body>
<h1>하이퍼 링크 관련 태그 : a(anchor) 태그</h1>
<pre>
a태그는 현재 HTML문서와 다른 HTML문서를 연결해서
페이지 이동을 할 수 있게 하는 기능을 제공.
이 때, a태그로 감싸진 문자열 == 하이퍼링크
</pre>
<hr>
<h2>a태그를 이용한 하이퍼링크 구현</h2>
<u1>
<li>
<a href="01_안녕.html">01_안녕</a>
</li>
<li>
<a href="07_이미지관련태그.html" target="_blank">07_이미지관련태그</a>
</li>
<!--target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성
기본값 : 같은 탭
_blank : 새탭 == 비어있는 탭
-->
<li>
<a href="https://www.naver.com/" target="_blank">네이버로 이동</a>
</li>
</u1>
<hr>
- 이미지 클릭 시 페이지 이동
<h2>이미지 클릭 시 페이지 이동</h2>
<a href="https://www.naver.com/" target="_blank">
<img src="./images/travle/7.jpg" width="120px">
</a>
<hr>- 한 페이지 내에서 이동하기
<h2>한 페이지 내에서 이동하기</h2>
<ul id="list">
목록
<li><a href="#tra1">여행8</a></li>
<li><a href="#tra2">여행9</a></li>
<li><a href="#tra3">여행10</a></li>
</ul>
<h3 id="tra1">여행8</h3>
<img src="./images/travle/8.jpg">
<a href="#list">목록으로 이동</a>
<h3 id="tra2">여행9</h3>
<img src="./images/travle/9.jpg">
<a href="#list">목록으로 이동</a>
<h3 id="tra3">여행10</h3>
<img src="./images/travle/10.jpg">
<a href="#list">목록으로 이동</a>
</body>
</html>3. 입력 관련 태그
- input 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09_입력 관련 태그</title>
</head>
<body>
<h1>input 태그, form 태그</h1>
<h2>input 태그</h2>
<p>웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그</p>
<h3>text 관련된 input 태그</h3>
<h4>type="text"</h4>
<pre>
- 한 줄짜리 문자열(텍스트)을 입력할 수 있는 입력 상자
- input태그의 type 기본값으로 생략 가능
- inline 형식(모든 input태그가 inline)
<pre>
<input>
<input type="text">
<pre>
<he>text 관련 input 태그의 공용 속성</he>
- size : 입력 상자의 크기
- maxlength : 입력받는 텍스트의 최대 길이
- placeholder : 입력 상자에 작성될 내용을 설명
</pre>
아이디 : <input type="text" size="15" maxlength="10" placeholder="아이디 입력">
<hr>
<h4>type="password"</h4>
<p>비밀번호 입력 상자(입력되는 텍스트를 가려줌)</p>
비밀번호 : <input type="password">
<hr>
<h4>type="url"</h4>
<p>주소 입력 시 사용하는 입력 상자</p>
홈페이지 : <input type="url" value="https://">
<!--value : 모든 input 태그의 type에서 사용 가능한 속성
input 태그에 들어갈 초기값을 지정
-->
<hr>
<h4>type="tel"</h4>
<p>전화번호 입력 시 사용하는 입력 상자</p>
전화번호 : <input type="tel" size="30" placeholder="'-'기호 포함">
<hr>
<h4>type="email"</h4>
<p>이메일 입력 시 사용하는 입력 상자</p>
이메일 : <input type="email" size="30">
<!--url, mail, tel 단독 사용 시 type="text"와 같지만
form 태그 내부에서 사용되면
입력된 값이 용도에 맞는 값인지 유효성 검사를 간단히 진행해줌
-->
<hr><hr><hr>
<h3>숫자 관련 input 태그</h3>
<pre>
<h3>숫자 관련 태그 공용 속성</h3>
- min : 최소값
- max : 최대값
- step : 증가/감소 단계 지정
</pre>
<h4>type="number"</h4>
<p>
숫자만 입력할 수 있는 입력상자<br>
브라우저에 따라 스핀박스가 표시되기도 함.
</p>
정수입력 : <input type="number" min="0" max="100" step="10">
<hr>
<h4>type="range"</h4>
<p>슬라이드 바를 이용해서 숫자 지정(단독사용x, JS(자바스크립트)와 함께 사용)</p>
<input type="range" min="0" max="50" step="10">
<hr>
<hr>
<hr>
<h3>날짜/시간 관련 input 태그</h3>
<input type="date"> <br>
<input type="month"> <br>
<input type="week"> <br>
<input type="time"> <br>
<input type="datetime-local"> <br>
<hr><hr><hr>
<h3>radio와 chekcbox</h3>
<pre>
여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input 타입
<strong style="color: red;">
묶음으로 다루려는 input 태그들은 반드시 같은 name 속성의 값을 가져야한다!
</strong>
name 속성
1) radio, checkbox 뿐만 아니라 input 태그들 중
관련된 것들을 묶어서 부를 때 사용 (== 그룹 이름)
2) 서버쪽에 제출되는 input 태그 값의 이름 지정(from 태그와 같이 사용)
</pre>
<h4>type="radio"</h4>
<!--id 속성 : 식별자(하나의 HTML문서에서 중복 금지)-->
팀 선택<br>
<label for="a-team">A팀</label> <input type="radio" name="team" id="a-team">
<label for="b-team">B팀</label> <input type="radio" name="team" id="b-team">
<label for="c-team">C팀</label> <input type="radio" name="team" id="c-team">
<h4>type="checkbox"</h4>
<h5>취미선택</h5>
<label for="baseball">야구</label>
<input type="checkbox" name="hobby" id="baseball">
<label for="soccer">축구</label>
<input type="checkbox" name="hobby" id="soccer">
<label for="basketball">농구</label>
<input type="checkbox" name="hobby" id="basketball">
<!--두번째 방법!-->
<label>뜨개질
<input type="checkbox">
</label>
<hr>
<hr>
<hr>
<h3>기타 input 태그</h3>
type="color" : <input type="color"><br>
type="file" : <input type="file"><br>
type="hidden" : <input type="hidden" value="값이 있었는데 없었어요"><br>
<hr>
<hr>
<hr>- form 태그
<h1 style="color: red;">form 태그</h1>
<pre>
- div와 같은 영역(block 형식)
+ 내부에 작성된 input 태그의 값을 서버로 전달하는 역할
[속성]
1) action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
2) method(방식) : 서버로 데이터 전달하는 방식을 지정하는 속성
3) name : form 태그의 이름을 지정하여 form 태그 구분(JS 사용)
4) target : action에 지정된 주소를 현재탭/새탭 중 어디서 열지 지정
</pre>
<h3>form 예시 1</h3>
<form>
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
</form>
<!--
주소?id=user01&pw=pass01
? : 제출된 값을 나타내는 문자열의 시작 부분을 알려줌
id : input 태그 name의 속성값
user01, pass01 : input 태그에 입력한 값(value)
id=user01&pw=pass01 : name 속성 값이 'id'인 input 태그에 작성된 값 'user01'과
name 속성 값이 'pw'인 input 태그에 작성된 값 'pass01'이다.
-->
<hr>
<h3>form 예시 2</h3>
<form action="08_하이퍼링크관련태그.html">
<!--action : 제출할 서버 또는 페이지 주소-->
이름 : <input type="text" name="inputName"><br>
나이 : <input type="number" name="inputAge"><br>
<button type="submit">제출</button>
</form>
<hr>
<h3>form 예시 3</h3>
<form action="07_이미지관련태그.html" target="_blank">
팀 선택<br>
<label for="aa-team">A팀</label> <input type="radio" name="team" id="aa-team" value="A">
<label for="bb-team">B팀</label> <input type="radio" name="team" id="bb-team" value="B">
<label for="cc-team">C팀</label> <input type="radio" name="team" id="cc-team" value="C">
<br><br>
<label for="baseball">야구</label>
<input type="checkbox" name="hobby" id="baseball" value="야구">
<label for="soccer">축구</label>
<input type="checkbox" name="hobby" id="soccer" value="축구">
<label for="basketball">농구</label>
<input type="checkbox" name="hobby" id="basketball" value="농구">
<br>
<br>
<button type="submit">제출</button>
</form>
<!-- radio, checkbox 선택 시 전달되는 값이 'on'으로 나오는 경우
-> 선택된 input 태그에 아무런 값이 작성되어있지 않을 때 (vlaue가 없을 때)
체크는 되어있다라는 것을 인식해 'on'이라는 단어로 표현
** input 태그 value 속성 추가
-->
<h3>버튼을 나타내는 input 태그</h3>
<pre>
input 태그 중
type="submit" / type="reset" / type="button"
위 3개가 버튼을 나타내는 타입, 최근에는 사용 안함
-> 왜? 버튼의 사용도가 너무 많아져서
별도의 button 태그가 새롭게 등장함
</pre>
<input type="button">
<button></button>
<!--button 태그
type="submit / reset / button"
-->
<!--submit : 제출(기본값이 submit임)-->
<butto>제출</button>
<!--reset : 버튼이 포함된 form 태그 내부 input 값을 모두 초기화-->
<form>
<input>
<button type="reset">초기화</button>
</form>
<!--button : 아무런 기능이 없는 버튼
JS를 이용해서 원하는 기능을 추가할 수 있다.
-->
<button type="button" id="btn">그냥 버튼</button>
<script>
// 자바스크립트 작성 영역
document.getElementById("btn").addEventListener("click", function(){
alert("버튼 클릭됨");
})
</script>
<hr>
<h3>fieldset / legend </h3>
<pre>
fieldset : 테두리를 만들어 그룹을 구분하는 영역
legend : fieldset 테투리에 이름을 붙이는 것
</pre>
<form>
<fieldset>
<legend>회원가입</legend>
아이디 : <input>
비밀번호 : <input type="password">
<button>가입하기</button>
</fieldset>
</form>
<hr><hr><hr>- textarea / select / option
<h2>textarea / select / option</h2>
<h3>textarea 태그 : 여러줄을 입력하기 위한 입력 상자</h3>
<textarea rows="5" cols="70" style="resize: none;"
placeholder="placeholder도 가능하다"
></textarea>
<hr>
<h3>select, option 태그</h3>
<form>
<select>
<option value="1">선택1</option>
<option value="2">선택2</option>
<option selected>선택3</option>
<option>선택4</option>
<option>선택5</option>
</select>
</form>
<!-- select 제출 시
option 태그에 value가 있으면 : value 속성안에 작성된 값
option 태그에 vlaue가 없으면 : <option></option>사이에 작성된 내용이 제출된다.
selected 속성 : select의 기본 값을 설정하는 속성
-->
<input type="checkbox" checked>
<input type="radio" checked>
<!-- checked 속성 : checkbox / radio 선택사항을 미리 체크해두는 속성-->
<div style="height: 1000px;"></div>
</body>
</html>-연습문제1
http://192.168.50.201:5500/%EC%97%B0%EC%8A%B5%EB%AC%B8%EC%A0%9C1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 1</title>
</head>
<body>
<form action="">
<label>고객명 : </label>
<input type="text" name="clientName"><br><br>
<label> 전화번호 : </label>
<input type="tel" name="clientPhone"><br><br>
<label>E-mail : </label>
<input type="email" name="clientEmail"><br><br>
<label>피자선택 : </label>
<select name="pizza">
<option value="cheese">치즈 피자</option>
<option value="pepperoni">페퍼로니 피자</option>
<option value="potato">포테이토 피자</option>
<option value="sweetPotato">고구마 피자</option>
<option selected>피자를 선택하세요</option>
</select>
<fieldset>
<legend>피자 사이즈</legend>
<label>
<input type="radio" name="size" value="small">
Small
</label><br>
<label>
<input type="radio" name="size" value="medium">
Medium
</label><br>
<label>
<input type="radio" name="size" value="large">
Large
</label><br>
</fieldset>
<fieldset>
<legend>토핑 선택</legend>
<label>
<input type="checkbox" name="topping" value="bacon">
베이컨
</label><br>
<label>
<input type="checkbox" name="topping" value="cheese">
치즈
</label><br>
<label>
<input type="checkbox" name="topping" value="onion">
양파
</label><br>
<label>
<input type="checkbox" name="topping" value="mushroom">
버섯
</label><br>
</fieldset>
희망배송시간 :
<input type="time"><br><br>
배송시 요청사항 : <textarea rows="3"></textarea><br><br>
<button>주문하기</button>
</form>
</body>
</html>-연습문제2
http://192.168.50.201:5500/%EC%97%B0%EC%8A%B5%EB%AC%B8%EC%A0%9C2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
</head>
<body>
<form action="">
<fieldset>
<legend>납품자 정보</legend><br>
<ol>
<li>
<label>1. 납품자명 : </label>
<input type="text" name="name">
<br><br>
</li>
<li>
<label>2. email : </label>
<input type="email" name="email" placeholder="answer@naver.com">
<br><br>
</li>
<li>
<label>3. 홈페이지 : </label>
<input type="url" name="homepage" value="http://">
<br><br>
</li>
<li>
<label>4. 지역 : </label>
<select name="location">
<option name="pusan" selected>부산</option>
<option name="seoul">서울</option>
<option name="gyeongi">경기</option>
</select><br><br>
</li>
</ol>
</fieldset>
<fieldset>
<legend>납품 정보</legend>
<ul>
<li>
<label>상품명 : </label>
<input type="text" name="product">
<br><br>
</li>
<li>
<label>상품수량 : </label>
<input type="number" name="count" min="100" placeholder="최소 100">
<br><br>
</li>
<li>
<label>납품등급 : </label>
<input type="range" min="0" max="100" step="20"><br><br>
</li>
<li>
<label>기타사항 :</label>
<textarea rows="5" name="etc"></textarea><br><br>
</li>
</ul>
</fieldset><br>
<button>send message</button>
</form>
</body>
</html>-연습문제3
http://192.168.50.201:5500/%EC%97%B0%EC%8A%B5%EB%AC%B8%EC%A0%9C3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 3</title>
</head>
<body>
<form "">
<h1>회원 가입</h1>
<fieldset>
<legend>필수 입력 사항</legend>
<table>
<tr>
<th>ID</th>
<td>
<input type="text" name="id" placeholder="아이디 11글자 이내" max="11">
</td>
<td>
<button type="button">중복 확인</button>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td colspan="2">
<input size="30" type="text" name="pw" value="영문, 숫자, 특수문자 포함 8자 이상">
</td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td colspan="2">
<input type="password" size="30">
</td>
</tr>
<tr>
<th>Email</th>
<td>
<input type="email">
</td>
<td>
<select>
<option name="google">@gmail.com</option>
<option name="naver">@naver.com</option>
<option name="nate">@nate.com</option>
<option name="daum">@daum.net</option>
<option selected>직접입력</option>
</select><br>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>추가 정보</legend>
<label>프로필 사진</label>
<input type="file" name="파일 선택"><br><br>
<label>성별 : </label>
<label>
<input type="radio" name="gender" value="women">
여
</label>
<label>
<input type="radio" name="gender" value="man" checked>
남
</label><br><br>
<label>생년월일 : </label>
<input type="date"><br><br>
<labele>취미</labele><br>
<input type="checkbox" name="hobby" id="baseball">
<label for="baseball">야구</label>
<input type="checkbox" name="hobby" id="basketball">
<label for="basketball">농구</label>
<input type="checkbox" name="hobby" id="soccer">
<label for="soccer">축구</label><br>
<input type="checkbox" name="hobby" id="study" checked>
<label for="study">공부</label>
<input type="checkbox" name="hobby" id="music">
<label for="music">음악감상</label><br>
<input type="checkbox" name="hobby" id="ext">
<label for="music">기타</label>
<input type="text">
<br><br>
<label>자기소개</label><br>
<textarea rows="10" cols="80" style="resize: none;"></textarea>
</fieldset><br>
<button type="submit">회원가입</button>
<button type="reset">다시입력</button>
<button type="button">이전으로</button>
</form>
</body>
</html>4. CSS개요, 선택자
http://192.168.50.201:5500/02_CSS/01_CSS%EA%B0%9C%EC%9A%94,CSS%EC%84%A0%ED%83%9D%EC%9E%901.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS개요,CSS선택자1</title>
<style>
/* CSS 주석 */
/* Style 태그 : CSS 코드만 작성할 수 있는 영역을 제공하는 태그*/
div {
border : 3px solid red; /* 3px두께의 빨간 실선 */
}
strong{
background-color: yellow;
}
span{
background-color: pink;
}
/* 아이디 선택자 (#) */
#li-1{ background-color: red;}
#li-2{ background-color: orange;}
#li-3{ background-color: yellow;}
#li-4{ background-color: green;}
#li-5{ background-color: blue;}
/* 콤마(,)를 이용한 여러 선택자 동시 작성 */
#li-1, #li-2, #li-3, #li-4, #li-5{
color: white;
}
/* 클래스 선택자 (.) */
.test-1{color: red;}
.test-2{color: white; background-color: black;}
.aaa{
font-weight: bold;
}
/* 모든 요소 선택자 (*) */
@font-face { /* 웹폰트 추가 */
font-family: 'iceJaram-Rg';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/iceJaram-Rg.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
*{
/* 글꼴 모양 */
font-family: 'iceJaram-Rg';
/* 글꼴 크기 */
font-size: 20px;
}
</style>
</head>
<body>
<h1>CSS(Cascading Style Sheet)</h1>
<pre>
마크업 언어(HTML)가 실제로 화면에
표시되는 방법(모양, 색상, 크기, 스타일....)을 기술하는 언어.
(HTML코드가 화면에 어떤 스타일로 보여질지 지정하는 것)
</pre>
<hr>
<h1>CSS Seletor(선택자)</h1>
<pre>
Selector란?
현재 HTML문서 내에서 특정한 요소를 선택하는 문자 또는 문자열.
스타일을 적용하고자 하는 요소를 선택하는 방법
</pre>
<hr>
<h3>태그 선택자</h3>
<pre>
현재 HTML문서 내에 같은 태그를 선택하는 선택자
[작성법]
태그명{ CSS 코드 ; }
</pre>
<div>
<strong>strong 태그에 작성된 내용입니다.</strong>
<br>
<span>span 태그에 작성된 내용입니다.</span>
<ul>
<li>
<strong>strong 태그에 작성된 내용입니다.</strong>
</li>
<li>
<span>span 태그에 작성된 내용입니다.</span>
</li>
</ul>
</div>
<hr>
<h3>id 선택자(#id속성값)</h3>
<pre>
HTML문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
[작성법]
#id속성값{ CSS 코드 ; }
# == id
</pre>
<!--
Java : 카멜표기법 사용(helloWorld)
DB : 대문자 사용, 띄어쓰기 _로 표시(MEMBER_ID)
HTML : 하이픈 표기법(li-1, claas-1) / 언더바 표기법(li_1, class_1)
-->
<ol>
<li id="li-1">id 선택자 테스트1</li>
<li id="li-2">id 선택자 테스트2</li>
<li id="li-3">id 선택자 테스트3</li>
<li id="li-4">id 선택자 테스트4</li>
<li id="li-5">id 선택자 테스트5</li>
</ol>
<hr>
<h3>class 선택자(.class속성값)</h3>
<pre>
HTML 문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자
[작성법]
.class속성값{ CSS 코드 ; }
. == class
</pre>
<ul>
<li class="test-1 aaa">클래스 선택자 테스트 1</li>
<li class="test-2">클래스 선택자 테스트 2</li>
<li class="test-1">클래스 선택자 테스트 1</li>
<li class="test-2 aaa">클래스 선택자 테스트 2</li>
<li class="test-1">클래스 선택자 테스트 1</li>
</ul>
<hr>
<h3>모든 요소 선택자(*)</h3>
<pre>
모든 요소를 선택하는 선택자
</pre>
</body>
</html>