1. HTML tags
HTML 파일의 구조는 항상 아래와 같다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>
여기서 <! DOCTYPE>는 HTML 파일에 제일 첫 줄에 위치해야 하는 선언문이다.
<! DOCTYPE>은 html 파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 한다.
⚠️ 현재 사용하고 있는 버전은 html5이다.
html elements(요소)들은 <html></html>으로 감싸져 있는데, 브라우저가 html태그를 만나면, html을 시작됐는지 인지하고 요소를 그릴 준비를 한다.
html태그 다음에 항상 head태그가 위치한다. <head> 태그 안에는 사이트의 제목, 설명, 부가정보, 기술적 내용(예. 이 사이트는 모바일용인지에 대해)이 들어가는 부분이다.
<head> 태그👇👇👇👇👇👇👇👇👇👇👇👇
<meta charset="utf-8">: 한글, 일본어, 중국어가 포함된 페이지라면 utf-8이라는 값으로 인코딩을 추가해줘야 한다.
<meta name ="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹페이지의 가로와 같다는 의미다. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보이다. 해당 정보를 추가하지 않으면 데스크톱 버전의 웹페이지가 축소되어 보이는 현상이 나타난다.
<title> repl.it <title>: 브라우저 탭에 보이는 페이지 이름이다.
<body> 태그👇👇👇👇👇👇👇👇👇👇👇👇
body태그는 항상 head태그 다음에 위치한다. body태그 내부에는 화면에 보여야 할 레이아웃대로 각종 태그들이 존재한다.
지금은 간략하게 구조들만 설명하고 뒤에서 자세하게 다루기로 하겠다.
<h1> ~ <h5>: heading의 줄임말로써, 주로 제목 같은 텍스트를 보여줄 때 사용하는 태그이다. 1에서 5로 숫자가 올라갈수록, 글씨 크기가 점점 작아진다.
<span>: 주로 텍스트를 넣어준다. <span> 태그는 line break(개행)가 되지 않고, 한 줄에 이어서 나오게 된다. 이런 요소를 inline-element라고 한다.
<p>: paragraph의 줄임말로써, 주로 문단(텍스트)을 통으로 넣어줄 때 많이 쓰인다. 위 <span> 태그와 달리 <p> 태그는 줄 바꿈이 일어난다.
<a>: 링크를 걸어줄 때 쓰는 태그로써, <a> 태그 안에 href속성(attribute)에 이동해야 하는 주소를 써준 후 태그를 클릭하면 속성에 써준 주소로 이동하게 된다. 여기서 target속성에 "_blank" 값을 넣어주면 클릭 시 새창으로 뜨게 해주는 역할을 한다.
<div>: division의 줄임말로써, 웹사이트에서 섹션을 나눌 때 사용하는 태그이다. 대부분 <div>를 사용하는 이유는 비슷한 부분끼리 그룹 지어주거나, 디자인에 맞게 레이아웃을 분리해주거나, 각 <div>에 class나 id라는 attribute를 부여하여 css 스타일을 입혀주기 위해 사용한다.
'HTML + CSS' 카테고리의 다른 글
| CSS - 6. 문구 스타일 (0) | 2020.06.13 |
|---|---|
| CSS - 5. font style (0) | 2020.06.12 |
| CSS - 4. Introduction to CSS (0) | 2020.06.12 |
| HTML - 3. HTML Attributes (0) | 2020.06.12 |
| HTML - 1. HTML/브라우저/Tag (0) | 2020.06.12 |
댓글