HTML Tips In this article I’ll share some tips and advice about HTML. markodenic.com 매우 유용하지만 평소엔 잘 몰랐던 HTML 팁들을 소개합니다. 'loading=lazy' 속성 사용자가 이미지 영역까지 스크롤한 경우에만 이미지를 호출하도록 하는 속성입니다. 이미지 호출량을 줄여줌으로써 네트워크 성능에 도움일 줄 수 있습니다. <img src='image.jpg' loading='lazy' alt='Alternative Text'> 이메일, 전화, SMS 링크 <a href="mailto:{email}?subject={subject}&body={content}"> Send us an email </a> <a href="tel:{phone}"> Call us </a> <a href="sms:{phone}?body={content}"> Send us a message </a> ol 태그에 'start' 속성 start 속성을 이용하여 Ordered Lists의 시작 숫자를 지정할 수 있습니다. <ol start="11"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Python</li> <li>Go</li> </ol> 'meter' 태그 <meter>를 이용해서 자바스크립트나 CSS없이 양을 표시할 수 있습니다. <label for="value1">Low</label> <meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter> <label for="value2">Medium</label> <meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter> <label for="value3">High</label> <meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter> HTML 자체 검색 list 속성을 이용하여 자동 검색을 쉽게 구현할 수 있습니다. <div class="wrapper"> <h1>Native HTML Search</h1> <input list="items"> <datalist id="items"> <option value="Marko Denic"> <option value="FreeCodeCamp"> <option value="FreeCodeTools"> <option value="Web Development"> <option value="Web Developer"> </datalist> </div> base 태그 head 태그 안에서 base 태그를 이용하여 HTML 페이지의 기본 target를 지정할 수 있습니다. 즉, 기본 target을 _blank로 설정하면 a 태그에서 target을 쓰지 않아도 기본값이 blank가 됩니다. <head> <base target="_blank"> </head> download 속성 링크를 열지 않고 다운로드하게 하고 싶으면 download 속성을 써주면 됩니다. <a href='path/to/file' download> Download </a>

#tip

우리가 몰랐던 HTML 팁들