Text-level semantics
<wbr>은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 것.
단어만 떨어졌었는데 (veiw port 사이즈 줄일 때) 문장 전체를 내릴 수 있음. css에서 white-space가 normal로 되어있어서 기능이 없어 보이는 것 뿐.
CJK는 한글자씩 떨어지게 되어있는데 영어처럼 바꾸고싶다면?
style=”word-break:keep-all”
text-level 와 grouping content 차이
공간을 어떻게 차지하느냐.
해시 링크
Internet Explorer 는 download 속성을 지원하지 않는다.
<a href="#three">click</a> <!-- 해쉬 링크 -->
<a href="./index.html" download>click</a>
<a href="./hello.hwp">hwp click</a>
<a href="./hello.hwp" download="a.hwp">hwp download click</a> <!--파일이름 지정-->
<a href="./hello.pdf">pdf click</a>
<a href="./hello.pdf" download="a.pdf">pdf download click</a>- 해당 id로 이동
- 파일 열어보기
- 다운로드
<IMG>
- 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줌.
srcset속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용.- 브라우저에게 이미지의 선택권을 위임하는 속성입니다.
x서술자, w서술자, sizes 속성
- x서술자는 화소의 밀도(pixel density)를 나타냄.
- 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려줌.
<img
width="200px"
srcset="img/logo_1.png 2x,
img/logo_2.png 3x
src="a.jpg"
alt="test">⚡Pixel density : 동일한 면적에 들어가는 화소의 수.
화소의 갯수가 많을수록 더 높은 해상도의 기기임.
- w서술자는 원본 이미지의 넓이가 차례대로 300px, 600px, 900px 임을 브라우저에게 알려줌. px이 아닌 w로 표기하는것에 주의
srcset을 작성할 때는 크기가 큰 것 부터!
<img
width="200px"
srcset="img/logo_1.png 300w,
img/logo_2.png 600w,
img/logo_3.png 700w" <!--px 아님 주의-->
src="a.jpg"
alt="test">-
w서술자와 x서술자는 동시에 사용할 수 없음.
-
src 필수 작성. srcset이 작동하지 않을 것을 대비.
pc쪽에서는 아직 사용하기 어려움. 👉지원하지 않는 브라우저가 아직 꽤(?) 있기 때문에. -
sizes속성은 뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저 알려줌.
<img
srcset="img/logo_1.png 300w,
img/logo_2.png 600w,
img/logo_3.png 700w"
sizes="(min-width: 960px) 250px,
(min-width: 620px) 150px,
300px"
src="a.jpg"
alt="test">웹표준을 준수를 위해
srcset 속성을 사용하면 그에 맞는 sizes 속성도 반드시 명시!
CSS를 통한 이미지의 사이즈를 컨트롤 하는 방법과 충돌 할 수 있음
(CSS 스타일이 sizes 속성보다 우선.)
<!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>Document</title>
</head>
<body>
<!-- <img width="200px" srcset="../images/rabbit_500.png 3x, ../images/rabbit_300.png 2x" src="../images/rabbit_150.png"
alt="test"> -->
<img srcset="images/rabbit_500.png 500w,
images/rabbit_300.png 300w, images/rabbit_150.png 150w" sizes="(min-width:960px) 500px, (min-width:640px) 300px,
900px" src="images/rabbit_150.png" alt="rabbit">
</body>
</html>picture
- 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소
<picture>요소는 이미지 포맷 자체를 변경
<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>✔ media
위의 코드에서 <source> 요소 안의 media 속성을 볼 수 있습니다.
<img> 요소가 없다면 이미지가 화면에 나타나지 않는다는 점에 주의🚨
: <picture> 와 <source> 요소 자체는 이미지를 표현하지 않음.
✔ type
이미지의 포맷 타입을 브라우저에게 알려줍니다.
<picture>
<source srcset="babies.webp" type="image/webp">
<source srcset="babies.avif" type="image/avif">
<img src="babies.jpeg" alt="귀여운 아기 팽귄들" type="image/png">
</picture>‘점진적 향상기법’ (아래와 같은 크로스브라우징 기법)
위에서부터 차례대로 브라우저가 지원하는 포맷인지 탐색하며 만약 지원하지 않는 포맷이라고 판단되면 다음 <source> 요소로 넘어감.
만약 모든 <source> 요소의 이미지 사용이 불가능하면 최후에 <img> 요소의 이미지를 랜더링.
때문에 WebP나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해 <picture> 요소와 함께 사용 하는것이 좋음.
🍯TIP
점진적 향상기법 🚩중요
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법입니다.
점진적 개선이라는 개념도 애자일 방법론과 트레이닝에서 굉장히 중요한 요소.**
이미지 포맷의 종류 🚩중요
GIF(Graphics Interchange Format) :
256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능합니다. 애니메이션 처리가 가능합니다.
JPG/JPEG (Joint Photographic Expert Group image):
매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다.
PNG (Portable Network Graphics) :
왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다.
SVG (Scalable Vector Graphics) :
SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능합니다.
단점 : 복잡하고 컬러풀한 이미지를 구현하려면 코드가 굉장히 많아야 함. 그러면 용량은 커짐... 단순한 이미지만 표현 가능.
ex) 이모지.
WebP (Web Picture Format) :
압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷입니다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷입니다.
AVIF (AV1 Image File Format) : WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷입니다. 아직 지원하지 않는 브라우저가 많음에 주의해야합니다.
만약 내가 쓴 코드가 잘 맞는지 확인하고 싶다면?
👉Click ME👈
✅기억할 것
- 포트폴리오 만들 때 꼭 여러 브라우저에서 실행해보고 확인.
- 인터넷 익스플로러 10 정도까지 지원하도록 코드 짜보기.
하루를 마무리 하며
내게 생소했던 것 위주로 정리를 해보았다...! html 파트에서는 별로 안나올 줄 알았는데...
몰랐는데 강사님도 html이 늘 새롭다고 하시더라구요... like poem...💌
html은 어느정도 알고 있다고 생각했는데, 오늘 새로운 개념을 많이 배웠다.
img를 동적으로 html에서 바꿀 수 있는지 몰랐다... 정말...
picture,scrset은 아직 생소해서 더 연습해 봐야할 것 같다.
📚과제
- 강사님이 주신 예제 사이트들 구조 분석.
