HTML(Hyper Text Markup Language)


HTML은 웹 페이지를 만들기 위한 언어이다
HTML로 웹페이지의 구조를 잡을 수 있다
HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다

브라우저(safari, chrome, ie..)는 HTML파일을 가지고 뭘 어떻게 그려주면 
되는지 파악한 후에 웹 페이지를 생성해준다

스크린샷 2019-08-08 오후 9.05.05.png

스크린샷 2019-08-08 오후 9.05.56.png

html 파일의 구조


<!DOCTYPE> 
<html>
 <head>
 </head>
 <body>
 </body>
</html>

<!DOCTYPE>The이 html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할
html <!DOCTYPE> 제외하고 모든 HTML elements(요소)들은 <html></html>으로 감싸져 있습니다.
브라우저가 html태그를 만나면, html이 시작됐는지 인지하고 요소를 그릴 준비를 한다.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
</head>

<head></head>
html태그 다음에는 항상 head태그가 위치한다.(사이트의 제목, 설명, 부가 정보, 기술적 내용)
<meta charset="utf-8">
한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 한다.
<meta name="viewport" content="width=device-width">
디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보이다 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타남
<title>yong</title> 브라우저 탭에 보이는 페이지 이름

body 항상 head태그 다음에 위치


<h1>, <h2>, <h3>, <h4>, <h5>

주로 제목같은 텍스트를 보여줄때 사용하는 태그
1에서 5로 숫자가 올라갈 수록, 글씨 크기가 점점 작아짐

<span>

<span>이름: 김개발</span>
<span>직업: 프론트앤드 개발자</span>

<span>태그에는 주로 텍스트를 넣어준다.
한 줄에 이어서 나오게 된다.
이렇게 한 줄에 이어서 나오는 요소를 inline-element 라고 한다.

<p>

<p>tag들 파헤치기!!</p>
<p>아자!!</p>

<p>태그 또한 텍스트를 주로 넣어준다.
p는 paragraph 의 줄임말인 만큼, 주로 문단을 통채로 넣을 때가 많다.
<p>태그는 <span>태그와 달리 줄바꿈이 일어난다.

<a>

<a href="https://www.w3schools.com/tags/tag_div.asp" target="_blank">div 태그?</a>
<a>태그는 클릭하면 화면이 이동한다.

a 태그의 href 속성(attribute)에 이동해야 하는 주소를 써주면 된다.
target 속성에 "_blank" 값은 클릭하면 새창으로 뜨게 해주는 값이다.

<div>

<div></div>는 웹사이트에서 섹션을 나눌 때 사용한다.

<a>, <p>, <img> 등의 태그는 그 자체로 어떤 기능을 하는지 명확히 알 수 있다.
a는 링크를 할 때, 텍스트는 p, span으로..  
하지만 div는 자체로 의미가 있지는 않다.

div를 사용하는 이유는, 
비슷한 부분끼리 그룹지어주고 
디자인에 맞게 레이아웃을 분리해주고,
각 <div>에 class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있기 때문이다.

HTML Attributes


<a href="https://wecode.com">위코드로 이동</a>

<a> tag
href attribute(속성)
https://wecode.com href에 대한 attribute 값
"위코드로 이동"content(내용)

위의 href는 다른 페이지로 이동하는 주소이므로 div같은 태그에는 쓸 수 없다.

id

id는 각 태그에 이름을 주는 속성이다.
이름은 이름인데, 주민등록 번호와 같이 한국에 단 하나밖에 없는 그런 고유한 값이다.
웹 페이지에 해당 id 이름은 오직 하나만 가질 수 있고 중복된 id 이름은 존재하지 않는다.

아래와 같이 profile이라는 id를 가진 태그는 단 하나만 있을 수 있다.
다른 태그에 profile 라는 id는 더이상 사용할 수 없다.

<div id="profile">

id는 해당 요소에만 넣고싶은 디자인을 적용할 때 사용한다.

예를 들면 p 태그에 글씨 크기를 20px로 적용하면,
index.html에 있는 모든 p 태그의 글씨가 커진다.
이런 것을 원한것이 아니라면
id가 profile인 요소에만 글씨 크기를 20px로 적용할 수 있다.

class

class도 태그에 이름을 주는 속성이다.
id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있다.
예를 들어 '이철수'라는 이름을 가진 사람이 여러 명 이듯이
여러 tag에 중복된 class 이름을 줄 수 있습니다.

<div class="content-wrap"></div>
<p> class="content-wrap"></p>

여러 속성 추가하기
하나의 태그에 2개 이상의 속성을 부여할 수 있다.
여러 속성을 주고 싶으면 한간 띄워쓰기 후 추가하면 된다.
속성의 순서는 상관없이 쓰고 싶은대로 쓰시면 된다.

<div id="profile" class="content-wrap"></div>