[동영상 자율학습]
● 1)HTML 소개
Hypertext Markup Language 이라고 한다.
웹 상에서 문서를 볼 수 있게 만들어졌다. 팀버너스리가 만들었다.
●2)HTML 문법 - 태그 - 1
●3)HTML 문법 - 태그 - 3
HTML의 핵심키워드
태그,시작태그,종료태그,내용,요소
태그란?
HTML은 태그의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙 !!
무언가를 표시하기 위한 꼬리표,이름표의 역할을 한다.
<h1>Hello, HTML</h1>
시작태그와 종료태그 </> 로 구성되어있다. 화면에는 hello,HTML 이 표시된다.
tag태그 + 내용 + 닫는 tag 의 모든 것을 요소라고 한다.
태그와 요소는 의미가 다르지만 많은 사람들이 태그와 요소를 같은 의미로 사용하니 혼동하지 않도록 주의하라고 한다.
태그는 XML,SGML,XHTML 등 마크업언어에서도 태그를 사용하는 등의 규칙이 있다.
●3)HTML문법 - 속성 - 4
속성 ATTRIBUTE
속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미합니다.
<h1 id="title">Hello, HTML</h1>
<h1>이라는 태그에 id라는 속성을 추가한 것입니다.
의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 선언할 수 있습니다
<h1 id="title" class="test">Hello, HTML</h1>
id,class 라는 속성을 주었다. id와 class는 순서가 정해진 것은 아니다.
class 를 먼저 쓰고 id 를 후에 써도 된다.
●04)HTML 문법 - 태그 중첩
태그는 중첩이 가능하다 !
올바른 예
<h1>Hello ,<i>HTML</i></h1>
부모태그 <h1>
자식태그 <i>
잘못된 예
<h1>Hello, <i>HTML</h1></i>
태그의 구조의 특성으로 인해 중첩할 수 없는 경우 : 블록,인라인 (다음 강의에서 다룸)
●05)빈 태그(EMPTY TAG)
태그는 보통 시작과 종료 태그가 있다고 했지만
그렇지 않은 태그도 있습니다
<br>
<img src = "">
종료태그가 없는 빈 태그의 예시입니다.
<h1>태그는 화면에 나타낼 내용을 직접 작성할 수 있었지만
<h1>안녕</h1>
빈 태그는 그렇지 않습니다. 브라우저가 대신 빈태그를 확인하여
줄바꿈이나. 외부리소스(그림,동영상)를 그려줍니다.
●06)공백(SPACE)
<h1>hello, HTML</h1>
이 코드는 웹상에서 공백을 포함하고 보여줄까요?
아닙니다 !
개행,공백을 무시합니다..
그렇다면 개행,공백을 어떻게 표현할까요 ?
별도의 태그가 있습니다.
●07)주석(COMMENT TAGS)
코드 작성 시 코드에 대한 설명,메모를 작성하고 싶을 때 주석을 활용합니다
<!-- 내용 -->
●08)HTML 문서구조
핵심키워드
<!DOCTYPE html> 이 문서가 어떤 타입으로 작성되었는지 알려주는 태그, 가장 위에 독타입이 있어야합니다
<html>
<head>
<body>
<meta>
head태그 내부에는 title,style,meta 태그등이 있습니다.
실습
이렇게 작성하면 웹브라우저에서는 무슨 문장이 표시가 될까용 ??
바로 이렇게 표시가 된답니다 !!
[출처] HTML 에 대하여 _ 비전공자를 위한 HTML/CSS 코칭스터디|작성자 오리멩
'Scrap' 카테고리의 다른 글
| Vue.js 스터디 - 1) 기본 설정 및 반복문 (0) | 2022.05.19 |
|---|---|
| git 호스팅 - github pages로 웹 호스팅 하기 (0) | 2022.05.10 |
| HTML /CSS (0) | 2022.05.10 |
| HTML5 markup (0) | 2022.05.10 |
| Markup guide (0) | 2022.05.10 |
