[코드라이언] HTML/CSS -Day-3 (Text Level과 img srcset)

<Text-Level Semantics>

 

Text-level semantics 태그의 특징들

공간을 얼마나 차지하느냐? (box의 사이즈)

그루핑 요소들은 화면을 다 차지함(inline) <p>태그 포함

텍스트 요소들은 자기 텍스트 크기 만큼만 차지함(block-level)

 

• <br> - 줄바꿈을 위한 기능적인 태그
• <wbr> - 화면이 텍스트보다 작아질 때 줄바꿈을 해주는 것. Wbr을 넣어준 지점부터 줄이 바꿔진다.
• <p style="white-space: normal;"> - white space(공백)이 있으면 줄바꿈을 하는 것 (텍스트 길이보다 화면이 작아지면)
• <b> - 텍스트 굵은 글씨 표현. 잘 사용하지 않음
• <strong> - 똑같이 굵게 표현하지만 중요도를 표현할 수 있음
• <i> - 이태릭체로 기울임 글꼴 나타냄 (html5 이후로는 주 언어와 다른 언어로 표현될 때, 다른 글들과 구분해야할 부분을 표현해야 할 때 사용)
• <em> - emphasize 기울임 글꼴 표현. 강조의 의미 있음. <strong>보다는 약함.
• <dfn> - define. 현재 문맥에서 정의하고 있는 용어를 표현. 가장 가까운 부모가 <p> 혹은 <dt><dd>, <section>요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명으로 간주한다.
• <abbr> 약자를 나타내는 태그

<dfn><abbr title="world wide web">www</abbr></dfn>

텍스트에 커서를 올리면 툴팁이 뜬다.

'title'을 넣으면 다른 태그에도 적용 가능

 

• <sup>, <sub> - 윗첨자, 아랫첨자 표현.(화학, 수학 공식 등에…) 작은 글자를 표현하는데에는 쓰이진 않는다.
• <span> - 줄 바꿈 없이 영역을 묶는 용도로 별다른 의미는 없다. <div>처럼 최후의 수단으로 이용할 것!

 

영어는 기본적으로 단어씩 줄바꿈이 일어나고 있지만

한중일어는 한글자씩 줄바꿈이 일어난다.

<p style="word-break:keep-all"></p> => 단어 단위로 줄바꿈이 일어나게 해준다

 

★href속성을 사용하지 않고 자바스크립트로 경로를 지정할 수도 있지만 웹 접근성에 위배되므로 href속성을 사용해주어야 한다.

 

a 태그 아래 자식 태그로 a 태그를 두지 않는다. (button등 유저와 인터랙션할 수 있는 태그도 마찬가지)

 

Sections,grouping content는 텍스트들의 자식으로 사용되지 않지만 a 태그만 예외적으로 sections, grouping content 태그를 자식으로 할 수 있다.

 

<a href="#?one>click</a>=>해쉬링크

<section id="one">

여기로 이동

</section>

앞에 #이 붙으면 보이고 있는 페이지 안에서 이동 (목차등에서 쓰임) 해쉬링크가 닻을 내린 곳에 id가 필요함

(class는 사용 불가능)

 

<a href="index.html" download>click</a>

Index.html을 다운로드 받을 수 있게 하는 태그

<a href="index.html" download="a.hwp">click</a>

다운로드 파일명을 정할 수 있음

위 다운로드  anchor 태그는 Internet Explorer에서 사용할 수 없다.

 

 

 

 

<Embeded Contents>

 

<img>, src, alt(이미지가 보여지지 않을 때 대체하는 text

 

Img 경로 적을 때

<img src="/images/me.jpg" alt="">

 

첫 '/'는 절대 경로(루트)를 뜻한다. 상하위가 아닌 폴더도 경로 표현할 수 있음

상대 경로는 html파일이 존재하는 곳. Html 파일을 기준으로 해서 찾아가는 것.

 

./ ->현재 폴더(생략해도 무방)

../ -> 현재 폴더의 상위 폴더

 

 

• <alt> - alternative text
  이미지가 보이지 않을때 이미지 대신 대체되는 텍스트를 보여줌

(장식적인 이미지들은 따로 alt 값을 " " 빈 값으로 넣는다. 공백을 안넣으면 파일명을 읽음)

Alt 값을 설정하지 않으면 이미지 파일 명을 컴퓨터  voice가 읽기 때문에 시각장애인에게 아주 불편함.

그러므로 alt값은 필수로 생각한다)

 

