[HTML] 01. HTML란? 그리고 기분 문법

Front-End/HTML

[HTML] 01. HTML란? 그리고 기분 문법

Bigone17 2021. 10. 31. 16:44

🟡 1. HTML이 먼데?

HTML이란 (HyperText Markup Language)의 약자로서 웹페이지의 내용과 구조를 표현하는 마크업 언어입니다. 이게 먼소리야 😧 개발을 시작한 지 근 7년 정도(학교 포함..) 됐는데, 도큐먼트나 MDN에서 설명해주는 말은 무슨 말인지 도통 모르겠다...

내가 생각하는 HTML은 쉽게 생각해서 건물의 뼈대라고 생각한다.

사진과 같이 아파트나 건물을 짓기 위해서는 뼈대(철골)를 먼저 세워서 틀을 만들어준다. HTML도 마찬가지로 웹페이지를 제작하는 과정에서 뼈대이자 틀을 만들어주는 언어이다. 그럼 마크업언어가 뭐지? 마크업 언어란, 태그 등을 이용하여 문서나 데이터의 구조를 표기하는 언어이다.

<HTML>
</HTML>

<></> 이러한 모양을 태그라고 한다. 그리고 태그는 항상 시작태그(start tag), 종료 태그(end tag)로 한쌍을 이룬다. 태그와 태그 사이에 원하는 콘텐츠를 넣으면 된다. 물론 어떤 태그냐에 따라 콘텐츠가 안 들어갈 수 도 있다. 그건 뒤에 가서 자세하게 다뤄보자.

정리하자면, HTML은 태그라는 것을 이용해서 웹 어플이케이션(웹사이트)의 뼈대를 구축하는 언어이다.

🟡 2. HTML5 기본문법

- HTML5는 2014년 10월 29일에 확정된 웹 표준이고, HTML에서 여러 가지 기능이 추가되고 보완된 버전이다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML WORLD!</title>
	</head>
	<body>
		<h1>Hello HTML World!</h1>
		<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaaFHevmzfOFkQUgWJmkG_kHKFmGtoQPG35w&usqp=CAU" alt="오징어게임"/>
	</body>
</html>

- HTML5는 <!DOCTYPE html>태그를 쓰는 것으로 시작이 된다. <html></html>가 제일 바깥 테두리이다. 그리고 그 안에 <head>, <body> 태그들이 html태그 안에 작성이 된다.

- head태그 안에는 title, 메타데이터의 설정 등을 넣을 수 있다. head부분은 title이 외에 요소들은 브라우저에 표현되지 않는다. (정확히 따진다면 빨간 부분만 head 영역이라고 할 수는 없다. 직관적으로 보기 위해서 저렇게 표시함.)

- body태그 안에는 우리가 눈으로 볼 수 있는 버트, 검색 입력창, 사진 등의 요소를 넣는 부분이다.

- HTML 파일을 만드는 방법은 메모장에 위에 소스를 복사하여 붙인 후 저장을 할 때 파일 확장자에다가 .html로 저장하면 된다. 하지만 앞으로 개발을 계속할 거라면 Editor를 사용하는 것을 적극 추천한다. (더보기를 누르면 에디터 종류가 나옴)

◾ VSCODE(Visual Studio Code)

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

◾ WebStorm

WebStorm: The Smartest JavaScript IDE, by JetBrains

WebStorm, our IDE for JS and related technologies, makes the development experience more enjoyable by automating routine work and helping with complex tasks.

www.jetbrains.com

◾ Brackets

A modern, open source code editor that understands web design

Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.

brackets.io

이외에도 여러 가지 종류가 있지만, 개인적으로 vscode를 추천한다. 설치방법이나 사용법은 구글에 검색하면 자세하고 쉽게 설명해놓은 글이 많으니까 참고해서 설치하면 된다.

🟡 2-1. 태그(Tag)

- 태그란, 위에서 설명했듯이 <a> 이런 식으로 생긴 것을 태그라고 한다. '<'와 '>'로 묶인 명령어라고 생각하면 된다.

- 태그의 종류
* 시작 태그 : <a>, <head>, <body> 등
* 종료 태그 : </a>, </head>, <body> 등
* 빈 태그(empty tag) : <br/>, <img/>, <hr/> 등
-> 원래 태그는 시작태그-종료 태그가 한 쌍을 이루어야 하지만, 시작태그와 종료태그 사이에 콘텐츠(내용)를 넣을 게 없거나 특수한 경우에 빈 태그를 사용할 수 있다.

- 시작 태그는 속성(attribute)와 값(value)를 가질 수 있다.
ex) <a href="https://www.naver.com"> a라는 시작태그 안에 href라는 '속성'과 https://www.naver.com라는 값을 가진 것을 볼 수 있다. a태그는 클릭을 할 수 있는 태그이다(하이퍼링크라고 생각하면 편하다) 그리고 href는 주소라는 속성이고 그 속성의 값이 네이버 홈페이지인 것이다. 결국 저 a태그를 클릭하면 네이버 홈페이지로 이동하는 것이다. 말이 이 길어졌는데, 결국 시작 태그에는 속성과 값을 가질 수 있다.

🟡 2-2. 콘텐츠(Content)

- 콘텐츠란 시작 태그와 종료 태그 사이에 있는 내용이라고 생각하면 된다.
ex) <a href="https://www.naver.com">네이버홈페이지로 고고!</a> "네이버홈페이지로 고고!"가 콘텐츠이다.

🟡 2-3. 요소(Element)

- 시작 태그(속성, 값) + 콘텐츠 + 종료 태그의 한 묶음을 요소라고 부른다.

출처 : https://nonipc.com/entry/%EC%9A%94%EC%86%8Celement%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

- 빈 요소(Empty element or Self-Closing element) : 빈 태그(<br/>, <img/> 등)는 빈 요소라고 부르기도 한다. 속성은 가질 수 있다.
ex) <meta charset="utf-8">

- 빈 요소의 종류 : br, hr, img, input, link, meta (자세한 설명은 후편에서 이어서 하는 걸로..)

🟡 2-4. 요소의 중첩

- 요소는 다른 요소를 포함할 수 있다. 즉 요소 안에 다른 요소를 넣을 수 있다는 것이다.

<body>
	<a href="https://www.naver.com">네이버 홈페이지 가즈아!</a>
</body>

위 코드에서 <body> 요소 안에 <a>~~ 요소가 포함이 돼있는 것을 볼 수 있다. 이럴 때, 요소 간의 부자관계가 형성이 된다. 즉 <body> 요소는 <a> 요소의 부모가 된다.

🟡 3. 주석(Comments)

- 주석(Commnents)은 코드의 설명을 위해 사용되고, 브라우저 화면에는 표시되지 않는다.

<!-- 개발할 때 주석 잘 달아주세요! -->
<p>나는 컨텐츠!</p>

* 혼자 프로젝트를 하던, 회사에서 업무를 하던 주석은 꼼꼼히 잘 달아주세요! 그리고 남들이 주석만 읽었을 때 "아~ 이런 코드구나~"라고 알아들을 수 있도록 적어주면 선임 개발자들한테 사랑 듬뿍 받으실 거예요 ㅋㅋㅋㅋ

긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽은 신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90

저작자표시