WEB/html.css

네이버 html 구현하기 _ 01. HTML/CSS란 ?

SOo • 2022. 11. 21. 18:05

들어가기에 앞서, 먼저 html과 css가 무엇인지 정의부터 하도록 하겠다. 

 

간단히 말하자면 HTML은 구조적 설계 (Structure Design), CSS는 비주얼 디자인(Visual Design)이다. 

CSS (Cascading Style Sheets)는 HTML 태그 등의 장식, 크기, 색깔, 폰트 등을 지정한다. 즉,  HTML의 세부적인 내용을 멋나게 꾸며주는 역할이라고 보면 되겠다.

 

html이란 Hyper Text Markup Language의 약어다.

웹페이지를 만들기 위한 언어로 웹브라우저에서 동작하는 언어라고 이해하면 쉽다. 

 

HT - Hyper Text (문서와 문서가 링크로 연결되어 있고) 

M - Markup (태그로 이루어저 있는) 

L - Language (언어)

 

웹 페이지 (web page)는 개개의 문서를 가르킨다.

.gif, .jpg, .pdf, .doc의 확장자 포맷이 있듯이, html의 문서는 파일의 확장자가 html 혹은 htm으로 끝난다. 

이 html 문서는 단순한 텍스트 파일에 불과하고 웹 브라우저가 해석을 하여 렌더링을 하게 되고 사용자는 view라는 스크린을 통해 접하게 된다. 

 

 

 

html의 기본 구조다. 

 

<!DOCTYPE html>
<html> 
	<head>
    	<title> HTML 문서의 제목입니다. </title>
    </head>
    <body>
    	<h1>제목 크기 1입니다.</h1>
        <h2>제목 크기 2입니다.</h2>
        <p>단락 부분입니다.</p>
    </body>
</html>

 

 

<!DOCTYPE html> : 현재 문서가 html5 문서임을 명시

<html> : html 문서의 루트 요소를 정의

html tag 영역에 head tag와 body tag가 포함

[head lang = "ko"] : 언어 지정 가능 

 

<head> : 문서를 설명하는 태그

웹 브라우저가 해석해야 할 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일 (CSS) 같은 웹페이지의 보이지 않는 정보를 작성하는 범위

ex) <title>, <style>,<meta>,<link>,<script>,<base> 태그 등 

cf) <meta charset = "utf-8"> 태그는 html 파일의 인코딩을 알려주는 태그이다. 

쉽게 말해 브라우저에게 text를 어떻게 그릴지 컴퓨터에게 알려주는 태그

utf - 8은 유니코드다. 

 

<body> : 문서의 내용을 담는 태그

사용자 화면을 통해 보여지는 로고, 헤드, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조작성

 

 

CSS는 HTML로 만들어진 문서를 꾸며주는 역할을 담당한다.

이를 이용해 일종의 웹페이지의 일관성있는 서식을 만들 수 있다. 서식의 디자인을 유지보수하기 편하다는 장점을 가지고 있다. 

 

 

 

 

올해가 가기전에 HTML  / CSS 다 끝내겠다 .. ! 화이팅 

글쓰는데 생각보다 오래 걸리네 .. 😂