• Srcset -> 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 준다. 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할때 사용한다. 브라우저에게 이미지의 선택권을 위임하는 속성.

 

• X서술자

화소의 밀도(pixel density)를 나타냄.(같은 화면에 얼마나 많은 화소가 들어가는지)

 

<img

Width="200px"

Srcset="img/logo.jpg 2x,

   img/logo2.jpg 3x"

Src="a. jpg"

Alt="test">

 

• W서술자        

원본 이미지의 넓이가 차례대로 300px, 600px, 700px임을 브라우저에게 알려준다. Px이 아닌 w 단위 사용.

 

w서술자와 x서술자는 동시에 사용할 수 없다. 또, src 속성을 유지하는 것은  필수! Srcset을 사용할 수 없는 브라우저(IE)를 대비하여 사용하는 이미지다.

 

Srcset속성은 sizes 속성과 같이 쓴다. (반응형 웹에서 사용가능)

<img="img/logo_3.png 700w"

Sizes="(min-width: 960px) 250px,

  (min-width: 620px) 150px,

  300px"

 

*큰 이미지부터 차례대로

 

Sizes 속성 사용시 css통한 사이즈 컨트롤과 충돌 할 수 있다.

CSS가 우선한다. (반응형 이미지나 웹을 만들었다면 사전에 팀원에게 어떤 방식으로 만들었는지 공유하자)

 

 

• <picture> - <source>요소와 <img>요소를 이용
  각기 다른 디스플레이나 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소.
  img태그가 필수적으로 필요하다. 없으면 화면에 아무것도 나타나지 않음.

Img에 width값을 주면, media 속성을 쓸때 srcset 크기도 img width값과 똑같아지고 사진만 바뀜. 마치 분신처럼

 

 

 

• Type 속성 - 이미지의 포맷 타입을 브라우저에게 알려줌.

(이미지 파일의 확장자를 알려준다. Webp, avif등.. 최신 확장자 이미지 파일을 사용하고 싶을때 유용하다.)

모든 source 의 이미지 사용이 불가능하면 최후에 <img>요소의 이미지를 보여준다.

 

 

점진적 향상기법이란?

기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법.

 

 

이미지 포맷의 종류

GIF/JPG/PNG/SVG/webP/AVIF

 

 

 

#Srcset을 사용하면서 헷갈렸던 부분#

보여지는 브라우저 크기마다 다른 이미지를 보여주는건 srcset과 sizes속성을 이용해서 나타낼 수 있었다.

하지만 나는 초반에 이 동작 원리를 잘 못 이해하고 있었는데....

 

<picture>
        <img
            srcset="pizza.jpg 640w,
                    pizza2.jpg 640w,
                    pizza3.jpg 640w"
            sizes="(min-width: 900px) 800px,
                    (min-width: 600px) 500px,
                    300px"
             src="pizza.jpg"
             alt="test">

</picture>

 

이렇게 코드를 작성했을 때, srcset중에 첫번째인 'pizza.jpg'만 계속 브라우저에 나왔다.

내가 이해한 것은 srcset 순서에 따라 첫번째 이미지는 sizes의 첫번째 조건(min-width: 900px)일때 800px로 표현되고

두번째 이미지는 sizes의 두번째 조건(min-width: 600px)일때 500px로 표현되는 것이었다.

 

그래서 내가 이해한 바에 따르면 화면이 900px이상일 때는 pizza.jpg가 나오고, 900px이하 600px이상일 때는 pizza2.jpg가 나와야 하는데 자꾸만 pizza.jpg만 나오는 것이었다.

 

답답함에 멘토님에게 질문을 했고, 멘토님의 명쾌한 답 덕분이 단박에 이해할 수 있었다.

 

아래는 Hailey멘토님의 답변

 

---

당연히 img태그가 하나이기 때문에 이미지가 하나만 나오는거에요!

srcset에서 헷갈리신 것 같은데, srcset은 다른 환경에서 사용될 이미지 소스들을 묶어놓은 속성입니다.

