[멋쟁이 사자처럼 부트캠프] - 비디오, 이미지 넣기

Picture와 Source요소

picture 태그 자체로는 화면에 아무것도 표시하지 않습니다.
단지, 내부의 반응형 이미지를 제공하는 source 태그가 있다면 source 태그의 srcset 속성과 media 속성 및 type 속성으로 설정한 반응형 이미지에 맞는 이미지 소스를 선택하도록 환경을 제공하는 역할을 합니다.

출처 : https://codingeverybody.kr/html-picture%EC%99%80-source-%ED%83%9C%EA%B7%B8-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0/

즉, picture 태그는 source와 img 태그의 부모 요소로서 아래에 포함하고 있는 태그들은 모두 하나의 picture라고 생각할 수 있다.

 

    <!-- 디바이스 픽셀 밀도에 따라 반응형 이미지를 적용할 경우 (W descriptor) -->
    <picture>
      <source srcset="/src/assets/rwd/small-550.jpg 550w, /src/assets/rwd/medium-1024.jpg 1024w, /src/assets/rwd/large-1600.jpg 1600w" sizes="100vw" />
      <img src="/src/assets/rwd/normal-1920.jpg" alt="" />
    </picture>

 

srcset을 통해서 현재 뷰포트의 크기가 550 이하일 때, 1024 이하일 때, 1600 이하일 때 각각 다른 이미지가 출력되는 걸 확인할 수 있다.

추가로 성능면에서 우수성을 가져가고자 한다면  img 태그에 width와 height 값을 지정해주어 이미지의 크기를 고정해 주는 것이 성능면에서 우수성을 가지고 갈 수 있다.

 

    <!-- 미디어 조건이 orientation 일 경우 -->
    <picture>
      <source media="(orientation: landscape)" srcset="/src/assets/rwd/lezhin-wide.webp" />
      <img src="/src/assets/rwd/lezhin-narrow.webp" alt="" />
    </picture>

media="(orientation: landscape)" 는 미디어의 조건이 가로 상태일 경우를 의미한다.

즉, 세로보다 가로가 더 넓을 경우 narrow.webp의 이미지를 srcset에 선언한 wide.webp로 바꾸라는 의미이다.

 

---

video 관련 요소

    <video autoplay muted loop controls poster="/src/assets/video/poster.jpg">
      <source src="/src/assets/video/google-developer-stories.webm" type="video/webm" />
      <source src="/src/assets/video/google-developer-stories.mp4" type="video/mp4" />
      <a href="/src/assets/video/google-developer-stories.mp4" download="구글 개발자 이야기">영상 다운로드</a>
    </video>

 

video 태그 내부의 속성 값에는 여러가지가 있다.

 

autoplay(자동재생), control(비디오를 컨트롤할 수 있도록 한다), loop(동영상이 끝나면 자동으로 처음으로 돌아감), muted(음소거), poster(유튜브 썸네일과 같은 개념 동영상 시작 전에 보이는 이미지를 등록할 수 있다.)

 

See the Pen video와 트랙요소 by 김도혁 (@mnzipjlg-the-bold) on CodePen.

 

track을 통해 자막을 활성화할 수 있다.

 

---

ifram, object 요소

 

iframe 요소

See the Pen iframe 요소 by 김도혁 (@mnzipjlg-the-bold) on CodePen.

 

외에도 유튜브 동영상 또는 다른 새로운 pdf 등을 삽입이 가능하다.

 

See the Pen object 사진과 유튜브영상 넣기 by 김도혁 (@mnzipjlg-the-bold) on CodePen.

 

이미지를 object로 생성하고 iframe안에 유튜브 영상 가져오기

---

Map과 Area 요소

 

이미지 맵 태그를 쉽게 만들어주는 사이트가 있다.

www.image-map.net/

Free Online Image Map Generator

 

사이트를 이용하여 서울, 경기도, 인천 등등의 지역을 map 태그와 area 태그를 이용하여 분류할 수 있다.

위처럼 href에 원하는 사이트 주소나 페이지를 입력하면 area 좌표의 구역을 클릭할 경우 해당 페이지로 이동할 수도 있다.

 

예를 들어 대한민국의 관광지를 소개하는 사이트를 만들 때 유용하게 쓰일 태그이다.

---

form (input)

form 태그 안에 input 태그를 통해서 서버로 보낼 수도 가져올 수도 있다.

<!-- form 요소 안에 submit 버튼이 있는 경우 -->
    <!-- type 속성의 값을 email로 지정하면 입력 값은 이메일 형식을 유지해야 함. -->
    <form action="/" method="post" id="likelion">
      <input type="email" name="userEmail" id="userEmail" />
      <button type="submit">전송</button>
    </form>
    
    
    <!-- form 요소 밖에 submit 버튼이 있는 경우 (id, form 속성으로 연결) -->
    <!-- HTML5에 새롭게 추가된 사용 방식 -->
    <!-- type 속성의 값을 url로 지정하면 입력 값은 이메일 형식을 유지해야 함. -->
    <form action="/" method="post" id="bootcamp"></form>
    <input type="url" form="bootcamp" name="yourEmail" id="yourEmail" />
    <button type="submit" form="bootcamp">전송</button>

 

 

form 태그는 데이터를 제출하기 위한 양식 영역을 나타낸다.

아래 태그와 같이 form에 id값을 통해서 input과 button에서 form태그를 통해서 지정해 줄 수 있다.

 

 

fieldset과 legend

<!-- fieldset과 legend 요소로 연관성 있는 폼 서식을 그룹화 시킬 경우 -->
    <form action="/">
      <fieldset>
        <legend>고객 정보</legend>
        <!-- 명시적인 레이블링 -->
        <div>
          <label for="userName">이름</label>
          <input type="text" name="userName" id="userName" required />
        </div>
        <div>
          <label for="email">이메일</label>
          <input type="text" name="userEmail" id="userEmail" required placeholder="guest@linklion.net" pattern="[A-Za-z0-9!#$%&'*+/=?^_`{|}~@.\-]+" />
        </div>
        <!-- 암묵적인 레이블링 -->
        <div>
          <label>
            암호
            <input type="password" name="userPwd" required placeholder="6자리 이하" maxlength="6" />
          </label>
        </div>
        <input type="reset" value="초기화" />
        <input type="submit" value="전송" />
      </fieldset>

고객 정보

이름

이메일

암호

 

fieldset은 웹 양식 관련 컨트롤과 레이블을 그룹화해서 묶은 세트를 의미한다.

여기서 legend 태그는 필수는 아니지만, 스크린 리더 사용자에게 그룹의 내용을 알려주는 중요한 요소이다.

또한, 웹 접근성을 고려할 때 반드시 필요한 요소 중 하나이다.