[ HTML + CSS ] 재미있는 HTML 태그
https://www.w3schools.com/html/default.asp
HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위 사이트를 보고 재밌어보이는 태그들을 따로 정리한다. 이미 잘 알려진 태그 및 속성들은 다루지 않는다. 지극히 주관적인 기준으로(내맘대로) 골랐다.
<a>
<a href="url" target="_blank" title="info">텍스트</a>
target="_blank" : 새로운 창에 url이 열린다.
title="info" : 마우스가 포커싱되면 설명창이 뜬다. 아래 예제에서 링크에 마우스 커서를 올려보면 무슨 말인지 알 것이다.
<style>
a:link - 한 번도 방문하지 않은 상태
a:visited - 한 번 이상 방문한 상태
a:hover - 마우스 커서가 위로 올라갈때
a:activate - 마우스 왼쪽 버튼을 클릭한 상태
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
<map>
<img src="이미지 위치" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" onclick="comFunction()">
</map>
이 기능을 쓸 일이 있을까 싶지만... 그래도 재밌는 기능이라 가져와봤다. 기본적인 문법은 위와 같다. 이미지 태그와 짝을 이루며, map 태그는 이미지 태그의 usemap 속성값으로 접근 가능하다. <map>은 여러개의 <area>로 이루어져 있는데 각 area는 사진에서 특정 구역을 말한다. 구역 지정은 coords 속성으로 가능하다. 아래 그림은 위 예시 코드의 coords 값들을 나타낸 것이다. 아래 그림에서 검은색 박스가 <area>의 면적이 된다. 여기에 onclick 기능을 넣어주면 재미있는 현상이 발생한다. 아래 예제에서 다루니깐 확인해보기를..
shape의 종류 및 coords 형식은 아래와 같다.
- rect - 직사각형 모양. coords = (윈쪽위 x좌표, 왼쪽위 y좌표, 오른쪽아래 x좌표, 오른쪽아래 y좌표)
- circle - 원 모양. coords = (원중심 x좌표, 원중심 y좌표, 반지름 크기)
- poly - 점 집합. coords = (점1 x좌표, 점1 y좌표, 점2 x좌표, 점2 y좌표, ... , 점n x좌표, 점n y좌표)
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
그림에서 노트북, 커피, 폰을 클릭해보자. 각각 다른 경고창이 뜰 것이다. 정말 재밌는 기능이다.
<fabicon>
<link rel="icon" type="image/x-icon" href="아이콘 경로">
favicon은 title 왼쪽에 위치한 작은 이미지를 말한다(아래 그림 참고). 넣어봤자 별로 티도 안나겠지만 용어 정도는 알면 나중에 도움이 될 것 같아서 넣어봤다. <head> 안에 들어간다. <body> 넣지 않도록 조심!
<table>
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
기본적인 형태는 위와 같다. 아래는 각 태그별 설명이다
- <table> - 표의 테두리
- <tr> - 행
- <th> - 열(볼드체), h는 heading이라는 뜻.
- <td> - 열(일반)
추가 속성 및 설명
- border-collapse: collapse; - 셀 하나하나의 테두리를 없애고 싶을때.
- colspan="n" - 셀을 열로 병합. n개의 셀을 병합한다는 뜻.
- rowspan="n" - 셀을 행으로 병합. n개의 셀을 병합한다는 뜻.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
추가적인 표 스타일링은 여기를 참고하자.
<form>
폼 태그는 아주 많이 사용하지만 매우 중요한 내용이므로 자세하게 정리한다. 이 글에서 가장 중요한 내용이고, 가장 자세하게 다룰 것이다. 폼 태그가 중요한 이유는 서버와 상호작용하는 태그이기 때문이다. 클라이언트가 폼을 작성하고 제출하면 그 데이터가 서버로 보내진는데, 이를 'request'라고 한다. 서버에서 처리가 다 끝나면 클라이언트에게 그 결과를 알려주는데, 이를 'response'라고 한다.
폼 태그는 크게 세 파트로 나뉜다. 하나씩 살펴보자.
1. Form Attributes
1) action
폼을 제출했을때 데이터를 어디로 보낼지 결정하는 속성이다. 보통 서버 사이드 스크립트를 여기에 적어준다. 형식은 아래와 같다.
<form action="/action_page.php">
2) target
reponse 결과를 어디에다 표시할지 결정하는 속성이다. 디폴트는 "_self"이며 이는 현재 창에 결과를 표시한다는 뜻이다. <a> 태그의 target 속성과 완벽하게 일치한다. "_blank"를 쓰면 새로운 창에 response 결과가 뜬다. 형식은 아래와 같다.
<form action="/action_page.php" target="_blank">
3) method
폼 제출시 어떤 HTTP 메소드를 사용할지 결정하는 속성이다. 거의 get 또는 post를 쓴다. 형식은 아래와 같다.
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
2. Form Elements
<label>, <input>, <select>, <textarea>, <datalist>
폼 형식을 결정하는 요소로 위의 태그들이 어떻게 생겼는지 간단하게만 알아보자. 참고로 폼의 action 속성에는 임의의 서버 사이드 스크립트를 넣을던데, 실제로는 존재하지 않으므로 제출을 하면 오류가 날 것이다.
1) <label>
라벨은 다른 Form Elements와 같이 쓰이는 요소다. 이 태그의 기능은 두 가지가 있는데 첫번째는 말 그대로 라벨 역할을 해준다. 폼에 대한 설명 꼬리표 정도로 생각하면 된다. 두번째 기능은 사용 편의성이다. 이게 무슨 말이냐 하면 <label>의 for 속성값과 과 다른 Form 요소의 id 속성값을 일치시키면 라벨과 폼이 연동된다. 이렇게 연동되면 라벨을 클릭하면 폼을 클릭한 효과를 볼 수 있다. 아래에서 체크박스 말고 라벨을 클릭해보고 차이를 직접 느껴보자.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
2) <input>
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
3) <select>
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
4) <textarea>
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
5) <datalist>
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
3. Input Types
text, password, checkbox, radio, date, email, file, hidden, number
말그대로 입력값 형식을 결정하는 요소다. 위에 있는 것들만 한번 보자. 다른 타입도 많다. 폼에 값을 직접 입력해보면 미묘한 차이를 알 수 있을 것이다.
1) text, password
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
2) checkbox (중복 선택 가능)
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
3) radio (중복 선택 불가)
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
3) date
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
4) email
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
5) file
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
6) hidden
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
hidden은 사용자에게 표시되지 않으면서 서버에게 데이터를 전송하고자 할 때 사용하는 타입이다. 표시되는 화면을 보면 hidden 타입의 내용은 나와있지 않고 있다.
7) number
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
<vedio>
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
비디오를 간단하게 삽입할 수 있는 태그다. 추가 속성 설명은 아래와 같다.
<video width="320" height="240" autoplay> -- 자동실행
<video width="320" height="240" autoplay muted> -- 자동실행 + 음소거
오디오 및 유튜브도 비슷한 문법으로 삽입 가능하다.
글이 좀 길어져서 여기까지 하도록 하겠다!!