TIL 21.09.05 HTML

<img>

빈요소이다.

<img 
  src = "파일이 위치한 경로(절대경로 or 상대경로) or URL" 
  alt = "그림제목" 
  title="곰"
  width: "100px">

  alt(alternative text)
  이미지에 대한 설명을 나타내주는 역할을 한다. 
  alt의 value는 이미지가 깨졌을 때 나타난다.

  title
  이미지에 마우스를 올렸을 때 title의 value를 띄워주는 역할을 한다.

  width
  이미지의 가로 크기를 설정해 준다.
  가로만 설정해 줘도 비율에 맞게 줄어드는 특징이 있다.
  full이라는 단위는 없다.

  height
  이미지의 세로 크기를 설정해 준다.
  
  지원하는 이미지 형식
  웹 브라우저에서 이미지 확장자를 지원하는 형식을 확인해야 한다.
  
  레스터 이미지
    JPEG
      정지 이미지에 적합하다. 정지 이미지의 손실 압축에 적합하다.
    PNG
      정지 이미지에 적합하다. 투명도가 필요할 때 사용한다.
    GIF
      여러장의 이미지로 애니메이션 표현이 가능하다.
    WEBP
      위의 세가지 이미지를 대체해서 나온 확장자이다.
      압축률도 좋고 위 이미지보다 선명하다.
  SVG(벡터 이미지)
    크기를 확장해도 손실되지 않는다. 아이콘, UI 등에 적용된다.
 
  canisue.com 사이트에 들어가 webp를 검색시 사용할 수 있는 브라우저를 알 수 있다.
 
  srcset
  큰화면으로 보는 사람에겐 큰 그림을 작은 화면으로 보는 사람에겐 작은 그림을 보여준다.
  
  placeholder.com에 들어가서 'via.placeholder.com/크기' 를 입력 할 경우
  정사각형 '크기'의 크기 이미지를 만들어 준다.
  
  <img 
    srcset=
    "images/small.png 300w",
    "images/medium.png 450w",
    "images/large.png 600w">
  
  위와 같이 설정 할 경우 화면의 크기를 줄이거나 늘렸을 때
  300px 미만에선 small.png를 다운 받고 300px 이상에선 450px medium.png
  600px 이상에선 large.png를 다운 받습니다. 즉 화면의 크기가 600이상일 때
  사용하는 이미지의 경우 large.png 이미지를 사용한다는 의미입니다.
  
  브라우저가 빠르게 작동하면서 또 어느 정도의 이미지를 렌더링 해주기 위해
  위와 같은 로직을 사용했다는 것이 매우 흥미로웠다.
  
  sizes
  미디어조건
  <img sizes="(minx-width: 600px) 600px, (min-width: 450px) 450, 300px">
  해석
  그림크기가 600보다 큰 값에 대해선 600px유지, 450px < 그림크기 -> 450 유지
  450px > 그림크기 -> 300px

<video>

<video></video> 형식이다. 빈태그가 아니다.
video 태그 안에 넣은 내용은 video가 재생되지 않을 경우 나타나는 역할을 한다.
  
  controls
  재생버튼 음량버튼 구간조절 할 수 있는 기능을 적용하는 attribute.
  
  contorls(default=False)
  <video controls>
    <source src ="경로 or URL">
  </video>
  
  autoplay
  비디오 콘텐츠가 사운드를 가지고 있을 때 브라우저가 autoplay를 막는 기능이 있다.
  어릴 적 소리가 교실에서 시청각 자료를 듣다가 소리가 빵하는 것을 들은 기억이 있을 것이다.
  아래 코드는 비디오가 재생이 되지 않지만
  
  <video autoplay>
    <source src ="경로 or URL">
  </video>
  
  아래 코드는 비디오가 재생이 된다. muted를 설정해 줬기 때문
  우클릭해서 컨트롤버튼을 눌러서 소리를 다시 재생시킬 수 있다.
  <video autoplay muted>
    <source src ="경로 or URL">
  </video>
  
  poster
  poster를 통해 지정한 파일의 경로를 지정해주면 웹화면의 첫화면에 지정한 파일이 뜬다.
  <video poster="경로 or URL">
    <source src ="경로 or URL">
  </video>

<audio>
빈요소가 아니다 -> 자식 요소를 만들 수 있다.

  source
  <audio controls>
    <source src ="">
    <source src ="">
    <source src ="">
    Sorry Browser doesn't support audio files.
  </audio>

  위와 같이 코드를 작성 할 경우 브라우저가 소스가 지원가능한 소스인지 판단한다.
  지원 할 경우 소스를 플레이시키고 그렇지 않을 경우그 다음 소스를 플레이시킨다.
 
  <figure>
    <audio 
      controls
      src = "경로 or URL">
    </audio>
  </figure>

<canvas>
캔버스에 자바스크립트를 사용해서 그리는 요소이다.

<iframe> //inline frame

보통 지도를 띄어주는 mark up 요소가 iframe이다.
보안 상의 이유로 iframe을 허용하는 웹사이트일 경우에만 띄울 수 있다.

지금까지 어떻게 보여줄지 고민을 했다면 폼의 경우 정보를 어떻게 받을지 마련해주는 elem
단독 사용시 아무 것도 보이지 않는다(그 자체로 요소인 태그가 아니다).

  <form 
    action="(경로 or URL)"  <!--아무 것도 적지 않을 경우 현재 페이지로 전송-->
    method="(POST method or GET method)">
    <div>
      <label for= "self_name">이름</label>
      <input id="self_name" type="text" name="test">
      <button type="submit">제출</button>
    </div>
    
    <div>
      <label>색깔 :   
        <input type="text" name="color">
      </label>
    </div>
  </form>
  
  GET method
  GET method의 경우 사용자가 입력한 값이 input name에 대한 value로 들어가 주소창에
  보여지기 때문에 보안의 문제가 있어 사용이 권장되지 않는다.
  검색 정도의 작업을 수행할 대 위 메소드가 적용될 수 있다.
  
  POST method
  POST method의 경우 사용자가 입력한 값이 주소창에 들어나지 않아 GET method에 비해 보안
  이 보완되었다.
  
  type
  text 뿐만 아니라 파일, email, 달력, 숫자, range 등 MDN에서 필요한 부분을 보고 적용.
  
  <label>
  type으로 사용자의 입력한 값을 받을 때 label을 통해 설명란을 적어 줄 수 있다.
  가능하면 label에는 text만 입력해 줄 것을 권장합니다.
  해당 태그 안에 input을 작성 할 경우 label에 for을 적어주지 않아도 된다.