html 은 근본적으로 재미가 없다.
거기에 외워야할 태그는 산더미여서 더더욱 재미가 없다.
<img> 태그 : 이미지를 넣는다.
src속성 : 이미지의 주소나 파일 이름을 넣는다.
alt 속성 : 이미지가 없을때 대신 나오는 문구
width height : 이미지의 가로/세로를 정하는 속성
이미지 늘리거나 줄이기 : 본래 해상도의 비율에 맞춰서 늘리거나 줄인다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- ex15 -->
<title>이미지 출력 : img태그</title>
<!-- 이미지파일 종류 : png, jpg, jpeg, webp, gif, bmp -->
<!-- png : 무손실압축, 6-70% 주로 모바일에서 사용, 작은 아이콘이미지 등에 사용 -->
<!-- jpg : 손실압축, 50%, 큰 이미지(배경)를 압축할 때, 주로 PC에서 사용 -->
<!-- jpeg : 손실압축, 예전포맷이나 요즘은 사용하지 않음. -->
<!-- webp : 무손실압축, 최신 포맷, 점점 사용이 늘어감. -->
<!-- gif : 손실압축, 저용량(256컬러), 애니메이션 gif, 움직이는 이미지 용도 -->
<!-- bmp : 원본파일, 압축없음, 용량 크다, RGBA(Red 1B, Green 1B, Blue 1B, Alpha 1B) -->
<!-- 2^8=256 0~255 색의 농도 -->
<!-- svg : 벡터형식 파일, 확대/축소 손실이 없음. 만들때(일러) 어려움이 있다. -->
<!-- 이미지 다운로드 하기 : 최대 이미지 무료 사이트 - 픽사베이 -->
</head>
<body>
<!-- src 속성 : 이미지파일 이름 -->
<!-- alt 속성 : 이미지파일이 없을때 대체 문구 -->
<img src="image1.jpg" alt="카페이미지1"><br>
<img src="image2.jpg" alt="카페이미지2"><br>
<h1>이미지 해상도 1280 x 853</h1>
<!-- 이미지 해상도를 원본비율에 맞춰서 확대/축소를 해야 -->
<!-- 일그러짐이 없다. -->
<img src="image1.jpg" alt="카페이미지1" width="1000" height="300"><br>
<!-- image1.jpg을 가로 1000으로 출력하려면, 세로 크기는 ? -->
<!-- 비율식 1280:853 = 1000:x -->
<!-- x*1280 = 853*1000 -->
<!-- x = (853*1000)/1280 -->
<!-- x = 666 -->
<img src="image1.jpg" alt="카페이미지1" width="1000" height="666"><br>
<!-- 연습문제 3 -->
<!-- image2.jpg의 세로 해상도를 500으로 했을때, 가로 해상도는 몇으로 해야 -->
<!-- 화면비율이 원본에 맞을지? 이미지를 출력하시오. -->
<!-- 비율식 853:1280 = x:500 -->
<!-- x = (853*500)/1280 -->
<!-- x = 333 -->
<img src="image2.jpg" alt="카페이미지2" width="333" height="500"><br>
<!-- 이미지(또는 파일) 다운로그 링크 걸기 : a태그 -->
<!-- href #의 의미 : 기본값 -->
<a href="#" download="image1.jpg">image1.jpg 다운로드 링크</a>
<br>
<!-- 무료 아이콘 사이트 : Flaticon.com -->
<!-- PNG 이미지 다운로드 : play-button -->
<img src="play-button.png" alt="플레이버튼"> <br>
<!-- 파일경로 : . 현재폴더(html) .. 상위폴더(내문서) -->
<img src="./play-button.png" alt="플레이버튼"> <br>
<!-- 더미 이미지 : 이미지가 아직 준비되지 않았을때, 레이아웃(배치) 잡을때 -->
<img src="http://via.placeholder.com/600x300" alt="더미이미지1">
<img src="http://via.placeholder.com/300x500" alt="더미이미지2">
</body>
</html>
서버에 데이터를 보내는 2가지 방식
1. form 태그 통신: html을 이용 - GET/POST 만 존재함
get : 주소줄에 데이터를 노출시켜서 같이 보냄.
post : HTTP body에 데이터를 실어서 보냄
2. JS의 Ajax(비동기통신)/fetch/axios : 리액트.js/Vue.js
서버의 기본 api형식은 REST API를 이용한다.
REST API : GET/POST/PUT/DELETE
<form> 태그 : 서버에 데이터(요청)을 보내는 태그. input태그의 데이터를 전송함.
기본 메소드는 GET 방식
action 속성 : 데이터를 받는 서버의 주소를 입력
method 속성 : GET/ POST 둘중 원하는 통신 방식을 입력
<input> : 보내고자 하는 데이터를 입력받는 태그
type 속성 : 입력받는 데이터의 형식을 지정
name 속성 : 서버에서 받아들이는 변수 이름
서버와 연결되는 변수의 이름
id 속성 : html파일 안에서 유일한 아이디
value 속성 : 텍스트 파일에서는 먼저 입력되어 있는 값.
버튼에서는 반환, 리턴값.
<!-- 예) http://myserver.com?id=hong&pw=1234 -->
<!-- http : 통신방식(ftp,smtp,telnet) -->
<!-- :// : 구분자 -->
<!-- myserver.com : 서버 주소(URL) -->
<!-- ? : 구분자 (서버주소와 데이타) -->
<!-- id pw : name역할 -->
<!-- hong 1234 : 데이터 -->
<!-- = : 구분자 -->
<!-- & : 구분자 -->
<label> 태그 : 입력 태그의 이름, 제목
for 속성 : 입력태그의 id와 연결되어, label이 그것을 지칭하게 됨.
placeholder 속성 : 힌트문구. 검색창 같은 곳의 반투명한 설명 문구.
type(타입)의 속성들
sumit 속성 : 서버로 데이터를 전송함.
checkbox 속성 : 다중체크가 되는 체크박스.
서버에서 String[] checkBon 배열로 받는다.
여러개를 동시 선택하고자 하면 name을 통일한다.
<input type="checkbox" id="check1" name="checkBtn" value="ch1"> <label for="check1">
체크박스1</label> <br>
<input type="checkbox" id="check2" name="checkBtn" value="ch2"> <label for="check2">
체크박스2</label> <br>
radio 속성 : 단 하나만 체크할수 하는 박스.
서버 String radioBtn = "rb1" 하나로 받는다.
여러개 중 하나만 선택하고자 하면 name을 통일한다.
<input type="radio" id="radio1" name="radioBtn" value="rb1"> <label for="radio1">
라디오버튼1</label> <br>
<input type="radio" id="radio2" name="radioBtn" value="rb2"> <label for="radio2">
라디오버튼2</label> <br>
<input type="radio" id="radio3" name="radioBtn" value="rb3"> <label for="radio3">
라디오버튼3</label> <br>
버튼, 체크박스, 라디오들은 from 태그가 존재하더라도 summit 타입이 아니라면 데이터 전송이 안된다.
image 속성 : 이미지를 표현하는 동시에 summit기능도 같이 수행한다.
formaction 속성 : 서버주소를 다르게 지정할 수 있음.
<input type="submit" value="Input submit2 수정" formaction="http://myserver2.com"><br>
<input type="submit" value="Input submit3 삭제" formaction="http://myserver3.com"><br>range : 범위를 입력할수 있는 속성.
min과 max를 통해 최대값과 최솟값을 지정가능하다. step를 통해 간격 조절 가능하다.
<select> 태그 : 선택목록 태그.
<option> 태그 : select태그의 선택지를 만든다.
value값을 통해 순서를 지정한다.
<textarea> 태그 : 많은 양의 텍스트를 입력할때 사용한다. clos와 row를 통해 가로 세로줄의 갯수를 지정할수 있다.
그외의 input type들
color : 색상 선택
date : 날짜 선택
datetiem - local : 날짜-시간 선택
email : 이메일을 보냄. 이때 multiple 속성을 같이 써주면 여러개를 입력해도 배열형식으로 서버로 넘어가게 됨.
month : 달 입력
number : 숫자입력 min 과 max로 최대값과 최소값을 지정해줄수 있으며 step로 간격도 지정 가능하다.
<a> 태그를 이용해 이미지를 통한 바로가기 링크를 만들수 있다.
<a> 태그에 주소값을 넣고, <a> 태그 내부에 <img> 태그를 이용해서 이미지를 넣으면 된다.
새창에서 열리게 하고 싶으면 target속성에 '_blank'를 넣으면 된다.
<div> 태그 : 공간을 나눈다. 이를 사용하기 위해서 style태그도 필요하다.
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>공간분할 태그</title>
<!-- 줄바꿈이 있는 태그 - 한줄 차지 속성 - block속성 -->
<!-- div태그 -->
<!-- 줄바꿈이 없는 태그 - 한칸 차지 속성 - inline속성 -->
<!-- span태그 -->
<!-- div, span은 다른 태그를 감싸는 속성 - 포장지 -->
<!-- *--------------------* -->
<!-- | DIV | -->
<!-- *--------------------* -->
<!-- | SPAN | SPAN | SPAN | -->
<!-- *--------------------* -->
<style>
* { border: 1px solid red; }
</style>
</head>
<body>
<div>더미문구입니다.</div>
<div>더미문구입니다.</div>
<div>더미문구입니다.</div>
<span>더미문구입니다.</span>
<span>더미문구입니다.</span>
<span>더미문구입니다.</span>
</body>
</html>
```
block태그 : 자동 줄바꿈이 됨
h1~h6, div, p, hr, table, ol, ul, li, form ...
inline태그 : 줄바꿈이 안됨
span, a, input, label, text의 모든 속성(b, i, small...) img, select...
<!DOCTYPE html>
<html lang="ko">
<head>
<title>입력양식태그의 종류 1/2</title>
</head>
<body>
<!-- 기본 method는 GET방식 -->
<form action="http://myserver.com" name="myForm" >
<!-- label태그 : 입력태그의 제목 -->
<!-- for속성 : 입력태그 id속성과 연결 -->
<label for="name">이름</label>
<!-- id속성 : html파일 안에서 유일한 아이디 -->
<!-- name속성 : 서버와 연결되는 변수 이름 -->
<!-- value속성 : 입력된 값 -->
<input type="text" name="name" id="name" value=""> <br>
<!-- placeholder : 힌트 문구 -->
<input type="text" placeholder="주소를 입력하세요." value=""> <br>
<label for="pw">암호</label>
<input type="password" name="pw" id="pw" placeholder="암호입력"> <br>
<input type="button" value="클릭하세요!" onclick="jsFunc();"> <br>
<!-- submit : 서버로 데이타 전송 개시! -->
<input type="submit" value="서버로 전송!"> <br>
<!-- 체크박스 : 여러개를 동시 선택할 때 - name을 통일한다. -->
<!-- 서버 String[] checkBon 배열로 받는다. -->
<input type="checkbox" id="check1" name="checkBtn" value="ch1"> <label for="check1">체크박스1</label> <br>
<input type="checkbox" id="check2" name="checkBtn" value="ch2"> <label for="check2">체크박스2</label> <br>
<input type="checkbox" id="check3" name="checkBtn" value="ch3"> <label for="check3">체크박스3</label> <br>
<!-- 라디오버튼 : 여러개중 하나만 선택할 때 - name을 통일한다. -->
<!-- 서버 String radioBtn = "rb1" 하나로 받는다. -->
<input type="radio" id="radio1" name="radioBtn" value="rb1"> <label for="radio1">라디오버튼1</label> <br>
<input type="radio" id="radio2" name="radioBtn" value="rb2"> <label for="radio2">라디오버튼2</label> <br>
<input type="radio" id="radio3" name="radioBtn" value="rb3"> <label for="radio3">라디오버튼3</label> <br>
</form>
</body>
<script>
function jsFunc( ){
alert("클릭되었습니다!");
//자바 스크립트로 form태그 submit하기
var myForm = document.myForm;
myForm.submit();
}
</script>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<!-- ex19 -->
<title>입력양식태그의 종류 2/3</title>
<!-- input type-button과 button type-button 차이 -->
</head>
<body>
<form action="http://myserver.com">
<input type="text" value=""> <br>
<!-- button 클릭 효과만 있음. 통신안됨. -->
<input type="button" value="Input button"><br>
<!-- input태그의 입력값을 초기화. 통신안됨 -->
<input type="reset" value="Input reset"><br>
<!-- form태그 통신이 이루어짐. -->
<input type="submit" value="Input submit 로그인"><br>
<!-- formaction : 서버주소를 다르게 지정할 수 있음. -->
<input type="submit" value="Input submit2 수정" formaction="http://myserver2.com"><br>
<input type="submit" value="Input submit3 삭제" formaction="http://myserver3.com"><br>
<!-- button 태그는 HTML 4.0부터 소개됨. -->
<!-- button submit과 동일함. 통신됨. -->
<button>Button</button><br>
<!-- 통신됨. -->
<button type="submit">Button submit</button><br>
<button type="submit" formaction="http://myserver4.com"></button>
<!-- button 효과만 있음. 통신안됨 -->
<button type="button">Button button</button><br>
<!-- 입력값을 초기화. 통신안됨 -->
<button type="reset">Button reset</button><br>
<!-- 이미지 버튼 : submit기능을 하면서 이미지표현 -->
<!-- input type-image가 submit기능을 한다. -->
<input type="image" src="play-button.png" width="100" height="100"
formaction="http://myserver5.com">
<button type="submit"width="100" height="100" formaction="http://myserver5.com">
<img src="play-button.png">
</button>
</form>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<title>입력양식태그의 종류 3/3</title>
</head>
<body>
<form action="http://myserver.com">
<!-- hidden속성 : 화면에 표시되지 않지만, 서버에서 값을 받을 수 있음 -->
<!-- 게시물의 DB index같은 값을 value에 가질 수 있다. -->
<input type="hidden" name="hiddenValue" value="hiddenValue">
<!-- 선택목록 태그 : select태그 -->
<select name="drink">
<option value="1">콜라</option>
<option value="2" selected>사이다</option>
<option value="3">오렌지쥬스</option>
<option value="4">맥심커피</option>
</select>
<!-- 수평선(구분선) 태그 : hr태그 Horizontal Row -->
<hr>
<!-- 색상 선택 태그 - Color Picker -->
<!-- # : 16진수 00~FF -->
<!-- RGB : Red Green Blue 빛의 3원색 - 거의 모든 색상을 구현가능 -->
<!-- #RGB : R 00~FF G 00~FF B 00~FF -->
<input type="color" name="color" value="#00FF00"> <br>
<!-- 날짜 선택 -->
<input type="date" name="date" value="2022-12-12"> <br>
<!-- 날짜-시간 선택 -->
<input type="datetime-local" name="datetime" value="2022-12-12T15:07"><br>
<!-- 이메일 -->
<!-- multiple속성을 쓰면 배열로 서버에 전달됨. -->
<input type="email" name="email" value="aaa@gmail.com,bbb@gmail.com" multiple><br>
<!-- 달 입력 -->
<input type="month" name="month" value="2022-12"><br>
<!-- 숫자 입력 -->
<input type="number" value="1" name="number" min="1" max="10" step="2"><br>
<!-- 범위 입력 -->
<input type="range" value="1" name="range" min="1" max="10" step="1"><br>
<!-- 많은 양의 텍스트 입력 : textarea태그 -->
<textarea name="memo" cols="30" rows="10">많은 양의 문자열을 넣을 수 있음.</textarea>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>연습문제6 - 그림과 같이 입력양식을 구현하시오.</title>
</head>
<body>
<h3>회원가입 폼</h3>
<form action="" method="GET">
<label>이름 :</label>
<input type="text" placeholder="이름을 입력하세요."/> <br />
<label>비밀번호 :</label>
<input type="password" placeholder="비번을 입력하세요." /> <br />
<label>핸드폰:</label>
<input type="text" placeholder="핸드폰을 입력하세요." value="" /> <br />
<label>이메일:</label>
<input type="text" placeholder="이메일을 입력하세요." value="" /> <br />
<label>성별 </label>
<input type="radio" name="gender" value="male" checked /><label>남성</label>
<input type="radio" name="gender" value="female"/><label>여성</label><br />
<label>취미 </label>
<!-- 문자열 배열로 서버에서 받는다. -->
<input type="checkbox" name="favorite" value="walk"/><label>걷기</label>
<input type="checkbox" name="favorite" value="run" checked/><label>달리기</label>
<input type="checkbox" name="favorite" value="cycle" /><label>자전거타기</label><br />
<label>사는곳:</label>
<select>
<option value="서울" selected>서울</option>
<option value="경기">경기</option>
<option value="인천">인천</option>
</select><br>
<input type="submit" value="회원가입" />
</form>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<title>태그별 공간분할 타입</title>
<!-- block 타입 태그들 -->
<!-- div h1~h6 p hr table ol ul li form -->
<!-- inline 타입 태그들 -->
<!-- span a input label text속성(b,i,small...) img select -->
</head>
<body>
<h1>제목 태그 H1</h1>
<p>문단 태그 p</p>
<hr>
<a href="#">바로가기 태그 a</a>
<i>이탤릭 태그</i>
<input type="text">
</body>
</html>'공부 > html --- css' 카테고리의 다른 글
| 24일차 복습 (0) | 2022.12.15 |
|---|---|
| 23일차 복습 (0) | 2022.12.14 |
| 22일차 복습 -2 css시작 (0) | 2022.12.13 |
| 22일차 - html 끝 (0) | 2022.12.13 |
| 20일차 (0) | 2022.12.11 |
