📍HTML 파일의 구조
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>제일 첫 줄에 위치해야 하는 선언문
모습은 태그와 비슷하지만 HTML 태그는 아니다
이 html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할<!DOCTYPE html>
index.html에 쓰인 이 선언문은 HTML5 버전을 사용한다는 의미
<!DOCTYPE\>을 제외하고 모든 HTML elements(요소)들은 최상위의
<html></html>
으로 감싸져 있다. 브라우저가 html태그를 만나면, html이 시작됐는지 인지한다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>html태그 다음에는 항상 <head>태그가 위치
<meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 합니다.
<meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보입니다. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타납니다.
<title>repl.it</title>: 브라우저 탭에 보이는 페이지 이름입니다. index.html에 작성된 코드는 지금 보고 있는 웹페이지 자체의 index.html 파일이 아니라서, 수정을 하셔도 적용이 되지는 않습니다.
02-1-4.
body태그는 항상 head태그 다음에 위치합니다. body태그 내부에는 화면에 보여질 각종 태그들이 위치합니다. 레이아웃대로 배치되어 있겠죠! 여기서부터 나오는 태그는 뒤에서 더 자세하게 다룰 예정입니다. 이번 장에서는 가볍게 배우고 넘어가겠습니다.
HTML tags
<h1>, <h2>, <h3>, <h4>, <h5>
주로 제목같은 텍스트를 보여줄때 사용하는 태그입니다.
1에서 5로 숫자가 올라갈수록, 글씨 크기가 점점 작아집니다.
heading의 줄임말
<h5>자기소개</h5>
<h1>오늘의 수업 내용</h1>
<h2>중요한 태그들..</h2><span>
- 주로 텍스트를 넣어줍니다.
<span>사용하면 줄이 바뀌지 않고, 한 줄에 이어서 나오게 됩니다.
이렇게 한 줄에 이어서 나오는 요소를inline-element라고 합니다.
<span>이름: 정지민</span>
<span>직업: 백앤드 개발자</span><p>
- 텍스트를 주로 넣어줍니다.
- paragraph 의 줄임말인 만큼, 주로 문단을 통으로 넣을 때가 많습니다.
- 태그와 달리 줄바꿈이 일어납니다.
<p>tag들 파헤치기!!</p>
<p>아자!!</p><a>
- 클릭하면 화면이 이동합니다.
<a>태그의 href 속성(attribute)에 이동해야 하는 주소를 써주면 됩니다.
<div>
- division의 줄임말
- 웹사이트에서 섹션을 나눌 때 사용합니다.
<a>,<p>,<img>등의 태그는 그 자체로 어떤 기능을 하는지 명확히 알 수 있지만,<div>는 자체로 의미가 있지는 않습니다.
<div>를 사용하는 이유
비슷한 부분끼리 그룹지어주고
디자인에 맞게 레이아웃을 분리해주고,
각 <div>에 class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있기 때문
