[temp] 06. HTML

temp.WUI·2021년 8월 1일
0

temp

목록 보기
6/12
post-thumbnail

7

🤔IMG

속성

  1. src (source) - 필수 속성

    이미지의 주소 URL

  2. alt (alternative) - 필수 속성

    대체 텍스트

    alt 특성이 비어있을 경우 깨진 이미지 아이콘을 표시하지 않습니다.

  3. width, height

    html의 속성에서 사용할 때는 px을 사용하지 않고 사용이 가능하다.

    반응형 웹 사이트에 도움이 된다.

  4. srcset

    src 속성은 srcset을 사용할 수 없는 환경에서 동작합니다!

    조건들에 맞춰 출력될 이미지의 후보들

    브라우저에 제시할 이미지들의 원본크기를 지정합니다.

    사이즈별로 두장이상

    이미지의 크기의 단위로는 w(가로너비),x (작은 이미지 1을 기준으로 비율에 맞춰서)

    작은 이미지부터 순서대로 밑으로 큰 이미지로 바꿔가며 작성한다.

    "경로 가로크기w, ..."

    "./images/tobi.png 400w,

    ./images/tobi.png 700w"

    뷰포트가 550px 이면400이 아닌 700을 사용한다. 이미지를 늘리는 것보다 줄여서 사용하는 것이 해상도에 좋기 때문이다.

    • 픽셀 사이즈가 맞지 않는 이슈

      나 같은 경우에는 노트북의 기본 배율 설정이 150%였다.

      100%로 바꾸니 해결됨. (근데 그러면 너무 작아져서 125%정도로 맞췄다.

      레벨(해상도)이 다른 상태에서도 계속 같은 px 구간에서 이미지가 바뀌는 것은, 해상도가 변경되면서 1.71x, 2.28x 같이 '보간이 필요한 비율로 스케일링'(이미지가 흐릿해 지는 현상이 발생)되는 것을 막기 위해 하드웨어 수준에서 최적화된 비율(약 150%?)로 조정되는 것으로 생각됩니다.

      그리고 위 내용과 관련해 w단위에 대해서 조금 더 풀어보자면,'w단위는 브라우저(유저 에이전트)가 네트워크 자원을 낭비하지 않고도 최적화된 이미지를 선택하기 위한 조건으로 명시'한다고 이해하시면 쉽지 않을까 합니다.그래서 의도하든 실수든 단지 선택 조건일 뿐이기 때문에 실제 이미지와 전혀 상관없는 크기의 w단위 값을 제공할 수 있고, 브라우저는 그 값에 의존해서 이미지를 최적화 선택해 출력합니다.

      결과적으로, 우리는 srcset을 통해 해상도에 따른 이미지 크기를 고민할 필요가 없이 다양한 크기의 이미지를 제공하고 그 선택권을 브라우저(유저 에이전트)에 쥐여주는 것입니다.그런 의도로 스케일링 비율을 정확하게 지정해야 하는 x단위보단 w단위 제공이 많은 경우 더 최적화된 방법으로 이미지를 제공할 수 있다고 봅니다.그러면 위에서 언급한 현상들도 전혀 신경쓸 필요가 없습니다.(상황에 따라서 고정 크기(width)는 필요합니다)

    • w,x 디스크립터

      w 디스크립터는 이미지의 원본 크기(가로 너비)를 의미합니다.

      예를 들어 400x300(px) 크기 이미지의 w 값은 400w입니다.

      브라우저(User agent)는 지정된 w 디스크립터를 통해 각 이미지의 최적화된 픽셀 밀도를 계산합니다.

      브라우저의 해상도에 따라서 지정된 w와 px의 크기가 서로 다를 수 있음.

      x 디스크립터(Device pixel ratio descriptor)는 이미지의 비율 의도를 의미합니다.

      디스크립터는 디바이스의 픽셀 비율(Device pixel ratio)과 일치하는 값으로 최적화 선택됩니다.

      많은 경우 w 디스크립터의 사용을 추천합니다.

  5. sizes

    최적화된 조건들

    width는 일반출력

    (출력크기만 width 값으로 하고 뷰포트 사이즈에 맞춰서 해상도가 달라진다. - 이미지의 경로가 달라질 수 있다.)

    sizes 최적화출력

    (출력되는 이미지의 크기에서 최적화될 해상도를 선택해서 사진을 선택한다. - 최적크기의 경로가 정해진다.)

    sizes와 width를 같이 작성할 경우 width가 우선합니다.

    sizes="(min-width: 1000px) 700px" (뷰포트가 1000px 이상일때 700px로 700px사이즈에 최적화된 해상도의 이미지를 출력한다.)

    미디어 조건. 마지막 항목에서는 생략해야 합니다.

    일단 브라우저가 높은 해상도의 이미지를 가져오면, 네트워크 자원을 절약하기 위해 뷰포트 크기가 작아져도 더 낮은 해상도의 이미지를 가져올 필요가 없습니다.

    (그래서 이미지의 변경을 보기 위해서는 작업자 도구를 사용하고 새로고침을 한다.)

    srcset과 sizes는 IE를 지원하지 않는다.

🎶 audio tag

  • 속성

    1. autoplay (preload는 무시됨 - auto(전체파일 로드가 되어 있어야 하기에)

      사용자 경험에 악영향을 끼칠 수 있으니 피하는 것이 좋다.

    2. controls

    3. loop

    4. preload 데이터를 어느정도 로드해둘지(보통 메타데이터가 기본)

    5. src 링크

    6. muted 음소거

💖vidio tag

  • 속성

    1. autoplay

    2. controls

    3. loop

    4. muted

    5. poster

      썸네일 이미지

      명시되지 않으면 첫번째 프레임이 사용 가능하게 되면 첫번째 프레임을 포스터 프레임으로 사용

    6. preload

      (페이지가 로드될때 어느정도까지 불러올것인지)

    7. src

    8. width, height

😊figure

이미지와 이미지의 설명을 연결시킬 때 사용하는 태그이다.

요소는 독립적인 콘텐츠를 표현합니다. 요소를 사용해 설명을 붙일 수 있습니다. An elephant at sunset

이미지를 figure로 감싸고 그 안에 설명도 넣어준다.

🌹내장컨텐츠 IFRAME

사용자와 interactive

현재 페이지에 다른 HTML 페이지를 삽입 할 수 있음.

각각의 브라우징 맥락은 완전한 문서 환경이므로, 페이지에

속성

  1. name

  2. src 해당 서버의 url 입력

  3. width, height

  4. allowfullscreen 전체 화면 모드 사용여부

  5. frameborder(기본값이 1) 그러나 0으로 바꿔서 사용하는 경우가 많음.

    스타일 속성을 이용해서 border: 값을 주는 편이 다양한 스타일을 보여 줄 수 있다.

  6. sandbox 보안을 위해서 소스를 막고 값들을 사용해서 보안을 풀 수 있다.

    1. allow-dorm: 양식 제출 가능
    2. allow-scripts: 스크립트 실행 가능
    3. allow-same-origin: 같은 출처의 리소스 사용 가능

🖼 canvas

<canvas width="가로크기" height="세로크기">

Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링.

css나 html이 아닌 js로 그림을 그린다.

🎀 script

외부 js파일을 가져오거나 직접 작성하는 태그

(속성)

  1. async 스크립트의 비동기적 실행 여부 (src 필수)

    동기적 실행(순차적)

    비동기적 실행(필요에 의해 순서를 무시하고 실행 - 순차적이지 않음)

  2. defer (src 필수)

    문서 파싱! 구문 분석 후 작동 여부

    순차적으로 실행하다 보니까 defer 속성이 없으면 브라우저가 그 다음 동작을 실행하지 못한다.

  3. src 참조할 외부 스크립트 URL

    포함된 스크립트 코드는 무시됨. (외부나 내부 둘중 하나만 사용됨)

  4. type MIME 타입

profile
🧩 temp repo

0개의 댓글