HTML:집의 구조
CSS: 인테리어
javascript: 집의 기능
오늘은 HTML에 대해서 배웠다.
HTML의 구조는
<html>
<head>
</head>
<body>
</body>
</html>의 구조를 갖는다.
- HTML5(5는 버전) 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정한다. (!+엔터로 구현 가능)
- 실제적인 HTML문서는 2번째행부터 시작되며 <html></html>사이에 작성한다.
-<head></head>사이에는 <body>태그의 정보를 읽어들이기 위한 정보가 존재한다.(제목, 저장 방식, 브라우저의 크기 등등)
-웹 브라우저에 출력되는 모든 요소는 <body>와 </body> 사이에 위치한다.
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요! HTML5</p>
</body>
</html>
● <head>태그
- 메타 데이터(데이터를 위한 데이터)를 포함하기 위한 태그
- 웹 페이지에서 유일하게 존재함
- HTML 문서의 title, style, link, script, meta 에 대한 데이터로 화면에 표시되지 않음
( title: HTML 문서의 제목, style: HTML 문서의 Style 정보 정의, link: 외부 리소스와의 연결 정보를 정의(CSS파일 연계에 사용), script: Javascript를 정의, meta: 페이지 설명, 키워드, 저자, 화면 크기 등의 정보, 주로 브라우저 또는 검색 엔진에서 사용)
● <body>태그
- HTML 문서의 내용을 담는 태그
- 웹페이지를 구성하는 대부분의 요소가 body 태그 내에 기술
HTML 기본문법
● HTML 기본문법- 1. 요소(Element)
<p>My cat is very grumpy</p>여기서
<p>: opening tag
</p>:closing tag
My cat is very grumpy: content
모두:element
- HTML요소(Element)는 시작 태그(opening tag)와 종료 태그(closing tag)그리고 태그 사이에 위치한 내용(content)로 구성됨
● HTML 기본문법- 2. 중첩(Nested)
- <html></html>은 웹페이지를 구성하는 모든 요소를 포함한다.
- 예시에서 <html>은 <head> 와 <body>를 포함하며, <head>는 <meta>와 <title>요소를
<body>요소는 <h1>,<p>를 포함한다.
- 중첩관계(부모 자식 관계)로 웹페이지의 구조를 표현한다.
● HTML 기본문법- 3. 빈 요소(Empty)
- 내용이 없는 요소 (가질수 없거나 필요 없는 경우)
- 빈 요소는 내용이 없으며, 속성만 소유한다.
- <meta>가 빈요소이다.(검색 키워드 설명, 저자 등의 데이터를 설정)
- <br>,<hr>,<img>,<input>,<link>,<meta> 등이 빈 요소 이다.
- 다만 안정 성을 위해 <태그/>이렇게 '/'를 '>' 전에 써준다.
● HTML 기본문법- 4. 속성(Attribute)
- <태그 속성="값">내용</태그> 에서 속성="값" 부분으로 구현한다.
- 속성이란 요소의 성질, 특징을 정의한다.
- 속성은 요소에 추가적 정보 (예를 들어 이미지일 경우 파일의 경로, 크기 등)를 제공 한다.
● HTML 기본문법- 5. 주석(Comments)
- 주석은 개발자에게 코드를 설명하기 위해 사용한다.
- 브라우저는 주석을 화면에 표기하지 않는다.
오늘은 html 기본 문법에 대해서 배울 수 있었다.
python만 사용해보다가 html에 대해서 배우니
다양한 태그가 존재하고 주석 방법도 다르다는 것이 색다르게 다가왔다.
기초부터 하나씩 올려서 견고한 성이 되고 싶다.
'프론트앤드 > HTML' 카테고리의 다른 글
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-06 | HTML table (0) | 2023.03.03 |
|---|---|
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-05 | HTML 실습2 (0) | 2023.03.03 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-04 | HTML Form 태그 (0) | 2023.03.03 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-03 | HTML 실습1 (0) | 2023.03.03 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-02 | HTML tag의 종류 (0) | 2023.03.03 |