반응형
이미지 관련 태그
이미지는 img로 작성하며, 시작과 종료 태그의 구분 없이 하나의 태그만 작성한다.
<img src=" " alt = " "/>
src = 이미지 경로 (절대경로/상대경로)
절대경로 : 절대주소는 / 또는 프로토콜로 시작한다. 파일 프로토콜 절대 주소는 서버환경에서 보안상 사용할 수 없다.
상대주소 : / 또는 프로토콜로 시작하지 않는 주소이다. ./ 는 현재 디렉토리 ../ 는 부모 디렉토리
alt = 대체텍스트 이미지를 찾지 못했거나, 시각적 확인이 불가능한 경우 사용할 텍스트.
절대 크기 px : 픽셀로 크기를 나타냄. 창을 키우거나 줄여도 변화 X
상대 크기 % : 전체 가로 길이에서 %로 크기를 나타냄. 창을 키우거나 줄이면 크기변화 O
https://www.biew.co.kr/entry/WAI-ARIA-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1
웹 접근성 관련 표준
절대주소
<img src="http://192.168.35.89:5501/sample/image/flower1.PNG" alt="꽃1" title="꽃1">
<img src="/sample/image/flower2.PNG" alt="꽃2" title="꽃2">
<!-- 절대주소는 / 또는 프로토콜로 시작한다. -->
<img src="C:\Workspaces\web_client_workspace\sample\image\flower3.PNG" alt="꽃3" title="꽃3">
<!-- 파일 프로토콜 절대 주소는 서버환경에서는 보안상 사용할 수 없다.-->
라이브서버에서 확인시 서버 환경에서 확인할 수 없는 것을 볼 수 있다.
상대주소
<hr>
<img src="../sample/image/flower1.PNG" alt="꽃1" title="꽃1">
<!--상대주소 / 또는 프로토콜로 시작하지 않는 주소. 현재 페이지 기준으로 검색.-->
<!-- ./ 은 현재디렉토리, ../은 부모디렉토리
../../abc -> 2개상위디렉토리의 abc.
-->
절대크기와 상대크기
<h2>절대크기 px</h2>
<div>
<img src="../sample/image/flower1.PNG" alt="" style="width:50px">
<img src="../sample/image/flower2.PNG" alt="" style="width:50px">
<img src="../sample/image/flower3.PNG" alt="" style="width:50px">
<img src="../sample/image/flower4.PNG" alt="" style="width:50px">
<img src="../sample/image/flower5.PNG" alt="" style="width:50px">
</div>
<h2>상대크기 %</h2>
<div>
<img src="../sample/image/flower1.PNG" alt="" style="width:18%">
<img src="../sample/image/flower2.PNG" alt="" style="width:18%">
<img src="../sample/image/flower3.PNG" alt="" style="width:18%">
<img src="../sample/image/flower4.PNG" alt="" style="width:18%">
<img src="../sample/image/flower5.PNG" alt="" style="width:18%">
</div>
창 크기를 조절함에 따라 상대크기는 조절되지만, 절대크기는 그대로인 것을 확인할 수 있다.
링크 관련 태그
<a href="주소"> </a>
a태그의 href속성(hyper-reference)에 명시된 문서로 이동이 가능하다.
- 절대주소 : / 또는 특정 protocol
- 상대주소 : 현재페이지 기준으로 이동할 경로 평가
target속성
- _self : 현재페이지에서 이동
- _blank : 빈(새로운) 페이지에서 오픈
<a href="https://naver.com">네이버로</a>
<a href="/01_html/index.html" target="_self">인덱스로(절대주소)</a>
<a href="./index.html" target="_blank">인덱스로(상대주소)</a>
<!--http://192.168.35.89:5501/01_html/06_link.html-->
<a href="index.html" title="인덱스페이지로 이동">
<img src="../sample/image/hyunta.jpg" alt="" style="width: 300px;">
</a>가져다대면 주소가 아래에 뜬다!
bookmark, anchor 속성
id = "ID"를 사용하고, a 태그로 <a href ="#ID">를 사용하면 그 부분으로 이동한다.
lorem : 텍스트 채우는 용도. lorem ipsum
hello world1 에 커서를 대면, 맨아래에 확인하면 #header1이 뜨게 된다.
<h2>한 페이지의 특정 부분으로 이동 #bookmark #anchor</h2>
<ul>
<li><a href="#header1">Hello world1</a></li>
<li><a href="#header2">Hello world2</a></li>
<li><a href="#header3">Hello world3</a></li>
<li><a href="#:~:text=Hello%20world3-,Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%2C%20adipisicing%20elit.,-Distinctio%20quidem%20minima">내용참조</a></li>
</ul>
<!--(h3#header${Hello world$}+p>lorem*3)*3-->
<h3 id="header1">Hello world1</h3>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro accusamus dolore dignissimos quo dolorem repellat! Hic excepturi quibusdam est voluptatum saepe ab atque ullam. Veniam voluptatem totam soluta laborum? Ipsum.</span><span>Tempora id aliquam aspernatur, ipsum minima facere quasi voluptate odio nam fugit necessitatibus laudantium nulla hic repellat ipsam omnis facilis iure non quae, delectus velit voluptates maiores! Facilis, aut commodi.</span><span>Dignissimos voluptate amet quos consectetur eos, sapiente illo est minus! Quidem pariatur harum necessitatibus a ipsum architecto quo qui fugiat dolor vero, consectetur, odit voluptatum voluptas unde ipsam autem possimus!</span></p>
<h3 id="header2">Hello world2</h3>
<p><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id, cumque quisquam. Officia iste harum fuga aperiam laudantium, qui temporibus quos repellendus exercitationem neque, similique accusamus quidem vel eos quasi atque!</span><span>Quisquam voluptatibus, minima cupiditate dolorum adipisci culpa, minus, explicabo nihil quo optio accusamus illo? Laboriosam fuga soluta rerum maxime id laudantium nihil repellat assumenda voluptatem recusandae odit, in perferendis corrupti?</span><span>Recusandae dolore obcaecati, omnis, at blanditiis dolores incidunt possimus eius corrupti dicta animi accusamus similique quas perspiciatis! Voluptatem veritatis debitis dignissimos facilis fugit eum nam! Hic asperiores nostrum cupiditate nihil!</span></p>
<h3 id="header3">Hello world3</h3>
<p><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio quidem minima voluptas officia ducimus? Maiores debitis excepturi corporis velit veritatis illo quia, repudiandae, consectetur magnam, architecto culpa minus eum ratione!</span><span>Dolorem vero iusto debitis ipsum aliquam, rem nobis. Impedit harum fugit repudiandae obcaecati exercitationem ea, molestias veniam ipsam, mollitia quas tempore nihil natus voluptatibus odit odio magni aut eum atque?</span><span>Magnam eius exercitationem enim eligendi ut dolorum sapiente magni repellat? Quis nesciunt itaque suscipit temporibus voluptatibus consectetur excepturi, consequuntur in atque aut repellat ut omnis sint exercitationem quibusdam error? Quo!</span></p>
<a href="#top">맨위로</a>
클릭하면 각자의 header로 가게 된다.
멀티미디어 관련 태그
audio 태그
src
controls 제어기능 시각화 여부
<h1>멀티미디어관련</h1>
<audio src="../sample/audio/major.mp3" controls autoplay muted></audio>
<video src="../sample/video/small.mp4" controls autoplay muted width="300px"></video>영상 주소 태그 <iframe>
frameborder => 영상 프레임 테두리
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/kVxTrhojpFI"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
폼 관련 태그
form : 사용자 입력 양식 태그. 서버로 사용자 입력 값을 전송할 수 있다.
- action : 폼을 제출할 서버 url
- method : 전송방식 2가지 GET (기본값) | POST
- GET : 사용자입력값을 url에 직렬화해서 전송. 단순 조회시 사용.
- POST : 사용자입력값을 http메세지 body에 작성(url이 노출되지 않음). 데이터입력, 수정, 삭제 용도로 사용
- label이랑 input 같이 짝지어서 적음!
- global 속성 : id ) 페이지내에 태그 식별자. 페이지내에서 중복이 있어서는 안됨.
- 폼 관련 속성 : name ) 폼전송시 사용할 속성명. name속성이 없으면 전송되지 않음.
<form action="" method="POST">
<label for="username">이름 : </label><!--라벨 클릭하면 input에 커서가 감-->
<input type="text" name="username" id="username" placeholder="이름을 입력하세요." value="신사임당">
<br>
<label for="useremail">이메일</label>
<input type="email" name="email" id="useremail" placeholder="이메일을 입력하세요.">
<br><br>
<!-- input:submit -->
<!-- input[type=submit] -->
<input type="submit" value="등록">
</form>
<form action="" method="GET">
<fieldset>
<legend>text관련</legend>
<label for="userId">아이디 : </label>
<input type="text" name="userId" id="userId" value="honggd" required>
<!--required : 필수 ! 공백검사는 별도.-->
<br>
<!-- label+input:password -->
<label for="password">비밀번호 : </label>
<input type="password" name="password" id="password" maxlength="12">
<br>
<label for="search">검색 : </label>
<input type="search" name="search" id="search">
<br>
<label for="email">이메일</label>
<input type="email" name="email" id="email" placeholder="이메일을 입력하세요.">
<br>
<label for="url">홈페이지 : </label>
<input type="url" name="url" id="url" value="http://">
<br>
<label for="tel">전화번호 : </label>
<input type="tel" name="tel" id="tel">
<br>
<label for="memo">메모 : </label>
<textarea name="memo" id="memo" cols="30" rows="3" style="resize: none;">a
b
c
d
e</textarea>
</fieldset>
<input type="submit" value="제출">
</form>
<form action="">
<fieldset>
<legend>숫자</legend>
<label for="amount">수량 : </label>
<input
type="number" name="amount" id="amount"
min="0" max="10" step="2" value="4">
<br>
<label for="score">점수 : </label>
<input
type="range" name="score" id="score"
oninput="console.log(this.value);" value="100">
</fieldset>
<button type="submit">제출</button>
</form>
<form action="">
<fieldset>
<legend>날짜/시간</legend>
<!-- label+input:date -->
<label for="date">날짜</label>
<input
type="date" name="date" id="date"
value="1999-09-09"
placeholder="날짜를 입력하세요.">
<br>
<label for="time">시각</label>
<input
type="time" name="time" id="time"
value="21:27"
placeholder="시각을 입력하세요.">
<br>
<label for="datetime-local">시각</label>
<input
type="datetime-local" name="datetime-local" id="datetime-local"
value="2022-05-19T22:27"
placeholder="날짜/시각을 입력하세요.">
</fieldset>
<button type="submit">제출</button>
</form>
<form action="">
<fieldset>
<legend>선택관련</legend>
<!-- radio 제시된 옵션중 택일해야 하는 경우. 취소는 불가하다. -->
<span>성별 : </span>
<input type="radio" name="gender" id="gender0" value="남" checked><label for="gender0">남</label>
<input type="radio" name="gender" id="gender1" value="여"><label for="gender1">여</label>
<br>
<!-- checkbox는 제시된 옵션중 복수개 선택이 가능한 경우 사용한다. -->
<span>취미 : </span>
<!-- (input:checkbox[name=hobby value]#hobby$+label[for=hobby$])*3 -->
<input type="checkbox" name="hobby" id="hobby1" value="축구" checked><label for="hobby1">축구</label>
<input type="checkbox" name="hobby" id="hobby2" value="농구"><label for="hobby2">농구</label>
<input type="checkbox" name="hobby" id="hobby3" value="야구"><label for="hobby3">야구</label>
<br>
<label for="nation">국적 : </label>
<select name="nation" id="nation">
<option value="kor">한국</option>
<option value="jpn">일본</option>
<option value="usa" selected>미국</option>
</select>
<!-- multiple 속성을 추가하면 복수개 선택이 가능-->
<br>
<label for="pet">반려동물 : </label>
<input type="text" name="pet" id="pet" list="pets">
<datalist id="pets">
<option value="강아지">
<option value="고양지">
<option value="가재">
</datalist>
</fieldset>
<button>제출</button>
<!-- button.type속성 기본값은 submit이므로, form안에서는 주의해서 사용해야 한다. -->
</form>
<form action="">
<fieldset>
<legend>기타</legend>
<label for="color">컬러 : </label>
<input type="color" name="color" id="color" value="#30ab5f" >
<br>
<label for="file">파일 : </label>
<input type="file" name="file" id="file">
<br>
<label for="">안보이지만 전송 : </label>
<input type="hidden" name="abc" value="가나다">
<br>
<input type="button" value="버튼">
<input type="submit" value="제출">
<input type="reset" value="초기화"> <!-- 초기값으로 돌려준다. -->
<br>
<button type="button">버튼</button>
<button type="submit">제출</button> <!-- button태그의 type속성 기본값은 submit이다. -->
<button type="reset">초기화</button>
</fieldset>
<button>제출</button>
</form>
반응형