[HTML/CSS] 임베디드 요소, 폼 관련 요소

자두·2021년 9월 28일
0

HTML-CSS

목록 보기
4/14
post-thumbnail

1. HTML CH4
2. HTML CH5-6

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 속성값

  1. text
  2. password
  3. button
  4. checkbox
  5. radio
  6. submit
  7. email
  8. tel
  9. number (number와 함께 사용할 수 있는 속성 : step, min, max)
  10. range
  11. date
  12. reset
  13. 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>
profile
자두
블로그 이사했어요 https://ktmihs.tistory.com/
이전 포스트

[HTML/CSS] 구조를 나타내는 요소, 목록과 표

다음 포스트

[HTML/CSS] 메타데이터 요소, 전역 속성

0개의 댓글