관심쟁이 영호
[HTML #2] 기본적인 흐름 및 구조 파악하기 본문
1. 먼저 개발 툴을 설치하여야 한다.
- VsCode
- InteliJ
- Spring Tool Suite
- eclipse
등등 많은 툴이 있다.
주인장은 STS인 Spring Tool Suite를 사용할 계획이다.
이유는 Spring이랑 엮을 예정이기 때문이다.
추천하자면 VsCode를 추천한다.
많은 사람들이 사용하더라.
(툴의 좋음, 안좋음을 판단하는 기준은 제공하는 기능이 많은지, 안많은지 차이다. 별 상관없다. 그냥 아무거나 설치하면 된다.)
알아서 설치하고 오자!
2. 먼저 html 문서에 대한 기본 개념을 잡자.
- html은 문서라고 생각하자.
- 흰 색의 웹페이지에 글자를 써내려가는 것이다.
- 흰 색의 웹페이지에는 여러가지의 구간이 있다.
크게 head, body로 나눌 수 있다. head는 윗 부분, body는 내용이 들어가있는 주요 부분이다.
- 그냥 영어로 쓰면 안된다. 그래서 컴퓨터에게 "여기가 head야"라고 말을 해주어야 한다.
방법은
<head> head에 포함할 내용 </head>
이렇게 표시한다. <>는 열림 태그, </>는 닫힘 태그를 말하는 것이고, head는 해당 부분이 태그라고 말해주는 것이다.
컴퓨터가 이렇게하면 인식한다.
각 태그 사이에 head에 표시할 내용을 표시한다.
- 이러한 느낌을 한국어로 써보겠다.
<여긴 html이야>
<head 여긴 head가 시작되는 부분이야>
@@@ <- head의 내용이야.
</head 여긴 head가 끝나는 부분이야.>
<body 여긴 body가 시작되는 부분이야>
@@@ <- 여긴 body의 내용이야
</body 여긴 body가 끝나는 부분이야.>
</html 끝이야>
이렇게 나타낼 수 있다.
그것을 코드로 살펴보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
이렇게 나타낼 수 있다.
코드에서 보이는 "meta charset", "title"은 무엇일까?
3. head와 body 기타 등등에는 옵션을 넣을 수 있다.
- meta charset은 컴퓨터에게 이런 문자체계를 사용하게 해줘! 라고 말하는 것이다.
이 말이 어려울 수 있다. 이해해보자.
어떤 파일을 열었을 때, 문자가 깨져서 @#!갉뀱★ㅁㅁㅁㅁㅁㅁㅁㅁ <- 이런식의 파일을 본 적 있을 것이다.
이유는, 파일은 영어로 작성되었지만 우리가 한글로 파일을 오픈해서 그럴 가능성이 높다!
다시말해서, 독일인에게 아랍어로 아무말을 하라하면 개판으로 부를 것이다.(아랍어를 모른다면)
대충 그런 뜻이다!
컴퓨터에게 euc-kr이라고하면 3개 국어하게 해줘!
컴퓨터에게 utf-8 이라고 하면 100개 국어하게 해줘!
라는 뜻이다.
모르겠으면 그냥 전부다 utf-8로 설정하자.
-> 심화: utf-8은 유니코드이다. 전세계의 문자코드를 3byte에 담아서 모든 문자를 표시할 수 있도록 한 프로토콜? 이다.
- title은 해당하는 파일이 웹페이지에서 열릴 때, 상단의 탭이나 하단의 메뉴바에 어떠한 이름을 설정하는 것이다.
head에 title, meta-charset 을 넣을 수 있듯이, body에도 넣을 수 있다.
그리고 우리가 모르는 태그와 모르는 옵션이 엄청 많다.
전부다 외우거나 배울 필요가 없다. 필요한 것만 배워두자.
나중에 찾아보면 되니까.
'Front-End > HTML' 카테고리의 다른 글
| [HTML #4] HTML 옵션값 ui, li, ol, br, (0) | 2021.04.28 |
|---|---|
| [HTML #3] 실제로 HTML 살펴보기 (0) | 2021.04.27 |
| [HTML #1] HTML 기초를 시작하자! (0) | 2021.04.25 |
| [HTML] div 태그 ㅣ div 관련 속성 (0) | 2021.04.10 |
