[ src 속성 확인 ]
상대경로 : 현재 위치를 기준으로 경로 지정
.. : 상위 폴더
/ : 아래, 안쪽, 안에
<img src="../images/cats/cat1.jpg">
<!-- 웹 이미지경로(웹상 절대경로)를 이용해서 이미지 출력 (이미지 주소 복사)-->
<img src="https://thumbs.gfycat.com/PerfumedBlandAmericanbadger-size_restricted.gif" alt="">
2) width / height : 이미지의 크기를 지정하는 속성
[width,heigth 속성을 이용한 크기 조절(고정/가변 크기)]
고정 크기 단위 (px) : 화면의 크기 상관없이 지정된 값의 크기를 갖는 단위
<img src="../images/dogs/dog1.jpg" width="300px" height="240px" alt="">
<img src="../images/dogs/dog2.jpg" width="300px" height="240px" alt="">
<img src="../images/dogs/dog3.jpg" width="300px" height="240px" alt="">
<img src="../images/dogs/dog4.jpg" width="300px" height="240px" alt="">
<img src="../images/dogs/dog5.jpg" width="300px" height="240px" alt="">
가변 크기 단위(%) : 화면이나 영역 기준 사이즈 크기에 따라 크기가 변경되는 단위
<img src="../images/flowers/flower1.jpg" width="15%" height="240px" alt="">
<img src="../images/flowers/flower2.jpg" width="15%" height="240" alt="">
<img src="../images/flowers/flower3.jpg" width="15%" height="240" alt="">
<img src="../images/flowers/flower4.jpg" width="15%" height="240" alt="">
<img src="../images/flowers/flower5.jpg" width="15%" height="240" alt="">
3) alt : 이미지를 설명하는 속성
-> 이미지가 출력되지 않는 경우 화면에 직접 표시
[ ALT 속성 확인 ]
<img src="../images/cats/cat5.jpg" width="300px" height="300px" alt="고양이 사진">
📌하이퍼링크 관련 태그 : 'a'태그
a태그는 현재 HTML 문서와 다른 HTML 문서를 연결해서 페이지 이동을 할 수 있게 하는 기능을 제공
-> 이 때, a태그로 감싸진 문자열 == 하이퍼링크
* 하이퍼링크 웹(HTML) 문서와 다른 문서와 구분 될 수 있는 핵심적인 기능
텍스트 또는 이미지를 클릭해서 페이지 이동
+ 페이지 내에서 이동도 가능
a 태그를 이용한 하이퍼링크 구현
target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성 (기본값 : 같은탭)
_blanck : 비어있는 탭 == 새탭
<a href="01_글자관련태크.html">01_글자관련태크</a>
<a href="02_목록관련태그.html" target="_blank">02_목록관련태그</a>
<a href="https://www.naver.com" target="_blank">네이버로 이동!</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" alt=""><br>
<a href="#list">목록으로 이동</a>
📌입력 관련 태그
✅ input 태그, form
- 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그
✅ text 관련 input 태그
- 한줄 짜리 문자열(텍스트)을 입력할 수 있는 입력 상자
- input 태그의 type 기본값으로 생략 가능
- size : 입력 상자의 크기
- maxlength : 입력 받는 텍스트의 최대 길이
- placeholder : 입력 상자에 작성될 내용을 설명
전화번호 : <inputtype="tel"size="30"placeholder="'-' 기호 포함"
🔊 검색어 입력 시 사용하는 입력 상자
-type = "search"
검색어 입력 : <inputtype="search"size="50">
📌숫자 관련 태그
- min : 최소값
- max : 최대값
- step : 증가/ 감소 단계 지정
🔊숫자만 입력 할 수 있는 입력 상자
- type = "number"
점수 입력 : <inputtype="number"min="0"max="100"step="10"value="50">
🔊 슬라이드바를 이용해서 숫자 지정(단독사용X / js와 함께 사용)
-type = "range"
<inputtype="range"min="0"max="50"step="10">
🔊 날짜 / 시간 관련 input 태그
- type = "date/ month/ week/ time/ datetime-local"
<li><inputtype="date"></li>
<li><inputtype="month"></li>
<li><inputtype="week"></li>
<li><inputtype="time"></li>
<li><inputtype="datetime-local"></li>
📌input 태그( radio | checkbox | 기타)
묶음으로 다룰려는 input 태그들은 반드시 같은 name 속성 값을 가져야 한다!
name 속성
1) radio,checkbox 뿐만 아니라 input 태그들 중
관련된 것들을 묶어서 부를 때 (묶음으로 다룰때) 사용 (그룹이름)
2) 서버쪽에 제출되는 input 태그 값의 이름을 지정(form 태그와 같이 사용)
type = "hidden" : <inputtype="hidden"value="여기 값 있어요! "id="hd1"><br
-- 화면성에 보이지 않지만 존재하는 input 태그
📌form 태그( radio | checkbox | 기타)
- div 와 같은 영역(block 형식)
+ 내부에 작성된 input 태그의 값을 서버로 전달하는 역할
[속성]
1) action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
2) method(방식) : 서버로 데이터 전달하는 방식을 지정하는 속성
3) name : form 태그에 이름을 지정하여 각각의 form 태그 구분 (JS 사용)
4) target : action에 지정된 주소를 새탭/ 현재탭 중 어디서 열지 지정
1) name 사용
<form >
아이디 입력 : <input type="text" name="id">
</form>
<!--
주소?id= user01
? : 제출된 값을 나타내는 문자열의 시작부분
id : input 태그 name 속성 값
uer01 : input 태그에 입력한 값 (value)
id = user01: name 속성 값이 'id'인 input 태그에 작성된 값이 'user01'이다.
-->
2) action 사용
<form action="08_하이퍼링크관련태그.html">
<!-- action : 제출할 서버 또는 페이지 주소
기본값 : 현재 페이지 주소-->
이름 : <input type="text" name="inputName"><br>
나이 : <input type="number" name="inputAge"><br>
<!-- action 주소로 제출하는 버튼 -->
<button type="submit">제출</button>
</form>
3) target 사용 (target = "_blank" 작성 시, 새탭으로 이동해서 보여준다")