#HTML #노마드코더
안녕하세요. Gi_1입니다.
유튜브를 보던 중, 평소 공부하지 않던 HTML의 신박한 기능 5가지를 보게 되었는데요.
자바스크립트를 이용해서, 혹은 복잡한 CSS를 통해 구현할 수 있었던 기능 5가지를 정리하고자 합니다.
1. <progress></pregress>
progress는 진행정도를 나타내는 바를 만드는 태그입니다.
HTML5에서 추가 되었고, 익스플로러 10부터 지원합니다.
HTML
<progress value="50" min="0" max="100" id="progress"></progress>
max, value, min이 주요 속성입니다.
min,max에 따른 value 속성값에 따라 bar의 게이지가 상승합니다.
CSS
progress[value]::-webkit-progress-bar{
background-color: whitesmoke;
box-shadow: 0 2px 5px rgba(0,0,0,0.25) inset;
}
#progress[value]{
appearance: none;
border-radius: 15px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
}
#progress[value]::-webkit-progress-value{
background-image: linear-gradient(to left, #2ecc71, #3498db);
}
1.1 <meter></meter>
meter 태그는 low, high, optimum 속성을 통해 진행정도에 따른 색상변경이 가능합니다.
HTML
<meter value="15" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
<meter value="25" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
<meter value="35" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
<meter value="45" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
<meter value="55" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
<meter value="65" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
<meter value="75" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
<meter value="85" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
<meter value="95" min="0" max="100" low="20" high="65" optimum="15" id="meter"></meter>
2. <details></details>
HTML
<details id="details">
<summary>
<span>안녕하세요?</span>
</summary>
<p>네 안녕하세요</p>
</details>
CSS
#details[open]{
background: #cdedfd;
background-image: linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%);
}
summary태그 안에는 클릭 하기 전의 내용이 보여지면 되고, summary태그가 닫힌 후 클릭 시 나타날 내용을 입력하면 됩니다.
css로 오픈 시 배경색 변경도 가능합니다.
3. input type
HTML
<input type="week">
<input type="month">
<input type="time">
날짜를 선택할 때 type으로 input type은 브라우저마다 표시되는 형식이 다릅니다.
4. <picture></picture>
반응형 홈페이지의 경우 모바일 이미지와 PC화면의 이미지를 다르게 설정하는 경우가 굉장히 많은데 모바일 사용자가 pc의 큰 이미지를 다운로드 받게 하지 않는 기능입니다.
HTML
picture 코드로 감싸주고, source태그를 통해 이미지를 불러옵니다. 이후 미디어쿼리를 작성하면 끝!
img태그는 picture태그나 source태그가 지원하지 않는 경우 사용되는 이미지 입니다.
이를 통해 페이지 로딩속도를 늘릴 수 있습니다.
5. <datalist></datalist>
datalist는 위와 같이 자동완성 문구를 자바스크립트 없이 제공해 줍니다.
HTML
<input type="text" list="movie-options"><br>
<datalist id="movie-options">
<option value="가"></option>
<option value="가나"></option>
<option value="가나다"></option>
<option value="가나다라"></option>
<option value="가나다라마"></option>
<option value="가나다라마바"></option>
<option value="가나다라마바사"></option>
</datalist>
input의 list속성과 datalist의 id를 똑같이 맞춰주면 됩니다. 타이핑 하는 순간 자동완성 또한 구현됩니다.
댓글