먼저 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태그는 그림으로 만들 때 사용하는 속성이다.
다음으로 살펴볼 것은 주석이라는 것이다. 사실상 기본적인 프로그램이아닌 규모가 커지는 상황에서는 직접 작성한 코드도 어떤 목적으로 작성했는지 확인하기가 쉽지만은않다. 그래서 먼저 어떠한 기능을 수행하는 코드인지 설명할 수 있는 방법도 필요하다. 여기서 중요한 것은 프로그래밍 언어에서는 프로그램의 실행에 어떠한 영향을 미치지않고 설명을 위한 목적으로 사용하는 코드를 바로 주석이라고 부른다. 사실상 주석이있으므로써 더욱 더 편하고 수월하게 작업을 할 수 있다는것이다. 예를들면 아래와같이 기본코딩틀로 정리해볼수 있다.
마이크로소프트(Microsoft)가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기라고한다. 디버깅 지원과 Git 제어, 구문 강조 기능등이 포함되어있으며, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있고 깃 허브가 개발한 일렉트론 프레임워크를 기반으로 구동되는원리이다. 그러나 같은 일렉트론 기반의 편집기 아톰을 포크한 것은 아니며, 비쥬얼 스튜디오 온라인 에디터를 기반으로 개발된 시스템이다. 비쥬얼스튜디오코드 기능의 'Team Foundation Server'의 웹 서비스 버전이라고 생각하면된다. 이는 설치형 소프트웨어로 손쉽게 배포하고 한번에 관리할 수 있는도구로 지원되는 여러가지 데이터로 개발자들의 고생을 덜어주기위해 만들어진 프로그램으로 보아도된다. 사용시에는 누구나 무료로 사용이가능하나 무료서비스의 경우 개발자 계정 총 5개까지만 등록이가능하며 상업용이나 비상업용 두가지 제한없이 사용이 가능하다. 그래서 먼저 타 프로그램 외 더 유용하고 가볍게 사용할 수 있는 VISUAL STUDIO CODE(비쥬얼스튜디오코드) 프로그램을 먼저 설치하는 과정에 대하여 간략하게 소개해드리고자 한다.
먼저 구글/네이버 등 사용하시는 웹사이트 검색어에 VISUAL STUDIO CODE라고 검색해보시면 아래와 같이 나온다. 빨간화살표가 가르키는대로 먼저 클릭을 해주어야한다. 혹은 아래 바로 DOWNLOAD를 클릭해주셔도되는데, 순차적으로 설치하는 방법을 보여드리고자 별도로 정리해보았다.
다음으로는 좌측 파란색 박스에 DOWNLOAD FOR WINDOW를 클릭해야한다. (*macOS 사용하시는 분들은 반드시 macOS에 맞게 다운필수이다.) 일단 저는 윈도우를 사용하기때문에 윈도우용으로 다운로드 먼저 받아볼것이다. DOWNLOAD를 누르면 아래와 같이 나온다. MICROSOFT VISUAL STUDIO CODE(USER)설치. 여기에서 동의합니다에 체크를 해주시고 다음을 클릭을 누른다.
일단 저는 여기서 바탕화면에 바로가기를 만들어놓기위해 체크를 해두었다. 게다가 아래 혹시나하는 마음에 전체다 체크박스에 체크를 해두었다. 그리고 마찬가지로 다음을 클릭해주시면 된다. 그렇다면 방금 이전 체크박스에 체크를 해놓았던 부분을 토대로 내용이 확인이된다. 확인 후 이번에는 아래 하단에 설치 버튼을 클릭해주어야한다. 그러면 이제는 더 이상 체크박스에 체크할 필요가없다. 설치를 클릭하는 즉시 바로 자동으로 설치에 들어간다.
설치가 마치고나면 위와같이 VISUAL STUDIO CODE 설치마법사완료라는 창이뜨고 중간 부분에는 설치 후 바로 실행을 할지 안할지 체크를 해주면된다. 끝으로 아래 종료버튼을 클릭해주시면 VISUAL STUDIO CODE 설치방법은 모두 다 끝이나게된다. 아래는 간략하게 기본 베이스 코드를 연습해보았다. 다음편에는 조금더 자세한 내용들로 소개해드리고자한다. 이렇게 기본적으로 비쥬얼스튜디오코드(VISUAL STUDIO CODE)에 손쉽고 간편하게 HTML5, CSS, JAVA SCRIPT의 코드를 사용하여 웹을 개발하는데 사용할 수 있기때문에 어려운 부담을 내려놓을 수 있어 간편하고 좋다.
이번 포스팅에서는 기본적이면서 필수적으로 사용되어야할 html기본요소에 대하여 파헤쳐보려한다. 먼저 여기서 메타데이터는 스크립트나 각종 소프트웨어의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가지고있다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의 할 수도 있고, 해당하는 정보를 가진 다른파일로 링크 할 수도있다. 그러면 아래와 같이 html의 모든 요소에대하여 정리하고 나열해보려한다. 정말 많고 다양한 요소들로인해 전반적인 HTML5가 만들어지기때문에 웹 개발에있어서는 당연히 필요한 부분이라고 생각한다. 어떻게보면 웹 개발에있어 엄청나게 중요한 부분이라고 볼 수 있다.
HTML에 사용되어지는 태그
<abbr>: abbreviation의 약자로 사전적 의미는 '축약'이라는 의미를 가지고있다. 그래서 결국 <abbr>태그는 사전적의미 그대로 축약형을 나타낼 때 사용하는 요소라고 생각하면된다. 곧, <abbr>태그가 들어간 텍스트는 브라우저 해당 텍스트 밑에 ....이라는 표시가 나오게된다.
[Example]: <p>
<abbr title="By The Way">Btw</abbr>는 그런데 혹은 그나저나라는 의미로 사용된다.
<q>: Quotation의 약자로 사전적 의미는 '인용구, 인용'이라는 의미를 가지고있다. <q>태그는 한 줄짜리 짧은 인라인 인용문을 나타낼때 기본적으로 사용되며 ** 큰따옴표 혹은 더블인용마크(double quotation mark)가 적용되어 나타난다.
[Example]:<h1>IT story</h1>
<p>quote란?</p>
<q>
한줄짜리 짧은 인용문을 적을 때 사용하는 요소
</q> 들여쓰기가 적용되며 브라우저에 나타난다.
<cite>: citation의 줄임말로 사전적의미는 '인용구, 인용, 표창장' 이라는 의미를 가지고있다. 곧, <cite>태그는 창작물, 작품 등에 대한 참조를 나타낸다고 생각하면된다. 쉽게말하면 예를들어 작품의 제목을 나타낼때 사용하는 요소로 알고있으면 사용하는데있어 편리하다.
<link>: html <link>는 현재문서와 외부 리소스관계를 의미한다. 보통 <link>는 CSS와 연결할때 가장많이 사용하지만, 사이트에서도 일부 연결이 가능하며 여러가지로 쓰일 수 있다. 따라서 이는 위에 바로 언급했던 <head>와 </head>사이에 넣고 아래와같이 사용할 수 있다.
<meta>: html <meta> 에서는 base, link, script, style, title과같은 다른 메타관련요소로 나타낼 수 없는 metadata를 나타낸다. 이는 현재 페이지의 인코딩을 어떠한방식으로 출력할지 결정하는 태그이다 예를들면 아래와같이 사용될 수 있다.
<style>: html <style>은 문서나 문서일부에 대한 스타일 정보를 포함한다. 따라서 사용법은 <img src="이미지주소"> 이런식으로 표현될 수 있다.
[Example]: <body>
<img src="image/image.jpg" with"400">
</body>
<title>: html <title>는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 뜻한다.
[Example]: <!doctype html>
<html>
<head>
<title>TITLE HTML5</title>
</head>
</html>
다음으로는 구획루트에대하여 간략하게 요약해보려한다. html <body> 요소는 문서의 내용을 나타내는데 그 중에 한문서에 하나의 <body> 요소만 존재할 수 있다. 다음으로는 콘텐츠 구획이다. 먼저 콘텐츠 구획요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있다.
<address>: html <address>요소는 html요소의 사람, 단체, 조직등에대한 정보를 나타낸다.
[Example]: <footer>
<address>
Mapo-Gu, Seoul <br>
Tel:(010) 123-4567
</address>
</footer>
<article>: 문서나 페이지 어플 등 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
[Example]: <article><!--위젯-->
<h3>1월 1일 일정표</h3>
<h5>양호</h5>
</article>
<aside>:는 주요내용과 간접적으로만 연관된 부분을 나타내는데 이는 주로 사이드바 혹은 콜아웃박스로 표현하게된다.
[Example]: <article>
<aside>
"세상은 아름답다"
</aside>
</article>
<footer>: 가장 가까운 구획콘텐츠나 구획루트의 푸터를 나타내고 일반적으로 구획의 작성자, 저작권정보 등 내용을 담게된다.
[Example]: <html>
<body>
<footer>
</footer>
</body>
<h1>~<h6>: 총 6단계의 제목을 나타내며 여기서 <h1>이 가장 높고 <h6>가 가장 낮다고 보면된다.
[Example]: <h1>abcdefg</h1>
<h2>abcdefg</h2>
<main>: 주로 body의 주요콘텐츠를 나타낸다. 특히 <main>태그는 해당문서의 주 콘텐츠를 정의할 때 사용한다. 먼저 <main>요소의 콘텐츠는 중심되는 주제와 주요기능사이에 확장되는 콘텐츠로 구성되어야하며 이는 문서 전반에 반복되는 내용을 포함되서는 안된다. 특히 <main>요소는 <article>,<aside>,<header>,<nav>,<footer>요소의 요소가 되어서는 안된다.
<nav>: html<nav>요소는 현재페이지 또는 다른페이지로 잉크를 보여주는 구획을 한다. 조금 더 자세하게 풀이를 하면 즉 웹이라는 바다의 항해자를 위해, 길치를 퇴치하기위해 안내할 수 있는 네비게이션 링크(navigation links)태그이다. 이는 나침반처럼 HTML5버전이 출시되며 탄생하게되었다.
Example]: <html>
<body>
<nav>
<a href="#"> title </a>
<a href="#"> title </a>
</nav>
</body>
</html>
<section>: html<section>요소는 독립적인 구획을 나타내며 적합한 의미를 가질 요소가 없을 때 사용한다. 여기에 추가적으로 이미지와 멀티미디어 리소스를 조금 더 정리해보고자 한다. 특히, section 요소는 스타일을 적용하기위해 컨테이너 역할을 해서는 안된다. 예를들면 아래와 같이 정리해볼 수 있다.
[Exampe]: <!doctype html>
<html>
<body>
<section>
<h3>thankyou</h3>
<p>always thanks you</p>
</section>
</body>
</html>
<area>: 이미지의 핫스팟(Hotspot)의 영역을 정리하고 hyperlink를 추가할 수 있다. 다만, map요소 안에서만 사용가능하다.
<img>: 문서에 이미지를 넣을때 사용가능하다. 여기에는 src 태그는 필수이며 포함하고자하는 이미지의 경로를 지정한다. 따라서 아래와 동일하게 예를들어볼 수 있다. Alt특성은 필수는 아니지만, 이미지를 설명하기위한 태그이므로 접근성차원에서 매우유용한 태그이다. 게다가 이미지를 표시할 수 없는경우나 네트워크오류 등의 문제에도 이 속성의 값을 보여준다.
[Example]: <img class="thanks"
src="/media/images/thanks35.jpg"
alt="grape">
<map>: area요로와 함께 이미지 맵(클릭 가능한 링크영역)을 정의할 때 사용가능하다.
<track>: 미디어요소(audio, video)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간기반데이터)를 지정할 때 사용가능하다.
[Example]: <video>
<source src="URL" type="타입">
<track src="URL" kind="텍스트트랙종류">
</video>
<video>: 비디오 플레이백 지원하는 미디어 플레이어 문서에 삽입. 이렇게 간략하게 일부를 정리해보았다. 다음편에는 html에 관한 조금 더 구체적인 언어와 내용을 정리해보려한다. 이렇게 정리하면서 나 또한 한가지 한가지씩 더 깊고 다양하게 다시한번 정리해볼 수 있음에 감사함을 느낀다.
먼저 HTML(Hyper Text Markup Language)은 웹(Web)상에서 가장 심플한 형태로 이루어져있으며 대표적인 언어이다. 즉, 하이퍼텍스트 마크업 언어는 웹 페이지를 제작하기위한 지배적인 언어이기도하다. 게다가 html은 페이지 제작함에있어 제목, 목록, 카테고리 등 이러한 레이아웃체계 또는 구조적인 부분을 의미하는 것 뿐만이아니라 그 밖의 요소로 구조적 문서를 어떻게 조금 더 응용적으로 만들어 어 낼 수 있을지 방법들을 제공하기도한다. 웹 서버에 HTML문서를 저장하고 클라이언트가 특정 HTML 페이지를 요청하게되면 문서를 클라이언트로 전송한다. 그렇게되면 결국 클라이언트쪽에서는 웹 페이지를 해석하게되는데 결국 표현해해주는데 이러한 웹 페이지를 정적인 웹 페이지라고 한다. 그렇게하여 현대 웹 시장에서는 페이지 제작, 어플 그리고 기타 매개체를 제작하기위해서는 가장 기본중에 기본인 html로 만들어지곤 한다. 본래 템플릿에 정해져있는 포멧이외로 조금 더 응용된 템플릿을 자체적으로 만들고자하면 html은 무조건 다룰 줄 알아야 한다는 점이다. 그리하여 html은 무조건 다룰 수 있어야하는 부분이기때문에 그만큼 중요한 점임을 알고 html이 무엇인지 조금 더 자세하게 정의를 내보려한다.
HTML의 유래요약
먼저 약 20년 전으로 거슬러 올라가 1991년 말에 버너스리가 가장 최초로 인터넷 문서를 html 태그로 부르면서 html은 본격적으로 시작되었다. 처음에 약 20개의 요소를 기술하였고 html의 단순한 디자인이었다. 하지만 html에서 마크업이라는 중요한 요소가 있는데 이것은 문자기반 데이터형태와 문자참조와 엔티티 참조를 포함하는 몇 가지 핵심 구성요소로 이루어져있다.
여기서 <html>과 </html>사이의 문자는 웹 페이지를 보여준다. <body>와 </body>사이의 문자는 보여지는 페이지의 내용 그리고 <head>와 </head>사이의 문자는 웹 페이지를 표현하기위해 필요한 정보를 더 담고있는 것이다. <title>과 </title>사이의 문자는 웹 브라우저의 페이지 제목을 정의하는데 사용된다.) html요소의 일반적인 형태로는 <tag>보이는 내용</tag> 이렇게 종료되는 문자는 반드시 ("/")로 시작되야한다. 가장 좋은 예시를 들어보자면 이런 것이다.
<head> <title>제목</title> </head>
다음으로는, 단락 구획이다. 단락 구획을 간략하게 설명하면 새 줄(<br>),<br>와 <p>간의 차이점은 'br'은 페이지의 구조를 변경하지않는 줄 바꿈인 반면 'p'는 단락으로 페이지를 구분한다. 코딩 사이에 도움을 줄 수 있는 부분은 '주석사용'을 하는 것이다. 하지만 이는 웹 페이지에 표시되지 않는다. 이렇게 html의 간단한 정의와 내용요약은 주석사용까지 마치고 이어 다음 편 'html요소'에 관련된 내용들을 소개하도록하겠다.
예시1: <p>단락 1</p> <p>단락 2</p> 예시2: <code><p> A는 <br /> B를 <br /> 포함하는 <br /> 단락이다. </p></code>
인터넷의 출현과 HTML의 시작
이렇게 HTML기반으로 인터넷의 시작은 미국 국방성에서 시작되었다는 이야기가 많이 돌곤하였다. 사실상 소련에서 처음으로 인공위성을 발사하는데 성공하자 이에 미국은 위협을 느껴 새로운 기술을 연구하는 APPA (Advanced Research Projects Agency)부서를 창설하게 되었다. ARPA는 1969년 현재 웹의 ARPANET을 개발하게되었다. 여기서 ARPANET이란 원래 핵과 같은 공격에 대비하여 전체통신시스템에서 전반적으로 데이터를 안전하게 보관하고 전송할 수 있는 시스템이다.이렇게 네트워크와 군사용으로 나누어지게되고 ARPANET이 현재 전 세계의 모든 컴퓨터를 연결하고있는 통신망 및 인터넷으로 발전하게된다. 1989년 팀 버너스리(웹 개발자)는 인터넷 공간안에서 문서가 서로 공간제약없이 돌아다닐 수 있는 새로운 개념의 방법을 제안하게된다. 그것은 즉, 하이퍼링크(Hyperlink)라는 특수한 기능을 사용하여 문서와 문서가 손 쉽게 돌아다닐 수 있는 개념이다. 이렇게 HTML로인해 웹 브라우저는 출현하게되고 결국 곧 전 세계적으로 전쟁이 시작된다.
웹 브라우저의 출현
1993년 미국 일리노이 공과대학교의 연구기관 NCSA는 '모자이크'를 발표했다. 모자이크는 최초 그래픽 유저 인터페이스 웹 브라우저를 말한다. 웹 브라우저의 출현함에있어 이는 결국 넷스케이프 커뮤니케이션으로 이름이 변경되고 발표되었다. 1994년 넷스케이프는 정식버전을 발표하고 배포를 시작했다. 이 시기와 맞물려 마이크로소프트는 인터넷 익스플로러를 발표했다. 여기서 두 업체는 W3C 표준을 무시하고 다양한 기능을 추가해 웹 브라우저를 이기려고하였고 그렇게 오랜시간동안 서로간의 치열한 경쟁 끝에 1998년 아메리카온라인 America Online은 넷스케이프 커뮤니케이션을 인수하였다. 그렇게 결국은 넷스케이프는 마이크로소프트의 공격에 그만 이기지못하여 붕괴하고 말게되었다.
HTML5와 웹 브라우저가 만든 조합
오랜시간이 흘러 이렇게 서로간의 두 매개체가 만든 조합은 스마트시대가오면서 큰 빛을 발하게되었다. 대부분의 사람들이 알다시피 스마트폰시대가 출현하면서 정말 많은 운영체제가 등장하였다. 이러한현상은 스마트폰뿐만이 아니라 일반 테스크탑, 태플릿 등 급속도로 퍼지기 시작하였다. 그렇게 HTML5의 기반으로 앱, 웹 시장의 다양한 매개체들은 빠르게 발전하기 시작하였고 그로인해 공간제약없이 전세계적으로 웹의 전쟁은 시작되었다. 지금까지 많은 부분들이 발전되었지만 앞으로도 더 빠르게 많은기술들이 발전될 것이라고 생각한다.
