지금까지 참 다양하고 기본적인 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를 이용하여 반복적으로 연습할 필요가 있다고 생각한다.
앵커태그란 서로 다른 웹페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 주로 사용되는 태그이다. 태그명(Tag Name)은 a로 표기되며 앵커태그라고 불린다. 여기서 a만 삽입한다고해서 앵커태그의 기능이 발효되는 것은 아니다. 여기서 웹(Web)상 작동이 가능하게 하려면 href라는 속성을 사용하여 이동하고자 하는 웹 페이지를 별도로 지정해주어야 정상적으로 작동하게된다. 따라서 예를들어보자면 아래와같이 예시작을 들어볼 수 있다. 이렇게 코드를 실행한 후 a 태그를 클릭하게되면 지정한 웹 페이지로 이동하게 되는 원리이다. 하지만 웹 표준을 지키면서 이동하지 않는 a 태그를 새로 만들때에는 href속성에 #를 입력해주어야하고 예시는 아래와 동등하다.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1 id="logout">Logout</h1>
<p>Duis nec risus a ante pellentesque.</p>
<h1 id="source">Source</h1>
<nullam prota, felis sit amet porttitor vestibulum.</p>
</body>
예를들어 페이지 내부에서 이동한다는 원리는 아래와 같이 짜여질수 있다. 이러한 방식은 기본적으로 일반 웹사이트에서 많이 사용되어지고 있다. 특히, 아래에 id속성이 중복이되면 먼저 나오는 태그로 이동하게되는 형식이다. 이에 따라서 또 개발을 하는데 꼭 필요한 부분은 글자형태태그를 사용하여 글자에 형태와 의미를 부여할 수 있다는 부분이다. 일단 먼저 설명하기에 앞서 여럿 태그가 있어 정리를 해보려한다.
b/ 굵은글자태그, i/ 기울어진 글자태그, small/ 작은글자태그, sub/ 아래에 달라붙는 태그, sup/ 위에 달라붙는태그, ins/ 밑줄 글자태그, del/ 가운데 줄이 그어진 글자태그가 있다.
<body>
<h1><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></h1>
<h1><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></h1>
<h1><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small></h1>
<h1><sub>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sub></h1>
<h1><sup>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sup></h1>
<h1><ins>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ins></h1>
<h1><del>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</del></h1>
<hr />
루비문자(Ruby Text)
루비문자는 일본어에서 자주 사용되는 문자라고 한다. 태그는 총 3가지로 나뉘어지며, 아래와같이 정리해볼 수 있다.
위 이미지는 대표적인 코딩프로그램 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.
먼저 HTML5를 공부하기위해서는 기본적으로 가장 중요한 몇가지 요소 '태그Tag', '요소Element', '속성Attribute'이라는 용어를 알아야할 필요가있다고 생각한다. 그래서 저번에는 HTML로 웹사이트를 구축하기위해 VISUAL STUDIO CODE라는 프로그램을 설치하였다면 한발 더 나아가 가장 중요하고 필수로 알아야할 용어들을 정리해보려한다. 여기서 먼저 알아야할 태그Tag와 요소Element의 정의에대해서 먼저 간단히 설명하려한다. 기본적으로 코딩에서 태그는 HTML 페이지에서 객체를 만들때 기본적으로 사용한다는 점이고 태그를 사용해 만들어진 객체를 요소라고 부른다. 예를들어 아래와같이 가장 기초적인 태그의 속성을 조금 더 자세하게 소개하려한다. 특히 HTML은 웹 브라우저의 형태로 웹 페이지를 컨트롤하다보니 사실상 이부분이 이해가없다면 전반적인 웹 제어가 불가능하다고생각한다. HTML5페이지는 사용자에게 보이는 뷰와 사용자에게 보이지않는 코드로 나눈다는 부분은 확실히 인지하고 있어야할 필요가있다.
<h1>Website HTML5</h1>
:여기서 <h1>는 시작태그를 의미하며 </h1>는 끝태그를 의미한다. 이런식으로 시작태그와 끝태그를 별도로 입력하는 요소이다. 하지만 이러한 경우도 있다. 시작태그와 끝태그를 함께 입력하는 요소이다. 이렇게 단독으로 사용하는 태그는 HTML5 표기법과 XHTML5표기법을 사용해 입력해야한다.
<br> <br/>
:첫번째 내용과 약간 다른 표기법이다. 여기에서는 <br>과 <br/>은 HTML5표기법이다. 사실상 어떠한 표기법이던 크게 상관은 없지만 대다수의 개발자들은 XHTML5표기법을 더 선호하기 마련이다. 아, 특히 아래 예시같은 경우는 article태그 내부에 h1태그와 p태그를 삽입한 형태라고 보면된다. 여기서 "일부 태그는 태그내부에 다른 태그를 넣을 수 있습니다"라는 말은 "태그 내부에 다른 태그를 넣지 못할 수도 있다"라는 의미와 같으므로 다시한번 확인해야할 필요가있다.
<article>
<h1>Article Header</h1>
<p>Hello this is daniel.</p>
</article>
다음으로는 속성에대해 한번 알아볼것이다. 코딩에서는 태그에 추가 정보를 제공할때 속성을 사용하게된다. 여기서 속성이라함은 아래와같은 예시를 뜻한다. h1태그에 title 속성을 부여하는 간단한 코드이다.
<h1 title(속성이름)="header(속성값)">Hello HTML5</h1>
<img src(속성이름)="image.png(속성값)"/>
여기서 src속성을 사용해 어떠한 이미지를 출력할지 관련된 정보를 제공하게되고 따라서 img태그는 그림으로 만들 때 사용하는 속성이다.
다음으로 살펴볼 것은 주석이라는 것이다. 사실상 기본적인 프로그램이아닌 규모가 커지는 상황에서는 직접 작성한 코드도 어떤 목적으로 작성했는지 확인하기가 쉽지만은않다. 그래서 먼저 어떠한 기능을 수행하는 코드인지 설명할 수 있는 방법도 필요하다. 여기서 중요한 것은 프로그래밍 언어에서는 프로그램의 실행에 어떠한 영향을 미치지않고 설명을 위한 목적으로 사용하는 코드를 바로 주석이라고 부른다. 사실상 주석이있으므로써 더욱 더 편하고 수월하게 작업을 할 수 있다는것이다. 예를들면 아래와같이 기본코딩틀로 정리해볼수 있다.