무슨말이냐면, 브라우저별로 사용자에게 보여지는 최적의 이미지 크기는 다릅니다. 그래서 브라우저가 크기별로 최적의 이미지를 직접 골라줄 수 있게 하는 속성이에요.

https://codingcoding.tistory.com/386

 

말로 설명하는 것보단 그림을 보면서 이해하시는게 나을 것 같아서 링크드립니다!

위 링크 들어가셔서 읽어보시면 쉽게 이해하실 수 있을 것 같습니다.

 

우선 단위가 헷갈릴 수 있으니 w단위부터 설명해 드릴게요. w는 이미지의 원본 크기 중 "가로 너비"를 의미합니다. 예를들어 400*300(px)크기의 이미지 w값은 400w이라는 뜻이에요! 그래서 pizza.jpg 640w 는 640px이라고 볼 수 있어요. 그렇다면 소현님이 작성하신 코드 먼저 봐볼게요!

            srcset="pizza.jpg 640w,
                    pizza2.jpg 640w,
                    pizza3.jpg 640w"

위 코드는 640px까지 모두 pizza, pizza2, pizza3을 표현하는 코드입니다. 그래서 같은 조건이므로 화면 크기가 조절돼도 맨 위 사진인 pizza사진만 나올거예요! 다음으로 아래 코드를 자세하게 설명해볼게요.

            sizes="(min-width: 900px) 800px,
                    (min-width: 600px) 500px,
                    300px

(min-width: 900px) 800px 코드는 뷰포트 너비가 900px이상일 때 800px에서 표시되는 이미지를 사용해달라는 뜻입니다. (min-width: 600px) 500px 코드는 마찬가지로 뷰포트 너비가 600px 이상일때는 500px에서 표시되는 이미지를 사용해달라는 뜻이에요! 마지막 300px은 앞에 조건이 없기 때문에 뷰포트 너비와 상관없이 300px에 사용되는 이미지만 사용해달라 라는 뜻으로, 어떤 조건이 들어와도 위 조건들을 무시한 채 항상 300px에 해당되는 사진만 표현될 거예요.

마지막으로

  src="pizza.jpg"

은 srcset을 사용할 수 없는 환경에서 pizza.jpg로 사진을 나타내라는 뜻 입니다. 이 때 사용할 수 없는 환경은 IE를 의미합니다(IE는 srcset을 지원하지 않아요!)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST viewport</title>
</head>
<body>
    <img
        srcset="1.jpg 400w,
                2.jpeg 700w,"
        sizes="(min-width: 1000px) 100px"
        src="3.jpg"
        alt="Test" />
</body>
</html>

 

(코드를 읽고 어떻게 구현될 지 생각해 보신뒤에 아래 설명을 읽어주세요!)

저는 조건을 이렇게 줬습니다. srcset을 이용해서 400px까지는 1.jpg로,

700px까지는 2.jpeg로, sizes을 이용해서 1000px 이상부터는 100px에서 표현되는 이미지를 나타내도록 했어요.

그러면, 비어있는 조건인 700 ~ 999까지는 어떤 이미지가 표현될까요?! 

 

즉. srcset 순서대로 sizes 조건이 같이 이어지는게 아니라, srcset은 그저 여러 옵션일 뿐이고 sizes 조건에 제일 잘 맞는 사진을 선택해서 브라우저가 보여주는거고, 내가 작성한 코드는 어차피 다 크기가 640w 이니 크기가 다 같아 브라우저에서 그냥 첫번째 pizza.jpg 사진만 보여주는것이었다.

 

 

여기서 즉 이미지 선택권을 브라우저에게 위임한 것이다.(말그대로)

플러스로, 내가 준 옵션중에서 브라우저가 선택한 이미지 크기를 내가 지정하고 싶다면

 

    <img
        srcset="1.jpeg 400w,
                2.jpeg 700w,"
        sizes="(min-width: 1000px) 100px"
        src="3.jpg"
        width="300px"
        height="300px"
        alt="Test" />

요롷게 width값과 height값을 주면 된다.

그러면 뷰포트너비가 400px이하는 1.jpeg파일이 나타나는데, 300px 300px로 구현되고

뷰포트너비가 700px이하까지는 2.jpeg파일이 나타나는데, 300px 300px로 구현된다.

 

 

역시 도움없이 공부는 힘들다. 😥