ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Day 3] Text-level Sementics & Embedded Contents
    TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 3. 31. 00:36
    SMALL

    오늘은 제코베의 한재현 강사님께서 수업을 맡으셨다!

    재현님께서 풀어주시는 썰들과 동기들의 드립들(멋사 프론트엔드스쿨 2기엔 프로드립러 분들이 많다...아주...)

    이 많았어서 수업이 전혀 지루하지 않았다 ㅋㅋㅋ

     

    일단 오늘 배운 것은 어제에 이어서 HTML 요소에 대해 배웠는데, Text-level Sementics와 Embedded Contents이다.

     


    Text-level Sementics 

    이란,

     

    말 그대로 텍스트 수준의 요소에만 쓰이는 태그들을 의미한다.

    이러한 태그들에는

     

    <br>, <wbr> (줄바꿈)

    <a href=""> (하이퍼텍스트 링크)

    <b>, <strong> (폰트 굵기)

    <i>, <em> (기울임)

    <dfn> (용어 정의)

    <abbr> (줄임말)

    <sup>,<sub> (윗첨자, 아랫첨자)

    <span> (div와 마찬가지로 최후의 수단)

     

    이 있다.

     

    이 중 익숙하지 않은 태그들로 아래와 같이 실습을 해보았다.

    특히 a href의 같은 경우 이미지 삽입만 해봤는데 이렇게 다양하게 응용이 가능하다는 점이 신선했다.

    <p style="white-space: nowrap;">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit.<wbr> 
    Ducimus asperiores commodi minus quasi magni 
    </p>
    <!-- 창의 width가 변경될 시 줄 바꿈 되는 부분에 <wbr> 삽입. css의 white-space: nowrap과 주로 사용 -->
    <a href="https://www.naver.com" target="_blank">move</a>
    <!--새창을 열어 이동-->
    
    <a href="#one">ff</a> 
    <!--페이지 내 이동 이동할 곳의 아이디 필요-->
    
    <a href="index.html" download="a.hwp">download</a> 
    <!--다운로드. 파일 이름 지정-->
    
    <abbr title="world wide web">WWW</abbr>

     

     


    Embedded Contents

     

    말 그대로 '삽입된 콘텐츠'이다. 

    즉 텍스트를 제외한 이미지나 오디오, 동영상 등이 해당된다.

     

    1) <img>

    : 이미지 삽입 시 사용하는 태그이다.

     

    속성(프로퍼티) 종류

     

    1-1) src

    <img>태그를 사용하는 데 반드시 사용해야할 필수 속성이며, 브라우저에게 이미지 파일의 위치를 알려준다.

    파일의 위치 경로는 상대경로거나 절대경로여야 한다.

     

    1-2) alt

    alt는 이미지가 보이지 않을 때 대신 보여지는 텍스트 값이다.

    이 alt 값을 통해 스크린리더와 같은 접근성을 위한 프로그램에 정보 제공을 위해 사용되기도 하며,

    SEO에 도움을 주기도 한다.

     <img src="img.jpg" alt="cute penguins"> 
     <!--설명이 필요없는 경우는 비워서 넣어주는게 좋음 -->

     

    1-3) srcset

    srcset을 통해서 기기의 폭(width)에 따라 다른 이미지를 표시할 수 있다.

    x(픽셀 수), w(폭) 이 있는데,

    주의할 점은 x와 w는 동시에 사용할 수 없다는 점이다.

    <img
    src = "img.png"
    srcset = "
    img1x.png 620w,
    img2x.png 1000w,
    img3x.png 3000w">
    
    <!--w는 픽셀 수를 의미-->
    
    <img
    src = "img.png"
    srcset = "
    img1x.png 2x,
    img2x.png 3x">
    <!--x는 화소의 밀도를 의미-->

    위의 정보를 바탕으로 브라우저는 어떤 이미지를 표시할지 선택한다.

     

    1-4) sizes

    위에 w는 브라우저가 화면의 폭을 가득 채우는 것에 초점을 둔다면,

    sizes는 가득 채우는 것과 관련 없이 내가 원하는 폭의 사이즈로 설정이 가능하다!

    (즉 sizes를 설정하지 않는 것은 자동적으로 sizes=100vw로 설정된 거나 다름없다)

    <img
    src = "img.jpg"
    srcset="img1x.png 620w,
    img2x.png 1000w,
    img3x.png 3000w"
    sizes="50vw">

    그러면 만약 브라우저 폭이 1920px이라 가정할 때, sizes가 위처럼 50vw(화면의 반)이면, 1920/2 = 960 픽셀이기 때문에 브라우저가 960픽셀만 필요하다고 인식하기 때문에 3x가 아니라 2x 이미지를 선택한다. 

     

     

     

    2) <picture>

    picture는 <source> <img> 태그를 통해 각기 다른 디스플레이의 조건에 맞는 이미지를 보여준다.

    <picture>
        <source srcset="babies_large.jpeg" media="(min-width:960px)">
        <source srcset="babies.jpeg" media="(min-width:620px)">
        <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
    </picture>

    2-1) media

    media 속성의 값을 통해 조건에 맞는 이미지를 찾는다.

    조건에 맞는 source 요소 안의 srcset 속성 값을 찾아 img태그의 src에 넣어 화면에 보여준다.

    따라서 picture 태그를 쓸 때는 img태그가 반드시 있어야 한다!

     

    2-2) type

    이미지의 포맷 타입을 브라우저에게 알려준다.

    <picture>
        <source srcset="babies.webp" type="image/webp">
        <source srcset="babies.avif" type="image/avif">
        <img src="babies.jpeg" alt="귀여운 아기 팽귄들">
    </picture>

    위에서부터 차례대로 브라우저가 지원하는 포맷인지 확인하고, 만약 지원하지 않는 포맷이면

    다음 source 요소로 넘어간다. 

    위의 webp나 avif 와 같은 최신 포맷들은 지원 안되는 브라우저들이 있기 때문에

    점진적 향상기법을 쓰는 것이 좋다.

     

    *점진적 향상 기법: 기본적으로 구식 기술 환경에서 동작할 수 있는 기능을 구현하고, 최신 기술을 사용할 수 있는 환경에서는 더 나은 사용자 경험을 제공할 수 있는 최신 기술을 제공하는 방법

     

     

     

    3) <iframe>

    iframe은 현재 HTML에서 또 다른 HTML 페이지를 삽입할 때 사용하는 태그이다.

    src 속성에 다른 html 링크를 넣으면 된다.

    <iframe width="894" height="503" src="https://www.youtube.com/embed/POJ5S2aUizA" 
    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
    clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <!--유튜브는 동영상에서 우클릭을 하여 소스코드를 복사할 수 있다.-->
    <iframe width="1000px" height="500px" src="http://paullab.co.kr/" frameborder="0"></iframe>
    <iframe width="200px" height="200px" src="https://www.naver.come" frameborder="0"></iframe>
    <!--네이버와 같은 대형 사이트는 보안 문제로 인해 뜨지 않고 에러가 난다.-->

     

    4) <audio>

    audio는 음악 컨텐츠를 재생하는 태그이다. src를 이용해 오디오 파일의 위치를 브라우저에게 알려준다.

    <audio controls autoplay loop class="bgm">
         <source src="https://drive.google.com/uc?export=download&id=1xbevC0q-fNUDuoFCSLUdot0OIO81LgpE" type="audio/mp3" >
    </audio>

    4-1) controls : 오디오를 제어할 수 있는 컨트롤러 생성

    4-2) autoplay: 오디오를 자동으로 재생(크롬에선 정책상 autoplay가 안된다.)

    4-3) loop: 오디오 반복

     

    5) <video>

    video도 audio와 비슷하다. 다만 type을 mp4, webm 등 지정할 수 있다.

     

    <video controls width="250">
    
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
                    type="video/webm">
        
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
                    type="video/mp4">
    
    </video>
    <!--출처 mdn-->

     

    +) html 유효성 검사할 때 유용한 사이트

    https://validator.w3.org/#validate_by_input

     

    The W3C Markup Validation Service

    Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

    validator.w3.org

     

    반응형

    댓글

Designed by Tistory.