[HTML/CSS]01.HTML 구조 태그

Posted by ArteLog RATTLE
2017.04.26 20:18 IT/HTML&CSS

 오늘부터 웹 퍼블리싱[Web Publishing]에 대해서 연재하듯이 포스팅할건데요. 제가 웹퍼블리싱을 배우고 나서 블로그나 카페 등을 만들 때 너무나 많은 도움이 되어서 이렇게 공유하려고 마음 먹었습니다. 물론 웹 퍼블리싱은 웹페이지를 만들 때 보여지는 부분을 설계하는 언어인데요. 예외적으로 네이버 블로그 프롤로그나 티스토리 스킨, 네이버 카페 대문 등 국한적으로 html과 css를 이용하여 홈페이지처럼 만들 수 있습니다. 웹페이지는 전세계 인터넷만 된다면 누구나 접할 수 있는 공간이기 때문에 그만큼 부가가치도 높다고 평가됩니다. 폭넓게 javascript와 jQuery까지 자유자재로 할 수 있다면 웹퍼블리싱 분야는 어느정도 마스터 됐다고 봐도 과언이 아닙니다. 제 꿈은 이 블로그를 통해 티스토리 블로그 스킨 무료 배포에 큰 도움이 되고 싶고, 자체 홈페이지, 제가 운영하는 사업 홈페이지까지 만드는 것입니다. 약 2년정도 걸릴 것으로 예상되지만 더 빨리 만들었으면 합니다. 여러분도 도움을 주세요!

· HTML은 무엇인가?


 HTML은 간략하게 설명드리자면, Hyper Text Markup Language의 약자로서 Web 브라우저에 의해서 디스플레이 될 수 있는 페이지를 정의하는데 사용하는 언로 단순한 텍스트 기반의 언어입니다. 예를들면 인테리어를 한다고 가정했을 때 인테리어 스케치→3D Max 작업&2D Cad작업이 웹에서는 포토샵, 일러스트레이터, 인디자인 등의 프로그램으로 웹디자인이라고 정의한다면, 실제로 인테리어 작업이 웹개발 프로그램(이를테면 비쥬얼스튜디오 2013 for web, 드림위버)으로 컴퓨터 언어로서 꾸며주는 작업입니다. 가령 인테리어에서도 필수적인 보이지 않는 배관, 전기 등은 웹 개발이 관장합니다. 


인테리어와 웹의 비교하여 쉽게 알아보자!


· 인테리어 스케치 → 웹 디자인 스케치

· 2D CAD 또는 3D Max 로 구체적인 인테리어 디자인 작업 → 포토샵 or 일러스트레이터 or 인디자인으로 구체적인 웹 디자인 작업[웹디자인]

· 인테리어 도배, 가구, 배치, 타일 등 작업 →  HTML, CSS, javascript, jquery 작업[웹퍼블리싱]  


 제가 인테리어에 대해서 전문적인 지식은 없지만 웹퍼블리싱을 정의하는데에는 도움이 될 것입니다.



· HTML의 구조태그란?


  HTML에도 코딩하기 위해서 큰 틀이 존재합니다. 


<html>

<head>

<title>사이트명</title>

</head>

<body>



</body>

</html>



 위 자료는 html의 구조태그입니다. 티스토리 스킨도 이와같은 형식으로 되어있습니다. 한번 실습을 해볼까요? 메모장을 열어줍니다.




  메모장을 열어 html 구조 태그를 적어줍니다. 다 작성한 후 '저장'을 해줍니다.

  위 파일을 보면 질서정연하게 일정한 간격으로 띄어쓰기가 되어 있는데 이는 Space bar(스페이스바)로 띄어쓰기가 아니라 Tab(탭)으로 띄어써진 것입니다.




  '저장' 단축기, [Ctrl + s]를 누르면 다음과 같이 뜨는데, 파일이름(N)에 'index.html'로 저장해줍니다. 특히 .html 파일명으로 저장해야 웹에서 뜰 수 있습니다. 그리고 index라는 파일 이름으로 저장하는데 서버에 올릴 제목은 무조건 "영어"로 저장하여 업로드하셔야됩니다. 다음 인코딩(E)은 '유니코드'라고 설정해주시고 '저장(S)'를 클릭하여 저장하면 끝입니다. 저장된 파일을 더블클릭하여 파일을 열어봅니다.




 ▲ 클릭하여 파일을 열어보면 다음과 같이 뜨는데, <title></title> 태그 안에 '사이트명'이라고 작성했었는데 보시는 바와 같이 자신의 웹페이지 타이틀 영역에 표시된 것을 알 수 있습니다. 그리고 <body></body> 태그 안에 작성된 "Artelog blog에 오신 것을 환영합니다."이 표시됩니다. body 태그는 실제 웹페이지를 구성하는 정보를 입력하는 곳이라는 것을 알 수 있습니다. 


구조태그를 정리해보면,

   

· <html>…</html> : 모든 html 파일은 <html>로 시작하여 </html>로 끝나야합니다. 이것은 웹브라우저에게 이 태그들 사이의 텍스트를 html소스파일로 취급하라는 것을 지정하게 됩니다.

· <head>…</head> : <html>태그의 바로 뒤에 위치하게되는데요. 웹페이지 내용을 나타내는 간단한 텍스트를 포함시킵니다.

· <title>…</title> : 검색 엔진에게 웹 페이지의 제목과 관련된 정보를 정의하는 태그입니다. 쉽게 말해 웹페이지 제목인 샘이죠. 주의해야할 점은 title태그는 반드시 <head>…</head>태그 사이에만 위치할 수 있습니다.

· <body>…</body> : 실제 웹페이지를 구성하는 정보를 입력하는 공간입니다. <head>태그 바로 뒤에 위치합니다. 


 

 이상 오늘 포스팅은 마치고요. 생각보다 포스팅이 오래걸리네요. 장기간 프로젝트가 될 것 같습니다. 감사합니다:)



사진 flickr

'IT > HTML&CSS' 카테고리의 다른 글

[HTML/CSS]03.글자 태그 Vol.2  (0) 2017.04.30
[HTML/CSS]02.글자 태그 Vol.1  (0) 2017.04.29
[HTML/CSS]01.HTML 구조 태그  (0) 2017.04.26
이 댓글을 비밀 댓글로