[개인 공부용 정리]
1. 클릭 시 연락으로 연결되는 링크
메일 - mailto:메일 주소
연락처 - tel:+번호
문자 - sms:+번호
<!-- Email link -->
<a href="mailto:name@example.com"> Send Email </a>
<!-- Phone call link -->
<a href="tel:+1234567890"> Call Us </a>
<!-- SMS link -->
<a href="sms:+1234567890"> Send SMS </a>
2. collapse 가능한 컨텐츠
<details> 태그는 숨겨진 콘텐츠에 대한 컨테이너를 생성한다.
<summary> 태그는 해당 콘텐츠의 표시 여부를 전환할 수 있는 클릭 가능한 라벨을 제공한다.
<details>
<summary>Click to expand</summary>
<p>This content can be expanded or collapsed.</p>
</details>
3. 시멘틱 요소 활용하기
시멘틱 요소는 코드를 의미있게 만들어 HTML 구조와 웹 접근성, SEO 등을 향상시킨다.
4. 폼(form) 요소 그룹화하기
<fieldset> 태그를 이용하여 폼(form) 관련 태그들을 그룹화할 수 있다.
<legend> 태그는 <fieldset> 태그의 제목을 정의하는 태그로 사용된다.
<form>
<fieldset>
<legend>Personal details</legend>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="contact">Contact:</label>
<input type="text" id="contact" name="contact" />
<input type="button" value="Submit" />
</fieldset>
</form>
5. 드롭다운 메뉴(Dropdown Menus) 향상시키기
<optgroup> 태그는 <select> 태그 안에서 관련 <option> 태그들을 그룹화할 수 있다.
드롭다운 메뉴가 크거나 옵션 리스트가 길 때 종종 사용한다.
<select>
<optgroup label="Fruits">
<option>Apple</option>
<option>Banana</option>
<option>Mango</option>
</optgroup>
<optgroup label="Vegetables">
<option>Tomato</option>
<option>Broccoli</option>
<option>Carrot</option>
</optgroup>
</select>
6. 비디오(Video) 개선하기
poster 속성은 사용자가 비디오를 재생할때까지 보여주는 이미지(= 썸네일)를 설정할 수 있다.
<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4 />
</video>
7. 복수 선택지 만들기
multiple 속성은 사용자가 한 번에 여러 값을 선택/입력할 수 있는 속성이다.
<input>과 <select> 태그에 적용할 수 있다.
<input type="file" multiple />
<select multiple>
<option value="java">Java</option>
<option value="javascript">JavaScript</option>
<option value="typescript">TypeScript</option>
<option value="rust">Rust</option>
</select>
8. 아래첨자, 위첨자 표현하기
<sub> 태그 - 아래 첨자
<sup> 태그 - 위 첨자
9. 다운로드 링크 만들기
<a> 태그에 download 속성을 부여해서 사용자가 링크를 클릭했을 시 링크로 이동하는 대신 다운로드 되도록 지정할 수 있다.
<a href="document.pdf" download="document.pdf"> Download PDF </a>
10. 기본 URL 주소 설정하기
<base> 태그를 사용하면 웹 페이지의 모든 상대적인 URL들의 기본(base) URL을 설정할 수 있다.
웹 페이지의 모든 상대적 URL에 대한 공통된 시작점을 만들 때 유용하며, 리소스를 쉽게 탐색하고 로드할 수 있다.
<head>
<base href="https://shefali.dev" target="_blank" />
</head>
<body>
<a href="/blog">Blogs</a>
<a href="/get-in-touch">Contact</a>
</body>
11. 이미지 로딩 제어하기
<img> 태그의 loading 속성은 브라우저가 이미지를 어떻게 로드할 지를 제어할 수 있다.
loading 속성의 속성 값은 "eager", "lazy", "auto"가 있다.
<img src="picture.jpg" loading="lazy">
12. 번역 기능 관리하기
translate 속성을 이용하면 어떤 요소의 컨텐츠가 브라우저의 번역 기능에 의해 번역될 지를 지정할 수 있다.
translate 속성의 속성 값은 "yes"와 "no"가 있다.
<p translate="no">
This text should not be translated.
</p>
13 ~ 14. 입력값의 최대, 최소 길이 설정하기
maxlength 속성은 사용자가 입력창에 입력할 수 있는 최대 입력값 설정할 수 있다.
minlength 속성은 사용자가 입력창에 입력할 수 있는 최소 입력값 설정할 수 있다. .
<input type="text" maxlength="4">
<input type="text" minlength="3">
15. 컨텐츠 편집 기능 활성화하기
contenteditable 속성은 사용자가 해당 요소의 컨텐츠를 수정할 수 있도록 설정한다.
contenteditable 속성의 속성값은 "true"와 "false" 값이 있다.
<div contenteditable="true">
You can edit this content.
</div>
16. 맞춤법 검사 여부 지정하기
<input> 태그와 <textarea> 태그의 spellcheck 속성은 브라우저에서 맞춤법 검사 여부를 지정한다.
spellcheck 속성의 속성값은 "true"와 "false" 값이 있다.
<input type="text" spellcheck="true"/>
17. 웹 접근성 보장하기
alt 속성은 이미지가 보이지 않는 경우 이미지에 대한 대체 텍스트를 지정한다.
접근성과 SEO를 개선하려면 항상 이미지에 대한 대체 텍스트를 포함해야 한다.
<img src="picture.jpg" alt="Description for the image">
18. 링크의 동작 정의하기
target 속성은 링크를 클릭했을 때 링크 소스가 표시될 위치를 설정한다.
<!-- 같은 창에서 열기 -->
<a href="https://shefali.dev" target="_self">Open</a>
<!-- 새 탭에서 열기 -->
<a href="https://shefali.dev" target="_blank">Open</a>
<!-- 부모 창에서 열기 -->
<a href="https://shefali.dev" target="_parent">Open</a>
<!-- 윈도우 창 전체로 열기 -->
<a href="https://shefali.dev" target="_top">Open</a>
<!-- 지정된 창에서 열기 -->
<a href="https://shefali.dev" target="framename">Open</a>
19. 부가 정보 제공하기
title 속성은 유저가 마우스 오버(over)한 요소에 대한 추가적인 정보를 제공한다.
* 웹 접근성 측면에서 title 속성보다는 aria-label 속성을 사용하는 것이 좋다.
다만, title 속성이 마우스를 사용하는 User 입장에서 정보를 식별하기 용이한 방법일 수 있다면 aria-label과 함께 제공할 수도 있다.
<p title="World Health Organization">WHO</p>
20. 파일 형식 허용하기
accept 속성은 서버에서 허용하는 파일의 형식을 지정할 수 있다. (파일 형식만 지정)
보통 <input> 태그와 함께 사용된다.
<input type="file" accept="image/png, image/jpeg" />
21. 비디오 로딩 최적화하기
<video> 태그의 preload 속성은 비디오 파일을 빠르고 원활하게 로드(load)할 수 있다.
preload 속성은 페이지가 로드될 때 비디오 파일이 같이 로드되어야 하는지 여부와 그 방법을 지정한다.
preload 속성의 속성값은 "auto", "metadata", "none" 값이 있다.
- auto - 페이지가 로드될 때 브라우저가 전체 비디오 파일도 같이 로드
- metadata - 페이지가 로드될 때 브라우저가 메타데이터(metadata)만 로드
- none - 페이지가 로드될 때 브라우저가 비디오 파일을 로드하지 않음
<video src="video.mp4" preload="auto">
Your browser does not support the video tag.
</video>
출처
21 HTML Tips You Must Know About
In this post, I’ll share 21 HTML Tips with code snippets that can boost your coding skills. Let’s...
dev.to