지금까지 참 다양하고 기본적인 html의 기본태그를 알아보았다. 하지만, 정말 기본적인 태그만으로는 웹자체를 구축하기에는 참으로 많은 어려움이 있을 것이다. 오로지 지금까지 알아본 기본적인 태그를 이용하여 조금 더 응용을 해야 더 멋진 웹사이트가 완성된다고 보면 되는 것이다. 그래서 이번에 정리해볼 내용들은 기본적으로 우리가 인터넷을 할때 로그인하거나 회원가입할때 필요한 부분을 만들어보려한다. 이러한 부분은 보통 개발에있어서 프론트앤드에서 작업하게 되며, 처음으로 다루어볼 내용은 입력 양식 태그라는 것이다. 여기서 입력양식은 사용자에게 입력받는 공간을 의미한다고 보면된다. 정말 가장 대표적인 예로 회원가입 양식을 들어볼 수 있다. 사실상 조금 더 덧붙여서 이야기하자면 입력 양식을 제대로 다루기위해서는 서버와 관련된 모든 기술을 알아야할 필요가있다. 하지만 그러한 영역은 고급적인 영역이라는 부분에있어서 추후에 다시 생각해보려한다. 따라서 먼저 입력양식의 기본/개요에 대해서 알아보려한다. 먼저 나는 form태그를 먼저 설명해볼 것이다. 입력양식은 아래와 동일하게 적용된다고 보면된다.
<body>
<form>
</form>
</body>
여기서 입력양식 안에는 input 태그를 입력하게된다. 하므로 input을 적용하여 간단한 입력양식을 정리해보면 이러하다.
<body>
<form>
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
사실상 이렇게 기본적인 틀만 가지고는 완성본을 직접 확인할 수가 없다. 그리하여 입력양식에 테이터를 입력하고 쿼리 전송버튼을 눌러야만 데이터가 지정된 장소에 지정된방법으로 전달된다고 보면된다. 그러므로 여기에 아래와 같은 태그를 사용하면된다. <action> 전달위치를 지정하게되고 <method> 전달방식을 전달하게되는 특징을 가지고있다. 하지만 여기서 이렇게 간단한 의미만가지고는 사실상 헷갈릴수밖에 없는부분이다. 도대체 데이터가 어디로 어떻게 또는 어떠한 방식으로 전달되는지가 궁금할 수밖에없는 부분인데 예를들면 방금 전에도 언급했다시피 회원가입할때의 양식을 생각해볼 수 있다. 먼저 개인정보를 입력하게되는데 그 후에 회원가입버튼을 누르게되면 서버로 정보가 전달되는데 그냥 단도직입적으로 정리하면 정말 간단하다. "정보는 form태그에 지정된 action속성의 장소/위치로 method속성에 적힌 방식으로 전달되는 원리"이다. 여기서 자주 사용되는 method 속성은 GET/ POST로 나뉠 수 있다고 보면된다.
GET요청은 아래와같이 정리해볼 수 있다.
<body>
<form method="get">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
POST요청은 GET요청과 비슷하게 단어 하나만 바뀐다고 보면된다.
<body>
<form method="post">
<input type="text" name="search">
<input type="submit" />
</form>
</body>
이렇게 하면 도대체 어떠한결과가 일어날까하고 궁금할 수밖에없을 것이다. 변경된 내용은 rint데이터를 입력했기에 http://localhost:포트번호/폴더이름/파일이름?search=hint형태로 URL이 변경되었을 것이다. GET의 방식은 주소에 데이터를 입력해서 보내는 방식으로 정리할 수 있다. 하지만 POST방식은 주소가 변경되지않는다. 앞서 설명했던 GET의 방식과는 달리 비밀스럽게 데이터를 전달하는 방식을 의미한다.
결론적으로 주소에 데이터를 입력해서 전달했다는 이야기는 GET방식을 적용했다는 의미이다. 이에 이어 기본 input태그를 정리해보려한다. 앞서 언급했던 내용과는 다르게 input태그는 사용자에게 정보를 입력받은 기능을 수행하는 태그라고 보면된다. 즉 간단하게 풀이해보면 사용자에게 글자를 입력받는 것은 물론이고 비밀번호와 파일을 입력받을 수도있다는 부분이다. 기본 input태그가 적용된 간단한 틀도 아래와같이 곁들어볼 수있다.
<body>
<form>
<input type="text" name="name" /><br />
<input type="password" name="password" /><br />
<input type="file" name="file" /><br />
<input type="submit" />
</form>
</body>
여기서 input태그들의 종류를 간단하게 정리해보려한다. <button>태그: 버튼을 생성/ <checkbox>태그: 체크박스 생성/ <file>태그: 파일입력양식 생성/ <hidden>태그: 보이지않음/ <image>태그: 이미지형태 생성/ <password>태그: 비밀번호 입력양식 생성/ <radio>태그: 라디오버튼 생성/ <reset>태그: 초기화버튼 생성/ <submit>태그: 제출버튼 생성/ <text>태그: 글자입력양식 생성이다. 일단 이번 편에는 여기까지 간단하게 내용을 정리해보았다. 이전에 기본태그에이어 조금 더 응용하여 여기까지 응용할 수 있다면 당연히 좋을 수도있겠지만, 사실상 한번에 습득하기에는 조금 어려운 부분이있을 수 있기때문에 꾸준히 VISUAL STUDIO CODE를 이용하여 반복적으로 연습할 필요가 있다고 생각한다.
지금까지 다양한 웹(Web)상에서 접한부분이 있을거라고 생각합니다. 혹시나 테이블 태그라고 들어보셨는지 모르겠습니다만 보통 표 형식의 문서를 만들 때 사용하게되는 태그이다. 과거에는 사실 테이블 태그를 사용하여 레이아웃(Layout)도 구성하곤 하였는데 반면에 요즘 현대에는 웹 페이지 대부분은 <div>태그를 사용하여 사용빈도가 극도로 높습니다. 테이블 태그의 기본을 먼저 간략하게 공유하자면, 거의 모든 대부분의 데이터중에 표 형식으로 된 자료들은 테이블 태그를 사용합니다. 예를들면 아래와같이 만들어 볼 수 있다.
<body>
<table>
</table>
</body>
일단 기본적으로 뼈대를 만들어놓았다만 여기서 <table></table>태그사이에 실제로 무슨 내용이들어갈지 지정되지않았다. 그 안에 넣을 수 있는 태그는 사실상 다양하지만 실질적으로 실무에서 혹은 웹상에서 많이 쓰이는 태그를 정리 및 나열해본다. tr/ 표 내부의 행 태그, th/ 표 내부의 제목 셀 태그, td/ 행 내부의 일반 셀 태그를 의미한다. 하지만 이렇게 그냥 단순히 보고 암기하는 것 보다는 조금 더 세부적으로 알면 조금 더 정확한 의미를 이해할 수 있어 좋다. 먼저 tr태그는 table row를 의미하고, th태그는 table header, td태그는 table data를 의미한다. 전체적인 의미를 알고 아무래도 주기적으로 연습해보는 것이 백만번 유용할 것같다고 생각하는 부분이다. 그렇게하여 조금 더 응용하여 태그를 만들어보자면 아래와 동일하다.
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
</body>
이렇게 만들어볼 수 있다. 물론 처음이라면 어렵고 복잡할 수 있는 부분인데 앞전에 HTML5에 필요한 기본적인 태그를 숙지하였다면 이번에 새로 등장한 태그를 알고 원리를 알면 조금 더 확실하게 알 수있는 부분이다. 특히나 코드에 보면 table border이라는 부분은 표의 테두리 두께를 지정해주는 부분이다. 게다가 여기서 조금 더 응용하자면 rowspan과 colspan을 추가로 들어볼 수 있다. rowspan은 셀의 높이를 지정하는 태그이고 colspan은 셀의 너비를 지정하는 태그이다. 앞전에 span이라는 태그를 들어본 적이있을지도 모른다. 하지만 앞에 col 또는 row를 붙이면 이와같은 태그가 만들어진다. 여기서 조금 더 응용하면 더 다양한 표의 형식을 만들어볼 수 있을것인데 그 부분은 추후 다시한번 연습해보도록 할 예정이다. 그리고 다음으로 또 보게되었던 내용은 이미지 태그이다.
이미지 태그
사실상 지금까지 쭉 확인해본 내용들은 너무 기본적인 태그들이다. 이러한 기본적인 태그들로는 사실 조금 익히기에 복잡할 수 있고 한번에 숙지하기가 어려운 부분도 있을것이라고 생각한다. 그래서 이번에는 비주얼적으로 조금 달리보이는 이미지 태그를 설명하고자한다. 이미지태그는 img라는 태그를 사용한다. 하지만 단순히 그냥 img라는 태그만 넣는다면 아무런 변화가 없지않을까라고 자연스럽게 생각해보게된다. 정답은 맞다. 일단 img라는 속성을 넣기에는 아래와 같이 기본적인 뼈대를 만들어준다. 물론 당연히 <body>및 중간 내용에 들어가기에 이 영역 안에 넣어보겠다.
<body>
<img />
</body>
여기서 이미지를 넣게되는 방법은 img태그와 연관성있는 속성이다. 무수히 많은 속성이 있지만, 이번에는 4가지 속성을 넣어보려한다. <src>, <alt>, <width>, <height> 이렇게 4가지이다. 먼저 <src>는 이미지의 경로를 지정해주는 역할을 한다. 다음으로 <alt>는 이미지가 없을 때 나오는 글자를 지정해주고, <width>는 이미지의 너비지정, <height> 이미지의 높이를 지정해주는 역할을 한다. 하지만 요즘 현대시대에는 스타일시트를 사용해 입력하는 것이 기본적이므로 width와 height의 속성은 잘 사용하지않습니다. 예를들어 img 태그의 속성에 관한 뼈대를 만들어보겠습니다. 그리고 다음으로 이어질 내용은 오디오 태그입니다.
<body>
<img src="iris.jpg" alt="홍채" with="200" />
<img src="nothing" alt="그림이 존재하지 않습니다." width="500" />
</body>
오디오 태그
오디오 태그는 사실상 일반적으로 너무 많이 쓰이는 부분이라 추가적으로 정리해볼 필요는 딱히 없을것으로 보입니다. 대체적으로 대부분의 많은 사람들은 인터넷을 통하여 웹 브라우저에서 음악을 재생하고 듣곤하는데, 이를 재생할 수 있게 만들어주는 태그가 오디오 태그입니다. 이는 img태그와 사용방법이 매우 비슷하므로 정말 쉽게 사용할 수 있을 것입니다. 우선 일단 mp3파일을 준비해주고 아래와같이 기본 태그를 만들어봅니다.
<body>
<audio></audio>
</body>
여기서도 위에서 언급했던 img태그와 마찬가지로 오디오 태그도 입력은 먼저 하긴했지만 어떠한 음악을 어떤 방식으로 재생하게할지 정해지지 않았습니다. 여기서 또 한가지 짚고 넘어가야할 부분은 이전과 마찬가지로 몇가지 관련 속성입니다. <src>, <preload>, <autoplay>, <loop>, <controls> 이렇게 곱아볼 수 있는데 하나씩 태그를 간략하게 풀이해보면 이렇습니다. <src>는 음악파일의 경로를 지정, <preload>는 음악을 재생하기 전에 모두 불러올지 지정, <autoplay> 음악을 자동으로 재생할지 지정, <loop> 음악을 반복할지 지정, <controls> 음악 재생도구를 출력할지 지정해주는 부분입니다. 사실상 이 모든 부분은 음악을 재생할때 모두 다 사용되는 부분이기때문에 반드시 알아야할 필요가 있다고 생각한다. 예제로 아래와같이 만들어볼 수 있다. 이렇게 코드를 만들어 실행을 하면 직접 음악을 재생할 수 있다.
티스토리 애드센스 연동 후 광고설정을 하기위해 [광고설정]에 들어가보면 위에 4가지는 모두 ON으로 켤 수가 있는데 아래 2가지 목록상단과 목록하단은 설정이되지않는 어려움을 대부분 다 겪으실거라 생각한다. 그래서 이번에 공유해드릴 내용은 어떻게 이부분을 풀 수 있을까인데, 결국 html을 건드려야하는 부분일지도 모른다. 그래서 아래와같이 오류 해결방법을 풀어보려한다.
아마 아래 두가지 목록 상단과 목록 하단을 풀려고 시도할때 맞이하게 되는 메세지일 아래는 상단광고와 하단 광고 두가지 메세지를 다 받은 경우이다. 여기서 목록상.하단 치환자 : / 둘다 해당되는 부분인데 먼저 상단부터 설명을해보려한다. 먼저 코드를 복사를 해보려한다.
먼저 순서대로 한번 보겠다. 티스토리 설정에 들어가셔서 좌측에 보시면 꾸미기->[스킨편집]이라고 있는데 편집메뉴로 들어가서 우측에 [html편집]을 클릭해준다. 이렇게 복잡한 창이 하나 열리게 되는데 여기서 Ctrl+F를 눌러서 <s_list>를 검색해준다. 그렇게 나온 <s_list>아래 <div id="head">가 보이실건데 그 아래에 를 넣어야한다. 추후 나중에 수정할 일이 생길 수 있으므로 주석을 표기해준다. 저 같은 경우는 여기에 <!--목록상단광고 치환자 삽입-->과 마무리로<!--목록상단광고 치환자 삽입 끝-->이라고 표기를 하였다. 간단하게 정리를 하자면 이렇게 나와야한다.
<s_list>
<div id="head">
<!--목록상단광고 치환자 삽입-->
<!--목록상단광고 치환자 삽입 끝-->
<h2></h2>
</div>
그럼 다음으로는 이제 하단부에도 해결할필요가있다. 그래서 이와같이 넣어준다. 상단과 마찬가지로 Ctrl+F를 누르고 이번에는 </s_paging>을 검색해준다. 그러면 바로 저기 보이시는 것처럼 나타날 것이다. 그 아래 을 넣어준다. 따라서 그 아래 저는 </article>도 하나 넣었다. 이렇게까지하면 치환자설정을 상.하단 둘다 넣어주었기 때문에 작동이될것이다. (아래이미지처럼 나오게된다.)
</s_paging>
<!--목록하단 치환자 삽입-->
<!--목록하단 치환자 삽입 끝-->
</article>
</div>
즉, 이러한 문제처럼 상단치환자가 없어 광고를 설정 할 수 없을 때에는 이와같이 html에서 치환자를 추가해주어야한다.
상단부: <s_list> 하단부: <s_paging> *Ctrl+F로 검색하여 그 아래 을 넣어 적용까지 하면 바로 [목록상단]과 [목록하단]에 적용이된다.
위 이미지는 대표적인 코딩프로그램 VISUAL STUDIO CODE에서 간략하게 기본 HTML 포멧을 구성해보았다. 여기서 보시면 우선 첫 번째 줄의 <!doctype html> 태그는 웹 브라우저가 현제 웹 페이지가 HTML5문서임을 인식하게 만들어주는 역할을 한다. 반드시 W3C의 HTML5 명세에따르면 모든 HTML5 문서는 반드시 <!doctype html>태그를 표기해야한다. 그냥 단순 표기한다고 모든것이 해결되는게 아니고 문서의 가장 첫 문단에 위치해주어야한다.
그리고 두번째 줄의 HTML태그는 모든 HTML 페이지의 루트요소이다. 일단 처음에 <!doctype html>로 큰 틀을 잡았다면 전체적인 언어가 어떻게 다른 웹사이트에의해서 검색되고 인식하기 알아야하기때문에 반드시 <html>이라는 태그와 함께 Language의 약자인 Lang="ko">로 표기해주어야한다. 여기서 미리 알고 넘어가야할 부분은 언어표기 부분이다. 다만, 여기서 착각하실수도 있는 부분이있다면, 아 언어를 <html>라는 태그와 함께 표기를 한게 웹사이트에서 언어가 어떻게 보이는지라고 생각하시는 분들도 있을 수 있지만 아래와같이 참고해야할 필요가있다. 이는 구글(Google)과 같은 검색엔진이 웹 페이지를 탐색할 때 해당 웹페이지가 어떠한 언어로 만들어져 있는지 쉽게 인식하게 만드는 구조라고 보시면된다. 따라서 언어속성은 아래와같이 이렇게 정리된다고 보시면 됩니다.
html의 언어코드
한국: ko
일본: ja
중국: zh
미국: en
러시아: ru
독일어: de
출처:ⓒCopyright, Unsplash
html 태그tag를 활용한 기본적인 사용법과 예시
다음으로는 <head>태그 내부에 넣을 수 있는 태그가 별도로 있어서 정리해보려한다. 이를 적용하는 방법은 아래와 같이 정리해볼수가 있다. 일단 표기하고자 하는 모든 정보는 <head>와 </head>사이에 들어가야한다. 그 안에 제목을 웹사이트 제목을 넣으려고한다. 제목이다보니 <title>이라는 태그를 넣어볼 것이다. 마찬가지로 <title>의 시작이있으면 마치는 </title>이라는 태그도 있어야한다. 거기에 제목을 "I live in Seoul"로 넣어보려한다.
meta => 웹페이지에 추가정보를 전달한다.
title => 웹페이지의 제목을 의미한다.
script => 웹페이지에 스크립트를 추가한다.
link => 웹페이지에 다른파일을 추가한다.
style => 웹페이지에 스타일시트를 추가한다.
base => 웹페이지의 기본경로를 지정한다.
<head>
<title>I live in Seoul</title>
</head>
이렇게 간략하게 표기해볼 수 있다. 여기서 한가지 짚고 가야할 점은 title 태그의 경우 웹페이지 제목과 관련된 정보를 검색엔진에 전달하게 되므로 입력을 해야 검색시 엔진이 쉽게 찾아낼 수가 있어서 훨씬 유용하다는 것이다.
<글자태그 Tag>
다음으로는 글자태그에대해서 간략하게 설명하려한다. 글자태그는 웹 페이지에서 가장 많이 비중을 차지하는 태그이다. 정말 글자태그가 따로 설정되어있지 않는다면 아마 웹사이트를 들어갔을때 정말 복잡한 구조를 보실 수 있을 것이다. 모두가 동일한 글자(Text)로 구성되어있을 것이며 레이아웃/디자인(Layout/Design)적으로 봐도 구분하기 쉽지않을거라고 생각한다. 그리하여 글자태그를 이런식으로 정리해볼 수가 있다. 간략하게 풀이하면 글자폰트 크기를 의미한다. 글자 폰트 크기의 변수를 주기위해서는 반드시 이러한 태그가 삽입되어야한다. 여기서 h는 heading을 의미하며 구체적인 의미를 보면 크기와 우선순위를 나타내는 부분이다. 따라서 특히나 h1같은 경우에는 보통 큰 제목을 의미하고 h6는 작은제목을 의미하는 부분이다.
h1 =>첫번째로 큰 제목 글자 태그
h2 =>두번째로 큰 제목 글자 태그
h3 =>세번째로 큰 제목 글자 태그
h4 =>네번째로 큰 제목 글자 태그
h5 =>다섯번째로 큰 제목 글자 태그
h6 =>여섯번째로 큰 제목 글자 태그
<Example>
<!doctype html>
<html lang="ko">
<head>
<title>I live in Seoul</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>
다음으로는 본문태그에대해서 정리해보려한다. HTML5는 아래 예시와 같이 본문태그를 제공하곤 한다.
P => 본문 글자 태그
<!doctype html>
<html lang="ko">
<head>
<title>Seoul</title>
</head>
<body>
<h1>Explain about city</h1>
<p>There are so many huge buildings in Gangnam</p>
<p>People always live busy life everyday</p>
</body>
</html>
<body>안의 <h1>태그는 문단의 제목을 의미하며 아래 <p>태그는 첫번째 문단, 두번째 문단 이런식으로 생성되기 위함이다. 저는 이렇게 <p>를 두줄 입력했으므로 두 문단이 생성됨을 알 수 있다. <P>태그 이외에도 아래와같이 또 다른 본문 태그가 있다.
br => 줄바꿈 태그
hr => 수평줄 태그
<!doctype html>
<html lang="ko">
<head>
<title>Seoul</title>
</head>
<body>
<h1>Lorem ipsum</h1>
<h2>dolor sit amet</h2>
<hr />
<p>1Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<br />
<p>2Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<br />
<p>3Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
으로 할때, 아래와 같은 결과물을 만들어 냅니다.
Lorem ipsum
dolor sit amet
1Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3Lorem ipsum dolor sit amet, consectetur adipiscing elit.
