[FrontEnd] 1. HTML5 문서구조, 주요 태그, 속성

HTML5 문서구조

HTML (hyper text markup language)

- 태그(= node = element)를 조합해서 하나의 문서를 만드는언어

- 브라우저로 결과를 즉시 확인해볼수있다(= Client Side Language)

 

HTML의 구조

 

 

 

 

  head 의 태그들 : 브라우저에 나타나지 않는다  

title : 사이트에 보여지는 제목

meta : 반응형 웹 

script : 자바스크립트 작성

style : html꾸밀때

 

  body의 태그들 : 브라우저에 전부 다 노출됨  

 

 

 

 

html의 표준 : 오페라 https://www.opera.com/ko/computer/thanks?ni=stable&os=windows

- 우클릭 후 요소검사 누르면 개발자도구 볼수있음

( head - meta charset = "UTF-8" : 인코딩형식 )

 

---

태그 (Tag)

- Element, Node라고도 표현함

- Html은 다양한 형태의 데이터를 표현하기 위해 많은 태그를 미리 정의해 두었음

태그를 사용하는 방법

1. 태그는 Open Tag / Attributes / 태그내용 / Close Tag 로 구성되어있음 (text안에 태그 더 들어갈 수 있음)

 

 

2. Single line tag : Open Tag와 Close Tag가 하나로 구성

- 데이터가 없는 태그가 single line으로 쓰임 ex) <br/> : 줄바꿈, <hr/> : 한줄표시

 

---

 

태그의 종류

- HTML의 모든 tag 목록을 정리해둔 사이트   https://www.w3schools.com/tags/default.asp

- 태그의 브라우저에 대한 사용여부 확인 (caniuse)  https://caniuse.com/

- MDN  https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

 

edge : ms

chrome : google

safari : apple

samsung Internet : samsung

naver whale : naver 이 개발

W3  재단 -> HTML, CSS, Javascript 규격을 관리

 

 

HTML의 주요 태그

 

 

 

---

 

속성 Attributes

HTML 태그의 Attribute

- 각 태그들의 Attribute는

https://www.w3schools.com/tags/tag_태그명.asp

에서 확인한다.

- ex) link 태그의 Attribute 확인 -> https://www.w3schools.com/tags/tag_link.asp

 

HTML의 주요 공통 속성 : 모든 태그들에 쓸 수 있음 (=Global Attributes)

*title : 시각장애인을 위한 태그, 까먹지말고 꼭 쓰기*

 

 

 

브라우저는 엔터나 여러개의 띄어쓰기를 인식하지 못한다. 

아래처럼 작성하면 그냥 한줄로 표시가 되고, 여러개의 띄어쓰기는 하나로 변경된다.

 

-> 위의 텍스트 형태 그대로 작성하고 싶다면,  줄단위로 변경해주는 태그<div></div>를 사용하면 됨! 

<div>브라우저가 사용자에게 Content를 보여주는 영역.</div>
        <div>브라우저가 사용자에게 Content를 보여주는 영역.</div>
        <div> 브라우저가       사용자에게       Content를      보여주는     영역.</div>