HTML & CSS 기본 - html 이란?
1. HTML이 무엇인가요?
HTML : Hyper Text(웹) Markup(활자) Language(언어) == 웹을 만들어내는 마크업 언어
웹 사이트는 곧 웹 문서 라고도 불린다. 그 중에서도 다른 사람들이 모두 접근 가능한 문서이다.
HTML은 이러한 문서를 만들기 위한 언어이며, 웹을 구성하는 가장 작은 단위이다.
하지만 요즘에는 문서가 아닌 것을 만들기 위해서도 사용되기도 한다. (웹 어플리케이션, 또는 웹 앱이 있다.)
웹 사이트와 웹 어플리케이션의 차이가 뭐냐면,
웹 사이트는 " 주로 정보 제공" 용이고,
웹 어플리케이션은 "주로 사용자가 작업을 수행할 수 있게" 한다.
쉽게 예를 들자면, 뉴스, 등 정보를 제공하는 페이지는 웹 사이트고, 메일을 보내고, 수업을 등록하고 하는 등의 동작을 하는 것은 웹 어플리케이션이라고 볼 수 있다.
Markup 이란?
마크업이란 "문서 처리를 지원하기 위해 문서에 추가되는 정보" 이다.
그리고 마크업 언어(Markup Language)는 "마크업 정보를 표현하는 언어"이다.
보통 "< >" 요거 한 쌍을 Markup이라고 부른다.
음 예를 들어 내가 일기를 쓸 때, 이렇게 그냥 문서로 썼다면,
좋은 날 오늘 기분이 좋다. 날씨가 좋기 때문이다. 쿠헤헤 |
위의 글을
<제목>좋은 날 </제목> <내용>오늘 기분이 좋다.</내용> <내용>날씨가 좋기 때문이다.</내용> <내용>쿠헤헤 </내용> |
요렇게 부가적인 정보를 표현해 나타내 준 것이 마크업된 문서라고 볼 수 있다.
**대충 눈치 챘겠지만 < ~ > 는 여는태그, < ~ /> 는 닫는태그이다!
이제 본론으로 들어가서 HTML을 작성하기 위한 단계를 밟아보자.
HTML문서를 작성하려면 먼저, 우리가 작성하는 문서가 HTML 이라고 선언을 해주어야 한다.
<!DOCTYPE html>
: 우리가 작성하는 문서가 HTML이라고 선언을 해주면서, HTML의 버전을 정해주는 코드이다.
이 코드를 입력하면 우리는 최신버전의 HTML을 쓰고있다는 의미이다.
그 아래에 html 요소를 입력해 주어야 한다.
모든 HTML 문서에는 하나의 html 요소가 나와야 한다.
<html> </html>
html요소는 head, body 요소의 부모요소 (parent element)가 된다.
(반대로 head, body는 html요소의 자식요소 (child element)가 되겠져?!!)
** 이 parent 요소, child 요소의 개념은 중요하니 꼭 알아두도록 합시당
즉,
<!DOCTYPE html> <html> <head> </head> <body> </body> </html> |
이런 형식으로 이루어진다.
그럼 이제 head와 body에 대해 설명하겠다.
<head> </head>
먼저, head 요소는 body 요소와 마찬가지로 html 요소의 자식요소(child element)이다.
head 요소 안에는 밑의 코드 순서대로
<head>
<meta charset = "utf-8">
<! -- 1. 문서의 문자 set을 지정하는 정보, -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<! -- 2. 모바일에서 화면이 깨지지 않게 도와주는 정보, -->
<title> 제목 </title>
<! -- 3. 문서의 제목을 나타내는 정보, -->
<link rel="stylesheet" href="style.css">
<! -- 4. css를 연결해주는 정보 -->
</head>
이런 정보 등등이 들어가게 된다.
여기에서 meta 요소는 무엇일까?
meta 요소는 head 요소의 자식요소(child element) 이다.
브라우저에 정보를 제공하는 요소이고, 닫는 요소가 없다. (</meta>는 필요가 없다.)
** 닫는 요소가 없는 요소들이 몇개 있는데, 걔네들은 여는 태그와 닫는 태그 사이에 값이 들어가지 않아도 될 때 그렇게 쓴다. 뭐 닫는 태그 넣어도 상관은 없당
첫 번째로 나온 <meta charset = "utf-8"> 를 보면,
그러면 meta가 브라우저가 알아야 하는 문자 set을 지정해 주고 있다는 것을 알 수 있다.
여기에서 utf-8은 한글이 깨지지 않게 도와주는 역할을 한다.
두 번째, <meta name="viewport" content="width=device-width, initial-scale=1">를 보자.
viewport는 "이 화면에 최적화되어 있으니까 이 화면대로 보여줘!" 라고 말해주는 것이다.
쉽게는, 모바일에서 화면이 깨지지 않게 도와주는 역할을 한다고 보면 된다.
이 viewport 가 보여주는 화면은 브라우저가 가용 가능한 공간(쉽게는 가용공간)이다.
음 예를 들자면, 페이스북 앱을 보면 위에 header가 있고 밑에 footer가 있는데, 걔네를 뺀 뷰가 가용공간이다.
이 viewport 는 웹 뷰가 있기 때문에 디게 중요하다. 이게 있어야 폰에서도 예쁘게 볼 수 있다.
다들 아시겠지만(?) width는 보여지는 너비의 값이다.
width = device-width, initial-scale = 1이라고 기본 지정이 되어 있는데, 이건 건들지 않는게 좋다.
만약 이렇게 설정을 해주지 않으면 원래 기본 default width 값은 970이다.
initial-scale은 기본 확대 수준이다.
세 번째, <title> 제목 </title> 을 보자.
title이니까 title요소 안에 들어가는 내용은 당연히 제목이다.
이 제목 안에는 언어이면 다 들어갈 수 있고, 이모찌
도 들어갈 수 있따!
마 지막으로, <link rel="stylesheet" href="style.css"> 이게 있다.
이 코드는 웹사이트를 예쁘게 만들어주는 css와 연결을 해준다.
우리가 흔히 아는 link는 뭐 누르면 어디 가고 이러는 링크지만
웹에서 link 는 "연결"을 뜻한다.
css와 연결을 해준다는 것이지!!! 후후후
여기까지 하면 head가 끝났다.
<body> </body>
두번째로 body요소에 대해 설명하겠다.
앞서 말했듯이, body요소는 head요소와 마찬가지로 html요소의 자식요소(child element)이다.
body 요소 안에는 user들에게 보여줄 것들이 들어가게 된다.
유저가 보는 모든 요소들이 body 요소에 들어가게 되는 것이다.
그럼 안에 들어가는 것들을 막 넣어도 될까?
당연히 안된당!!
모든 프로그래밍 언어에는 규칙이 있듯이 여기에서도 그 규칙을 따라주어야 한다.
마크업 언어의 규칙에 따라 작성해 준다.
여기에서 markup의 역할은, 위에 언급했듯이 여기에 작성된 텍스트가, 이미지가, 콘텐츠가 어떤 것인지 브라우저에 알려주는 역할을 한다.
다시 위에 쓴 나의 일기를 마크업 언어로 제대로 바꾸어 보자면,
<heading>좋은 날 </heading> <paragraph>오늘 기분이 좋다.</paragraph> <paragraph>날씨가 좋기 때문이다.</paragraph> <paragraph>쿠헤헤 </paragraph> |
이 정도가 되겠다.
제목을 Heading이라고 하고,
문장을 Paragraph로 표현한다.
제목에는 점점 작아지는 순서대로 (<h1> ~ .. <h6>) 이 있고,
문장은 <p>로 표현한다.
간단히
<h1>안뇽? 난 제목이야</h1>
<p> 안뇽 나는 문장이야 </p> |
이렇게 표현하면 되겠다
이제 바디도 끝났당!!
그럼 html 간단(?) 설명 이제 끝~~~!!! 하하
'Programming > HTML & CSS' 카테고리의 다른 글
| CSS Animation - Rotate(빙글빙글 돌기) (0) | 2021.04.06 |
|---|---|
| 원하는 곳에 스크롤 넣기 (0) | 2021.03.04 |
| [CSS] em과 rem의 차이 (0) | 2020.08.06 |
| HTML & CSS - 2. CSS 기본 (0) | 2018.04.19 |
댓글