HTML 팁을 모아봤습니다.
링크 관련
연락처 링크 만들기
href 속성
<a>태그에href속성을 활용href="mailto:"href="tel:"href="sms:"
1
2
3
4
5
6
<!-- 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>
다운로드 링크 만들기
download 속성
download속성을<a>요소와 함께 사용- 사용자가 링크를 클릭할 때 링크된 리소스를 탐색하는 대신 다운로드하도록 지정
1
<a href="document.pdf" download="document.pdf"> Download PDF </a>
상대 링크에 대한 기본 URL 정의하기
<base> 태그
- 웹 페이지의 모든 상대 URL에 대한 기준 URL 정의
- 웹 페이지의 모든 상대 URL에 대한 공유 시작점을 만들어 리소스를 쉽게 탐색하고 로드할 수 있게 하려는 경우 유용
1
2
3
4
5
6
7
<head>
<base href="https://shefali.dev" target="_blank" />
</head>
<body>
<a href="/blog">Blogs</a>
<a href="/get-in-touch">Contact</a>
</body>
링크에 대한 타깃 동작 정의하기
target 속성
- 링크된 리소스를 클릭할 때 표시할 위치를 지정
1
2
3
4
5
6
7
8
9
10
<!-- Opens in the same frame -->
<a href="https://shefali.dev" target="_self">Open</a>
<!-- Opens in a new window or tab -->
<a href="https://shefali.dev" target="_blank">Open</a>
<!-- Opens in the parent frame -->
<a href="https://shefali.dev" target="_parent">Open</a>
<!-- Opens in the full body of the window -->
<a href="https://shefali.dev" target="_top">Open</a>
<!-- Opens in the named frame -->
<a href="https://shefali.dev" target="framename">Open</a>
그룹화
접을 수 있는(collapsible) 컨텐츠 만들기
<details>, <summary> 태그
- 접을 수 있는 컨텐츠를 포함
<details>태그: 숨겨진 컨텐츠를 위한 컨테이너를 생성open속성: 숨겨진 컨텐츠가 보이면open속성이 붙음
<summary>태그: 클릭 가능한 레이블을 제공해 해당 컨텐츠의 표시 여부 전환
1
2
3
4
<details>
<summary>Click to expand</summary>
<p>This content can be expanded or collapsed.</p>
</details>
폼 요소 그룹화
<fieldset>, <legend> 태그
<fieldset>태그: 양식의 관련 요소를 그룹화<legend>태그:<fieldset>태그의 제목을 정의
1
2
3
4
5
6
7
8
9
10
11
12
<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>
드롭다운 메뉴 개선
<optgroup> 태그
<select>태그에서 관련 옵션을 그룹화- 큰 드롭다운 메뉴나 긴 옵션 목록으로 작업할 때 사용
1
2
3
4
5
6
7
8
9
10
11
12
<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>
다중 선택 지원
multiple 속성
<input>,<select>요소와 함께 사용해 사용자가 한번에 여러 값을 선택/입력할 수 있게 함
1
2
3
4
5
6
7
<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>
최적화
이미지 로딩 제어
loading 속성
<img>요소에 사용해 브라우저에서 이미지를 로드하는 방법을 제어"eager","lazy","auto"세 가지 값 존재
1
<img src="picture.jpg" loading="lazy" />
접근성 보장하기
alt 속성
- 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 지정
- 접근성과 SEO를 개선하려면 이미지에 설명이 포함된
alt속성을 포함할 것
1
<img src="picture.jpg" alt="Description for the image" />
비디오 표현 개선
poster 속성
<video>요소와 함께 사용하여 사용자가 비디오를 재생할 때까지 이미지를 표시
1
2
3
<video controls poster="image.png" width="500">
<source src="video.mp4" type="video/mp4 />
</video>
비디오 로딩 최적화
preload 속성
<video>요소에 사용하면 비디오 파일을 더 빠르게 로드하여 더 원활하게 재생 가능
1
2
3
<video src="video.mp4" preload="auto">
Your browser does not support the video tag.
</video>
입력 관련
최대·최소 입력 길이 설정하기
maxlength, minlength 속성
- 사용자가 입력 필드에 입력할 수 있는 최대·최소 글자 수를 설정
1
<input type="text" maxlength="4" minlength="2" />
특정 파일 유형 허용
accept 속성
<input>태그에 사용해 서버에서 허용하는 파일 유형을 지정 (파일 유형에만 해당)
1
<input type="file" accept="image/png, image/jpeg" />
컨텐츠 편집 활성화
contenteditable 속성
- 요소의 컨텐츠를 편집할 수 있는지 여부를 지정
1
<div contenteditable="true">You can edit this content.</div>
맞춤법 검사 제어하기
spellcheck 속성
<input>요소contenteditable="true"속성이 적용된 요소<textarea>요소- 위 세 요소에 사용해 브라우저에서 맞춤법 검사를 활성화 또는 비활성화할 수 있음
1
<input type="text" spellcheck="true" />
기타
추가 정보 제공
title 속성
- 사용자가 요소 위로 마우스를 가져갈 때 요소에 대한 추가 정보를 제공하는 데 사용
1
<p title="World Health Organization">WHO</p>
번역 기능 관리
translate 속성
- 요소의 컨텐츠를 브라우저의 번역 기능으로 번역할지 여부를 지정
1
<p translate="no">This text should not be translated.</p>
텍스트를 아래 첨자 및 위 첨자로 표시하기
<sub>, <sup> 태그
- 텍스트를 각각 아래 첨자 및 위 첨자로 표시
1
2
<p>H<sub>2</sub>O</p>
<p>(a + b)<sup>2</sup> = a <sup>2</sup> + 2ab + b<sup>2</sup></p>