2023.12.26 1번째 포스팅
- 학습 목표🔥
HTML의 구조와 문법에 대한 이해
HTML이란 무엇인가?
Hyper Text Markup Language의 약어로 웹페이지를 만들 때 사용하는 언어이며, 웹페이지의 구조를 설명한다.
HTML에서는 태그(tag)의 의미와 기능을 이해하는 것이 핵심이라는 생각이 들었다.
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">javascript></a></li>
</ol>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7T7r_oSp0SE?si=O-33SXKwaDy9PjiN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</p>
<p><a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target = "_blank" title = "html5">Hypertext Markup Language (HTML)</a> is the standard
markup
language for <strong>creating <u>web</u> pages</strong> and web applications. </p>
<img src="image1.jpg" width="100%">
</body>
</html>HTML 기초 문법은 위 코드의 이해로 충분할 것 같다.
Tag
-
head: 웹페이지에 대한 설명
-
title: 브라우저 탭에 표시되는 문서 제목
-
body: 웹 페이지에 표시되는 실제 내용
-
h1~h6: 제목의 수준(숫자가 작을수록 더 큰 제목을 의미)
-
a: 하이퍼링크
a태그는 연결할 주소(속성)을 필요로 한다. 따라서, 다음과 같이 사용한다.a태그에 대해 더 알아보자
<a href="연결할주소">텍스트</a> //텍스트를 이용 <a href="연결할주소" target = _blank title = "열린 창 제목">텍스트</a> //새 창을 띄워서 연결 -
ol과 li(부모-자식관계)
ol: ordered list
순서가 있는 리스트이다. 기본적으로 숫자로 번호가 매겨진다.
ul: unordered list
순서가 없는 리스트이다.
li: list item
리스트의 항목을 나타낸다.참고!! ol,ul과 li의 관계?
ol/ul 태그가 있다면 li 태그도 반드시 존재.
또한 li태그가 있다면 ol/ul 태그도 반드시 존재. -
image 또는 video를 삽입하고 싶다면?
<img src="image1.jpg" width="100%">
🌐Internet(서버 & 클라이언트)
HTML을 공부하면서 추가로 Internet에 대해서도 알게된 점이 있다.
먼저, 웹페이지를 열기 위해서는 웹 브라우저(Web browser)가 필요하다.
즉, 웹 브라우저와 웹 서버의 상호작용을 통해 인터넷을 여는 것이다.
우리는 이렇게 정보를 요청하는 웹 브라우저를 사용하는 컴퓨터를 client, 웹 브라우저에 정보를 제공하는 컴퓨터를 server이라고 부르는 것이다.
server의 일을 하기 위해서는?
방법1. 웹 호스팅을 이용
방법2. 자신의 컴퓨터에 직접 웹 서버를 설치(백엔드)
마치며...
Web 개발에 대한 공부를 시작했는데 내가 작업한 내용물들이 바로바로 눈에 보이니 상당히 재미있고 흥미로운 분야같다.
또한 일상생활에서 수없이 열고 닫는 웹 페이지들이 어떻게 작성됐는지에 관심을 가지게 되었다.
또한, 내가 만든 웹 페이지를 배포하기 위해서 얼른 백엔드 분야도 공부해보고 싶다.
🏃🏻 🏃🏻 🏃🏻 🏃🏻