[HTML/CSS] 임베디드 요소, 폼 관련 요소
CH7. 임베디드 요소
1) img -src, alt, width, height
- 문서에 이미지를 넣는 태그
- src 속성 : img태그에 필수적이며, 포함하고자 하는 이미지의 경로를 지정
- alt 속성 : 이미지의 텍스트 설명
네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줌 - width 속성 : 픽셀 단위의 이미지의 고유 너비. 단위 없는 정수
- height 속성 : 픽셀 단위의 이미지의 고유 크기. 단위 없는 정수
<img class="fit-picture"
src="/media/cc0-images/grapefruit-slice-332-332.jpg"
alt="Grapefruit slice atop a pile of other slices"
width="300" height="400">
2) 웹에서 사용하는 이미지 유형
- JPEG : 정지 이미지의 손실 압축에 적합
용량을 줄일 수 있음 - PNG : 원본 이미지를 보다 정확하게 보여줌, 투명도가 적용됨
- GIF : 여러 장의 이미지로 이루어진 애니메이션 표현 가능 (위 두 가지보다 화질이 떨어짐)
- WEBP : 이미지 포맷, 품질, 압축률 등이 우수하나 지원 브라우저가 제한적임
- SVG : 다양한 크기로 정확하게 그려야 하는 아이콘, 다이어그램에 사용됨
JPEG, PNG, GIF, WEBP 는 레스터 이미지
SVG는 벡터 이미지
✔ 지원하는 웹브라우저를 알고 싶다면? ➡ https://caniuse.com/
✔ 여백 크기 미리보기 이미지 ➡ https://placeholder.com/
3) 반응형 이미지 - srcset, sizes
srcset
- 사용할 수 있는 이미지 소스의 후보
- 사용자의 viewport에 따라 이미지를 다르게 보여주기 위함
- 보여줄 이미지 경로 크기w(w는 크기 단위) 순서대로 작성
sizes
- 소스 크기를 나타내는, 쉼표로 구분한 하나 이상의 문자열
- min-width, max-width로 이미지 크기를 제한할 수 있음
<img class="fit-picture"
src="/media/cc0-images/grapefruit-slice-332-332.jpg"
srcset="image경로 300w, image경로 450w, image경로 600w"
sizes="(min-width: 600px) 600px, (min-width: 450px) 450px, 300px"
alt="Grapefruit slice atop a pile of other slices">
4) video
- 미디어 플레이어를 문서에 삽입
- controls 속성 : 비디오를 재생시킬 수 있는 속성
- source 태그 : video에 src속성을 쓰는 대신, source 태그를 추가로 작성하여 src를 넣어주면 됨
한 개 이상의 소스를 지정할 수 있음 - autoplay 속성 : 자동 재생되는 속성
autoplay만으로는 새로고침 시, 재생 X - muted 속성 : 음소거 처리, autoplay와 함께 쓴다면 새로고침 시에도 재생이 됨
- poster 속성 : 비디오의 첫 썸네일을 지정할 수 있음
<video controls width="250">
<source src="/media/cc0-videos/flower.webm"
type="video/webm">
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
5) audio
- 문서에 소리 콘텐츠를 포함할 때 사용
- video와 동일하게 scource 태그를 사용할 수 있음
<figure>
<figcaption>Listen to the T-Rex:</figcaption>
<audio
controls
src="/media/cc0-audio/t-rex-roar.mp3">
Your browser does not support the
<code>audio</code> element.
</audio>
</figure>
6) canvas, iframe
canvas
- 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있음
iframe
- 현재 문서 안에 다른 HTML 페이지를 삽입
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
CH8. 폼 관련 요소
1) form
- 정보를 제출하기 위한 대화형 컨트롤을 포함
action
- 양식 데이터를 처리할 프로그램의 URI
method
- 양식을 제출할 때 사용할 HTTP 메서드
post
: POST 메서드. 양식 데이터를 요청 본문으로 전송get
: GET 메서드. 양식 데이터를action
URL과?
구분자 뒤에 이어 붙여서 전송- dialog: 양식이
<dialog>
안에 위치한 경우, 제출과 함께 대화 상자를 닫음
2) label, input
label
- 사용자 인터페이스 항목의 설명
- for 로 input을 찾음 (name)
input
- 사용자의 데이터를 받을 수 있는 대화형 컨트롤
- id로 해당 input을 찾음
- ladel 안 쪽에 위치할 수도 있음
(이 경우에는 따로 for, id로 구분할 필요 X)
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
<label>food: <input type="text" name="food"></label>
3) fieldset, legend
fieldset
- 웹 양식의 여러 컨트롤과 레이블을 묶을 때 사용
- 영역을 묶어줌
legend
- 부모
<fieldset>
콘텐츠의 설명
<form>
<fieldset>
<legend>Choose your favorite monster</legend>
<input type="radio" id="kraken" name="monster">
<label for="kraken">Kraken</label><br/>
<input type="radio" id="sasquatch" name="monster">
<label for="sasquatch">Sasquatch</label><br/>
<input type="radio" id="mothman" name="monster">
<label for="mothman">Mothman</label>
</fieldset>
</form>
4) input
속성값 참고 ➡ MDN-input
type 속성값
- text
- password
- button
- checkbox
- radio
- submit
- tel
- number (number와 함께 사용할 수 있는 속성 : step, min, max)
- range
- date
- reset
- button
함께 사용가능한 속성들 : name, placeholder, autocomplete, required, disabled, readonly
5) button
- 클릭 가능한 버튼
<button class="favorite styled"
type="button">
Add to favorites
</button>
button vs input
<button>
요소는 스타일을 적용하기 훨씬 수월함
<input>
은 value 특성에 텍스트 값밖에 지정할 수 없지만,<button>
은 내부 HTML 콘텐츠(<img>
도 가능)에 더해 ::after와 ::before 의사 요소를 사용하는 복잡한 렌더링도 가능
6) select, option, optgroup
select
- 옵션 메뉴를 제공하는 컨트롤
option
- select요소의 항목
- selected 속성 : 기본적으로 선택되어있는 항목
optgroup
- option을 묶을 수 있음
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
7) input - list 속성과 datalist
datalist
- 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 요소 여럿을 담음
- select와 비슷하게 항목을 고를 수 있지만, option들 중 추천 항목을 보여주고 입력값을 작성할 수 있다는 점에서 다름
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
8) textarea
- 멀티라인 일반 텍스트 편집 컨트롤
- 내부에 자식 요소를 가질 수 있음
(모든 입력값 그대로 적용됨)
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
Author And Source
이 문제에 관하여([HTML/CSS] 임베디드 요소, 폼 관련 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ktmihs/html-form저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)