<br>
: 줄바꿈
<wbr>
: style { white-space : nowrap; }
일때 문장 끝에 쓰면 줄바꿈
style { word-break: keep-all; }
-> 단어 단위로 떨어짐 (KCJ 언어는 한 글자씩 떨어짐)
<a>
: 하이퍼 텍스트(HT) 링크를 만들 때 사용한다.
href(참조할) 속성을 통해 경로를 지정한다.
❕ sections
grouping content
요소를 자식으로 허용한다.
❕ <a>
<button>
태그를 자식으로 두지 않는다.
target="_blank"
: 새로운 탭으로 열린다.
해쉬링크
(아이디 필요)
-> 페이지 내의 이동 ex)목차
a href="#three"
<abbr title=" ">
: 준말, 약자를 나타낼때 사용, 툴팁으로 나타난다.
✔<img>
: 이미지 삽입 (인라인 요소)
<src>
: 파일의 위치 및 파일명
/ -> 절대경로 (본래 경로)
./ -> 상대경로 (폴더 안 현재 위치)
<alt>
<srcset>
: 반응형 브라우저, 다양한 크기의 동일 이미지 2개 이상 사용할 때, IE에서 X
x서술자
: 화소의 밀도 (1pixel 안에 화소의 개수)w서술자
: 원본 이미지의 넓이sizes
: 뷰포트의 조건에 따라 이미지가 차지할 사이즈✔<picture>
: 이미지 포맷 자체를 변경하여 이미지를 보여준다.
media
: <source>
요소 안의 속성<img>
태그의 src
에 넣어 화면에 보여준다.<img>
태그가 없으면 화면에 나타나지 않는다. )<picture>
<source srcset="images/rabbit_500.png" media="(min-width:960px)">
<source srcset="images/rabbit_300.png" media="(min-width:640px)">
<img src="images/rabbit_150.png" alt="귀여운 토끼">
</picture>
type
: 이미지의 포맷 타입을 알려준다.<source>
요소의 사용이 불가능하면 최후에 <img>
요소 이미지 랜더링<picture>
<source srcset="rabbit.webp" type="image/webp">
<source srcset="rabbit.avif" type="image/avif">
<img src="rabbit.jpeg" alt="귀여운 토끼">
</picture>
⭐이미지 포맷 종류
GIF, JPG/JPEG, PNG, SVG(회사로고), WebP(만능), AVIF
⭐점진적 향상 기법
-기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 제공하는 기법
-더 나은 사용자 경험 제공
-애자일 방법론, 트레이닝에서 중요한 요소
<cite>
: 인용, 출처
웹표준에 맞는지 알아보는 사이트
https://validator.w3.org/#validate_by_input
2022/03/30