HTML
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>html 태그 다음에는 항상 head 태그가 위치한다.
사이트의 제목, 설명, 부가 정보, 기술적 내용이 들어가는 부분이다.
<meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다.
<span>
<span>이름: 김개발</span>
<span>직업: 프론트앤드 개발자</span><span> 태그에는 주로 텍스트를 넣는다.
특징으로는 개행이 되지 않고 한 줄로 이어져 나오게 된다는 것이다.
이렇게 한줄로 이어서 나오는 요소를 inline-element라고 한다.
<p>
<p>tag들 파헤치기!!</p>
<p>아자!!</p><p> 태그도 텍스트를 넣는데 사용된다.
p 태그는 paragraph의 줄임말로, 문단을 통째로 넣을 때 사용된다.
<p>는 <span>와 달리 줄바꿈이 일어난다.
<div>
div는 웹사이트에서 섹션을 나눌 때 사용된다.
div는 division의 줄임말이다.
a, p, img 등의 태그는 그 자체의 이름을 살펴보면 어떤 기능을 하는지 명확히 알수 있지만 div는 그 자체로 의미가 있지 않다.
div를 사용하는 이유는,
- 비슷한 부분끼리 그룹짓는다.
- 디자인에 맞게 레이아웃을 분리한다.
- 각 div 태그에 class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있기 때문이다.
id
id는 각 태그에 이름을 주는 속성이다.
id는 고유한 값으로 중복되지 않고 대상을 식별할 수 있어야 한다.
<div id="profile">id는 주로 해당 id를 가지고 있는 요소에만 넣고 싶은 디자인을 지정할 때 사용한다.
class
class도 태그에 이름을 주는 속성이지만, id와는 다르게 class는 태그에 중복된 이름을 부여할 수 있다.
<div class="content-wrap"></div>
<p class="content-wrap"></p>