View
[html의 태그]
https://www.w3schools.com/tags/tag_a.asp
<h1>, <h2>, <h3>, <h4>, <h5> : 주로 제목같은 텍스트를 보여줄때 사용하는 태그. </h1>와 같이 짝을 맞추어 태그를 닫아줌.
<span></span> : 주로 텍스트의 내용이 들어간다. 내용이 줄이 바뀌지 않고, 한 줄에 이어서(inline-element) 나오게 됨.
<p></p> : 주로 텍스트의 내용이 들어가며, 주로 문단을 통으로 넣을 때가 많음. 줄바꿈이 (block-element) 일어나게됨..
<a></a> : href 속성을 사용하여, 내용 클릭 시 화면이 이동.
target 속성의 값에 따라 창이 새창으로 띄워짐("_blank" 값을 입력시 새창으로 뜨게 해줌)
<div></div> : 웹사이트에서 섹션을 나눌 때 사용.
- 비슷한 부분끼리 그룹
- 디자인에 맞게 레이아웃을 분리
=> 각각의 <div>에 class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있음.
예를 들어 헤더, 메뉴, 주요 내용, 푸터.. 이렇게 나누어 div로 묶어 줌.
[html의 속성(Attribute)]
https://www.w3schools.com/html/html_attributes.asp
https://www.w3schools.com/tags/tag_img.asp
id : 각 태그에 이름을 주는 속성. 해당 태그의 id 값은 다른 태그의 id와 구별된 오직 고유한 이름만 가질 수 있다.
class : 각 태그에 이름을 주는 속성. id와 비슷한 역할이지만 여러 태그에 중복된 이름을 부여할 수 있음.
# 하나의 tag에 id와 class가 모두 올 수 있다.
[html의 요소(element)]
요소란?
<태그이름> 으로 시작하여 </태그이름> 으로 끝나고 태그 사이에 내용이 있는 구조
ex) <h1>시작!</h1>
끝 태그가 필요없는 것은 태그가 그 자체로 요소가 된다.
ex) <img src="me.png">
[head]
<meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가
<meta name="viewport" content="width=device-width"> : 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미
(모바일에서 웹사이트가 예쁘게 잘 보이려면 추가하자!!)
<title></title> : 브라우저 탭에 보이는 페이지 이름
[html 기본 Setting code]
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> html을 배워보자~~ </title>
</head>
<body>
</body>
</html>
'HTML' 카테고리의 다른 글
| TIL 8 | HTML_Semantic Web_Semantic Tags (0) | 2021.08.05 |
|---|---|
| TIL 2 | CSS 적용 방법 (0) | 2021.08.02 |
