이번 포스팅은 HTML에 신기한 태그들을 정리해보려고 한다. 이 글을 쓰게 된 이유는 회사에서 개발하는 과정에서 특수한 HTML태그로 원하는 기능을 구현할 수 있었고, 그로 인해 평소 그렇게 관심이 많지 않았던 HTML을 찾아보기로 했다.
1. textarea
먼저 살펴볼 태그는 textarea 이다.
<input></input>
우리가 보통 유저의 입력을 받을 때 위와 같이 input태그를 많이 활용할 것이다. 그러나 해당 input은 한줄로 내용을 받기 때문에 줄내림이 안 되는 것이였다. 구현하고자 했던 기능은 게시판에 글쓰기처럼 자유롭게 줄을 바꾸고 왼쪽상단부터 글을 작성하는 것이였는데....ㅠㅠ
암튼 언급한 기능을 구현할 때는 다음과 같은 textarea태그를 활용해보는게 좋을 거 같다.
<textarea></textarea>
참고로 해당 textarea의 자주 쓰이는 옵션으로는 1. rows와 cols로 가로, 세로 텍스트 영역에 제한을 둘 수 있고, 2. maxlength를 통해 입력받고자 하는 텍스트의 양을 제한할 수 있다.
2. detail과 summary
detail과 summary는 리스트 표출에 대한 간단한 처리를 도와주는 태그이다. 나도 실전에서 사용은 안 해봤지만 출근을 한다면 바로 적용해볼 생각이다.
게시글을 보려면 클릭해주십시오.- 게시글 1
- 게시글 2
- 게시글 3
위의 '게시글을 보려면 클릭해주십시오' 라는 문구를 클릭하면 게시글에 관한 숨겨진 리스트를 볼 수 있다. 이게 아무런 자바스크립트의 동작도 없이 HTML 태그만으로 이루어진다는게 나는 너무 신기했다.
태그의 구성은 다음과 같다.
<details> <summary>게시글을 보려면 클릭해주십시오.</summary> <ul> <li>게시글 1</li> <li>게시글 2</li> <li>게시글 3</li> </ul> </details>
3. meta http - equiv
해당 태그는 meta태그의 옵션 중 하나로 내가 보고 있는 페이지를 지정해둔 시간이 지나면 원하는 url로 자동 새로고침을 해주는 태그이다. 만약 궁금하다면 본인의 프로젝트에서 content부분에 시간을 지정해주고(3초면 3) url부분에 이동하고자 하는 페이지 URL을 작성해주면 된다.
<meta http-equiv="refresh" content="시간; url = URL">
사실 블로그에 쓰면서 3초 뒤 네이버로 이동하게 내용을 작성했는데
킹받게 자꾸 네이버로 이동해버려서 각자의 개발툴에서 써보면 좋을 거 같다...
암튼 특정 시간이 지나면 자동으로 페이지를 이동하는데 사용하면 정말 좋을 태그라고 생각한다.
4. progress
위를 보면 뭔가 게이지를 나타내주는 바 같은게 보일거다. 사실 해당 기능은 부트캠프에서도 가끔 사용은 해봤는데 나중에 내가 정리한 글을 보면서 사용하면 편할 거 같아서 들고 왔다. 그리고 뭔가 귀엽지 않나...?
암튼 코드로 보면 다음과 같다.
<meter value="10" min="0" max="100" low="20" high="65" optimum="15"></meter> <meter value="50" min="0" max="100" low="20" high="65" optimum="15"></meter> <meter value="90" min="0" max="100" low="20" high="65" optimum="15"></meter>
- value는 내가 막대에서 지정해주는 게이지 값
- min은 value 최소값, max는 value 최대 값
- low, high, optimum은 value에 따른 색상 변화 값
나중에 게임처럼 HP/MP 등 이런 거 만들어 보면서 한번 사용해봐야겠다.
오늘 정리한 내용은 이렇게 끝이다. 나는 HTML은 그냥 내가 웹 개발을 하면서 그냥 적당히 알면 되는 거 그 이상, 그 이하도 아니라고 생각했다. 근데 자꾸 신기한걸 보면 깊게 공부하면 많은 도움이 되겠구나 싶은 생각이 든다. 그래서 1년 넘게 방치되었던 내 블로그의 html 내용들을 가끔씩이라도 이렇게 정리를 해봐야겠다. 끝!
