02-1. HTML 파일의 구조
html 파일의 구조는 항상 아래와 같습니다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>02-1-1. <!DOCTYPE>
HTML 파일이라면 제일 첫 줄에 위치해야 하는 선언문 입니다. 모습은 태그와 비슷하지만 HTML 태그는 아닙니다. 이 html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 합니다.
index.html에 쓰인 이 선언문은 HTML5 버전을 사용한다는 의미입니다. 가장 최신이자 많이 쓰이는 버전은 HTML5입니다. 우리가 배우고 앞으로 사용할 버전도 HTML5라고 알고계시면 되겠습니다.
02-1-2.< html >
을 제외하고 모든 HTML elements(요소)들은 최상위의
<html></html>으로 감싸져 있습니다. 브라우저가 html태그를 만나면, html이 시작됐는지 인지하고 요소를 그릴 준비를 합니다.
02-1-3. < head >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>html태그 다음에는 항상 태그가 위치합니다. 사이트의 제목, 설명, 부가 정보, 기술적 내용(ex. 이 사이트는 주로 모바일용인지)이 들어가는 부분입니다.
< 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>
body태그는 항상 head태그 다음에 위치합니다. body태그 내부에는 화면에 보여질 각종 태그들이 위치합니다. 레이아웃대로 배치되어 있겠죠! 여기서부터 나오는 태그는 뒤에서 더 자세하게 다룰 예정입니다. 이번 장에서는 가볍게 배우고 넘어가겠습니다.
02-2. HTML tags
02-2-1. < h1>, < h2>, < h3>, < h4>, < h5>
주로 제목같은 텍스트를 보여줄때 사용하는 태그입니다.
1에서 5로 숫자가 올라갈 수록, 글씨 크기가 점점 작아집니다.
*heading의 줄임말입니다.
<h5>자기소개</h5>
<h1>오늘의 수업 내용</h1>
<h2>중요한 태그들..</h2>02-2-2. < span>
< span>태그에는 주로 텍스트를 넣어줍니다.
< span>을 사용하면 줄이 바뀌지 않고, 한 줄에 이어서 나오게 됩니다.
*이렇게 한 줄에 이어서 나오는 요소를 inline-element 라고 합니다.
< span>이름: 김개발< /span>
< span>직업: 프론트앤드 개발자< /span>
02-2-3. < p>
태그 또한 텍스트를 주로 넣어줍니다.
는 paragraph 의 줄임말인 만큼, 주로 문단을 통으로 넣을 때가 많습니다.
*
태그는 < span>태그와 달리 줄바꿈이 일어납니다.
tag들 파헤치기!!< /p>
아자!!< /p>
02-2-4. < a>
< a>태그는 클릭하면 화면이 이동합니다.
< a> 태그의 href 속성(attribute)에 이동해야 하는 주소를 써주면 됩니다.
화면의 "div태그?"을 클릭하여 화면을 이동해 보세요.
target 속성에 "_blank" 값은 클릭하면 새창으로 뜨게 해주는 값입니다.
이제 target="_blank" 부분을 삭제하고 다시 run을 눌러 재실행 해보세요.
<a href="https://www.w3schools.com/tags/tag_div.asp" target="_blank">a 태그?</a>
02-2-5. < div>
< div>는 division의 줄임말로웹사이트에서 섹션을 나눌 때 사용합니다. < a>, < p>, < img> 등의 태그는 그 자체로 어떤 기능을 하는지 명확히 알 수 있지만, < div>는 자체로 의미가 있지는 않습니다.
< div>를 사용하는 이유는,
비슷한 부분끼리 그룹지어주고
디자인에 맞게 레이아웃을 분리해주고,
*각 < div>에 class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있기 때문입니다.
예를 들어 헤더, 메뉴, 주요 내용, 푸터.. 이렇게 나누어 div로 묶어 줍니다.
