본문 바로가기

여러가지 정보/HTML CSS 와 블로그

HTML CSS 기초부터 배우기 2 (홈페이지 제작, 블로그 꾸미기 )

반응형

래 블로그는  Web 과 Log 의 줄임말로, 자신의 관심사를 자유롭게 서술하는 1인 미디어로 시작했습니다. 전문지식 없이 누구나 쉽게 시작할 수 있고, 평범하지만 필요한 정보들을 손쉽고 압축적으로 공유할수 있죠.  제 블로그는 이러한 본래 블로그의 목적에 맞게 양질의 정보를 공유하는데 목적이 있습니다 :)



 # 글, 사진 및 이미지 위용준# 

 #일부 이미지는 퍼왔음을 밝힙니다.#◀



▶ [이전 글]- HTML CSS 기초부터 배우기 1 ( 홈페이지 제작, 블로그 꾸미기 )


Html 공부에 앞서 먼저 큰 카테고리로 나눠 보겠다. 


HTML 공부 <1>


HTML 이란?


HTML5 대하여


HTML 구성


HTML 편집기


HTML 기본 용어


여기 까지가 기본적으로 HTML이 무엇인지 파악하는 단계 이라 할 수 있다.


HTML 공부 <2>


HTML 다양한 화면 구성 


HTML Form  ( 웹사용자의 입력과 관련된 )


HTML 그래픽


HTML 비디오


HTML API


HTML 예제


본격적으로 수많은 HTML 각 태그의 응용과 문법을 배우는 단계이다. 


HTML 공부 <3>


HTML5


HTML 예제


HTML 참조


HTML 퀴즈


각 공부한 항목을 점검하는 단계이다 최신 버젼이자 현재 기준 버젼인 HTML5 의 지원조건과 새로운 기능, 전 버젼 (ex:HTML4) 에서 HTML5로 변경하는 방법등을 공부하고 많은 예제와 참조 자료, 퀴즈를 풀어보면서 전체적으로 공부를 완성하는 단계이다.


필자도 생초보나 마찬가지이기 때문에 공부하면서 내 나름대로 실시간으로 정리하며 적는것 이기 때문에 틀린점이 있을 수 있다. 만약 오류된 내용이 있다면 바로바로 태클을 걸어도 감사히 받아들이겠다. 


각 <2>, <3> 카테고리에 해당하는 세부 카테고리는 해당 내용을 공부할때 시작 직전에 나누도록 하겠다.




HTML 이란?


HTML은 웹 페이지를 제작할때 사용하는 표준 마크업 언어이다. 응?? 그렇다면 마크업 언어가 뭘까


마크업 언어란 배치, 표현등에 대한 정보를 표현하는 언어이다. 쉽게 말하면 어떤 문서가 있을시 그 안에 들어있는 글 자체 내용이 아닌 띄어쓰기, 대문자, 여백등에 대한 정보를 문자로 표현한것.


예로 ( HTML 배우기 쉽다. ) 라는 글이 있다면 HTML 다음에 "띄어 쓰기 한칸" 배우기.. 여기서 "띄어 쓰기 한칸"이란 정보를 언어로 표현한것.


HTML5 ?


HTML5는 2012년도에 나온 HTML 언어의 최신이자 현재 표준으로 사용되는 html 버젼을 말한다. 자세한 내용은 후에 다루자


HTML 구성


HTML의 구성을 도식화 해서 그려 보겠다.


 

0. <!Doctype html> 이 마크업 언어 문서 타입이 html임을 선언하는 html5 태그이다. 


선언 태그는 html4, xhtml 등 html 버젼에 따라 다르다. 나중에 자세하게 다루도록 하자. 


여기서 태그란 예로 <p>~</p>라 되어있다면 <p> 부터 </p> 까지를 전부 태그라 하며 보통 태그는 쌍으로 이루어져 있으며 <p>는 시작태그 </p>는 종료 태그라 한다 <br>처럼 시작 태그만 존재하는 예외적인 것도 있다.


1. <html></html>  html 문서는 <html>로 시작하고 </html>로 끝난다.

2. <head></head> <head>와</head>사이는 이 웹 문서의 정보를 나타낸다.

3. <title></title> <title>와</title>사이는 해당 웹 문서의 최상위 제목에 대해 나타낸다.

4 <body></body> 이 사이는 본문에 대한 내용을 나타낸다.

5. <h></h> 본문에서 단락 제목에 관해 나타내는 태그이다. <h1>부터 <h6>까지 6가지가 있으며 각각 크기가 다르다.

6. <p></p> 파라그래프 즉 단락의 내용을 나타내는 태그이다.


태그와 태그 사이에 들어가는 내용을 요소, 엘리먼트 컨텐츠(element contents)라 한다.




결국 우리가 배우는것은 언어이기 때문에 정확한 문법과 다양한 태그 (단어!?) 등을 익히고 숙달하는게 포인트라 할 수 있겠다.


[html / css 공부 관련 카테고리 Link]


반응형