HTML 이란?
HTML (Hyper Text Markup Language) 는 가장 단순한 형태의 Web언어
웹서버에 HTML 문서를 저장하고 있다가 클라이언트가
특정 HTML페이지를 요청하면 HTML 문서를 클라이언트로 전송한다.
그러면 클라이언트는 이 Web페이지를 해석하여 Web브라우저에 표현해주는데
이런 Web페이지를 정적인 Web페이지라고 한다.
(정적인 페이지는 보안상 안전하나 변경에 많은 시간이 소요됨)
쉽게 말해서 웹페이지를 만들기 위한 언어 이며, 웹 브라우저 위에서 동작하는 언어 입니다.
HT - Hyper Text : 문서와 문서가 링크로 연결되어있다
M - Markup : 태그로 이루어져 있다
L - Language : 언어
* 태그란 정보를 정의하는 형식
HTML 설치 및 실습환경 구축
HTML언어를 text 파일로도 다룰 수 있지만, 에디터를 이용하여
자동완성 기능 등을 통해 html파일을 손 쉽게 다룰 수 있도록 하는것이 좋습니다.
그래서 우리는 지금부터 Atom 이라는 에디터를 설치해보도록 하겠습니다.
설치링크:https://atom.io/
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
해당 링크에서 [Download] 를 클릭해줍니다.
설치하고 실행하면 아래와 같은 화면이 나오는데 빨간색으로 체크한 부분은 모두 off하여 비활성화 해주세요.
작업할 디렉터리 (파일)을 정해야 하기 때문에 바탕화면이나 C드라이브에 폴더를 만들어
File > Open Folder 를 선택합니다.
(단축키: Ctrl+Shift+O)
폴더를 생성해주었다면 좌측에 Project 목록이 나타나게 됩니다.
Project 폴더에 마우스 우클릭 하여, New File을 선택해줍니다.
선택하고 그 파일이름은 1.html 로 생성해보겠습니다.
이후 1.html 이라는 에디터에 "hello word" 라고 작성하고 저장해볼텐데요.
저장 단축키는 File > Save 를 통해서 저장하실 수 있습니다.
(단축키:Ctrl+S)
이제 에디터에서 작성한 hello word 를 웹브라우저를 통해 열어보도록 하겠습니다.
Chrome이나 Explorer 아무거나 실행해도 좋습니다.
(단축키:Ctrl+O)
위와 같은 결과로 코딩된 내용을 볼 수 있으며
Atom에서 문자열을 추가로 넣으면 웹브라우저를 새로고침한 이후에 문자열이 바뀐 것을 확인할 수 있습니다.
Ex)
에디터에서 hello word 123 작성 후 F5(새로고침) 하면 위 화면에서도 hello word 123 이라고 보여짐.
참고)
웹브라우저의 domain (인터넷주소)를 이용하는 것은
"다른 컴퓨터의 html을 열어주세요-" 라는 요청으로 이해하시면 됩니다.
앞으로 드릴 기본 태그설명은 본인 컴퓨터 내에 있는 html 파일을 열게 될 것이므로
도메인을 사용할 필요는 없습니다.
HTML 태그의 형식
<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>
태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의
Ex)
<a href="http://abc.com">생활코딩</a> -------------------> 태그
<a href="http://abc.com">생활코딩</a> -------------------> 컨텐츠
<a href="http://abc.com">생활코딩</a> -------------------> 닫을때 / 넣기
<a href="http://abc.com">생활코딩</a> -------------------> 닫는 태그
<a href="http://abc.com"><u>생활코딩</u></a> -------------------> 가장 먼저 연 태그는 가장 늦게 닫아 마무리.
* 닫히는 태그 앞에는 ' / ' 가 붙습니다.
* 열리는 태그가 있으면 닫히는 태그가 있어야 합니다.
* 가장 먼전 연 태그를 가장 나중에 닫습니다.
(하지만 닫히는 태그가 없는 경우도 있습니다.)
HTML 의 기초 태그
<h1>
h1태그를 사용하는 것은 단순히 글씨폰트를 크게 만드는 것이 아닌
검색엔진에 제목의 의미를 부여하는데에 있습니다.
h는 heading의 약자로 h1부터 h6까지 존재하게 되며
h1이 가장 중요한 제목으로 글씨가 가장 크게 나타납니다.
Tip:코드를 위와 같이 정렬하면 가운데(center) 정렬(align)이 가능합니다.
<u>
u태그는 underline의 약자로 밑줄을 긋는 태그입니다.
<meta>
간혹 크롬에서는 정상작동한 코딩이 익스플로러 에서는 정상적으로 작동하지 못하는 경우가 있습니다.
이러한 문제가 발생하는 이유는 HTML문서를 UTF-8로 인코딩 했는데
익스플로러에서는 다른방식으로 디코딩 하기 때문입니다.
그렇기 때문에 반드시 HTML파일에 어떤 방식으로 인코딩 했는지 명시해주어야 합니다.
(유저가 크롬으로 사용할지, 익스플로러로 사용할지 모르기 때문에 이와같은 습관을 들이는 것이 좋습니다.)
때문에 우리는 HTML코드에 <meta charset="UTF-8"> 을 추가해서 코딩방식을 맞추어 줄 것 입니다.
하지만 Animals 에 대한 설명이 줄바꿈이 적용되지 않아 가독성이 많이 떨어지네요.
그래서 이제 우리는 지금부터 문단지정 및 줄바꿈 태그를 알아보도록 하겠습니다.
<p>
p 태그는 pragraph 의 약자로 문단을 지정하는 태그 입니다.
위 설명처럼 <p>태그를 사용함으로써 문단을 감싸주면 됩니다.
이제 이 HTML코딩이 실제 어떻게 출력되는지 확인해보겠습니다.
확실히 문단이 나뉘어지니 깔끔해보이긴 하지만 역시나 가독성은 떨어지네요.
<br>
br태그는 line breaker 의 약자 이며, 줄을 바꿔주는 태그 입니다.
위와 같이 br이 적용된 구간에서는 줄바꿈이 적용된 것을 확인할 수 있습니다.
오늘 설명드린 것 외에도 글의
볼드 효과를 주어 두껍게 표시해주는 <strong>
리스트로 목차를 생성해주는 <li>
li의 부모태그인 <ol> <ul>
하이퍼 링크를 삽입해주는 <a>
기초적인 태그들이 여러가지가 있지만
시간관계상 말을 이만 줄이도록 하겠습니다.
html은 web의 기본적인 뼈대가 되는 만큼 코딩의 기초 입니다.
이 html로 뼈대를 잡고, CSS로 옷을 입혀주고
javsScript, Jquery 를 이용해 기능들을 넣어주는 것 이죠.
이러한 기초적인 것들은 여러분의 코딩공부에 많은 도움이 될테니
기초부터 탄탄히 잡고, 조금 더 심화 된 과정으로 배워나가시길 바랍니다 :)
