DESCRIPTION
- 웹기능에서 뼈대 역할을 수행한다.
- Doc type은 html이고
<!DOCTYPE html>으로 표현한다
- 크게 html head body로 이루어져있다.
- 태그 안에 attribute(속성)을 집어 넣을 수 있는데, class, href, src, alt등이 있다.
- <> tag </> 많은 태그 들로 이루어져 있다.
TAG Syntax
- Opening tag, Content, Closing tag로 이루어짐.
- Syntax content </Closing tag>
head
<meta charset="utf-8">: 한글, 중국어, 일본어가 포함된 페이지라면 utf-8이 문자들을 인식한다.<content="width=device-width">: 모바일에서 웹페이지의 width가 맞춰 나타나게 된다. 만약 추가 하지 않는다면 모바일 환경에서 desktop mode를 했을때처럼 웹사이트를 전체를 보여주며 작게 보여 준다. <title> website tab name </title> 웹사이트 탭의 이름을 정한다.
body tags
- h1, h2, h3, h4, h5: heading의 의미로 각기 다른 크기의 문자를 표현한다.
- span: 텍스트를 표현하는데 줄바꿈을 하지 않는다 (inline-element)
- p: paragraph의 의미로 문단을 기입하며, 줄바꿈 한다.
- a: anchor의 의미로 일반적으로 url등의 태그를 정한다. href(Hepyertext reference)는 주소를 써주면 그곳으로 이동한다.
- ex)
<img alt="name if can't load" src="url">
- target="_blank"를 할 시 새탭에서 주소를 불러온다.
- div: division의 의미로 많은 태그들 사이에서 구분을 지으려고 사용한다. 그리고 각 div에 class, id등의 attribute를 부여하여 스타일링이 가능하다.
<strong> </strong> -> 굵은체 bold<u> </u> -> 밑줄 underline<br> -> 줄바꿈<p> </p> -> 단락 만들기<ul> </ul> -> unordered list, 부모태그<li> </li> -> 리스트, 자식태그<ol> </ol> -> ordered list, 부모태그
HTML Attributes
- id : 고유한 값으로 하나의 태그만 가질 수 있다. 고유한 값을 가지기 때문에 특정한것에 디자인을 적용하고 싶을때 사용 가능하다.
- class : 중복된 대상에게 부여가능하다.
