HTML 팁을 모아봤습니다.
start 속성
start 속성으로 목록 항목 (<li>)의 시작 번호 지정
1
2
3
4
5
<ol start="20">
<li>Pineapple 🍍</li>
<li>Apple 🍎</li>
<li>Greenapple 🍏</li>
</ol>
1
2
3
20. Pineapple 🍍
21. Apple 🍎
22. Greenapple 🍏
reversed 속성
reversed 속성으로 목록 번호의 순서 뒤집기
1
2
3
4
5
<ol reversed>
<li>Pineapple 🍍</li>
<li>Apple 🍎</li>
<li>Greenapple 🍏</li>
</ol>
1
2
3
3. Pineapple 🍍
2. Apple 🍎
1. Greenapple 🍏
<mark> 태그
<mark> 태그를 스타일링 span 대신 사용해 텍스트를 강조
1
<p>This is <mark>important</mark></p>
loading="lazy" 속성
미디어 요소에 loading="lazy" 속성을 추가해 사용자가 스크롤할 때까지 미디어 요소의 로딩을 지연시켜 페이지 성능을 향상시킬 수 있음
1
<img src="image.jpg" loading="lazy" />
<kbd> 태그
<kbd> 태그로 키보드 입력을 제시
1
<p>Press <kbd>alt</kbd> & <kbd>tab</kbd> to change window</p>
rel="icon" 속성
rel="icon" 속성으로 favicon을 정의
1
<link rel="icon" href="logo.webp" />
##
<picture> 태그를 사용해 화면 크기에 따라 다양한 종횡비의 이미지를 표시
- 반응형 웹 디자인을 구현하는 데 매우 유용
1
2
3
4
5
<picture>
<source srcset="large.webp" media="(min-width: 1200px)" />
<source srcset="medium.webp" media="(min-width: 800px)" />
<img src="regular.jpg" />
</picture>
dir 속성
dir 속성을 자동으로 설정하면 언어에 따라 텍스트 방향이 자동으로 변경됨
1
<p dir="rtl">Awesome!</p>
<meta> 태그 설명
<meta> 태그 설명을 추가해 SEO에 영향
- 검색 엔진 결과 페이지에서 사이트 이름 아래 표시되는 텍스트를 나타냄
1
2
3
4
<meta
name="description"
content="Gitpod streamlines developer workflows by providing prebuilt, collaborative developer environments in your browser - powered by VS Code."
/>
<abbr> 태그
<abbr> 태그를 사용해 컨텐츠를 축약
1
<abbr title="National Aeronautics and Space Administration">NASA 🚀</abbr>
poster 속성
poster 속성을 사용해 동영상이 다운로드되는 동안 또는 사용자가 재생 버튼을 누를 때까지 표시할 이미지 지정
1
<video src="video.mp4" poster="flowers.jpg"></video>