repl.it #2&3. HTML tags,attributes

이지·2020년 9월 14일

HTML&CSS

목록 보기

2/8

사이트의 제목, 설명, 부가 정보, 기술적 내용(ex. 이 사이트는 주로 모바일용인지)이 들어가는 부분입니다.

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

body태그는 항상 head태그 다음에 위치합니다.

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

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

2. <span>

주로 텍스트를 넣어줍니다.
그런데 화면에서 보다시피 개행(line break)이 되지 않고, 한 줄에 이어서 나오게 됩니다.
이렇게 한 줄에 이어서 나오는 요소를 inline-element 라고 합니다.

3. <P>

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

4. <a>

<a href="https://www.w3schools.com/tags/tag_div.asp" target="_blank">a 태그?</a>

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

5. <div>

div는 웹사이트에서 섹션을 나눌 때 사용합니다.
div는 division의 줄임말로 딱 이름의 역할을합니다.
(하지만 div는 자체로 의미가 있지는 않습니다.)

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

예를 들어 헤더, 메뉴, 주요 내용, 푸터.. 이렇게 나누어 div로 묶어 줍니다.

attribute 에도 많은 종류가 있습니다.
그리고 어떤 tag인지에 따라 적용할 수 있는 attribute도 달라집니다.
처음에는 헷깔리지만 주로 사용하는 tag와 attribute가 있어서 금방 익숙해집니다.

1. id

id는 각 태그에 이름을 주는 속성입니다.
웹 페이지에 해당 id 이름은 오직 하나만 가질 수 있습니다.
즉, 중복된 id 이름이 있으면 안된다는 말입니다.

2. class

id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있습니다.


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

+) 여러 속성 추가하기
하나의 태그에 2개 이상의 속성을 부여할 수 있습니다.
여러 속성을 주고 싶으면 한 칸 띄어쓰기 후 추가하면 됩니다.

이지피지레몬스퀴지🍋