티스토리 뷰
<div>태그와 <span>태그를 활용해보고 id와 class도 익혀봅시다.
오늘은 상자를 여러개 그려서 <div>태그와 <span>태그에 대해서 배워봅시다.
예시 사진을 보시면 아시겠지만 네모난 상자들이 여러개 있습니다. 어떤 것들은 겹쳐져 있고, 어떤 것들은 다른 것들과 떨어져 있습니다. 안 쪽의 텍스트를 보시면 <div>태그와 <span>태그의 큰 차이를 알 수 있습니다. 무엇인지 아시겠나요?
맞습니다. 옆 공간을 다 차지하는 것이 <div>태그이고, 옆에 다른 컨텐츠가 올 수 있는 것이<span>태그입니다.
우선 이 정도만 기억해두고 소스코드를 살펴보도록 합시다.
<!DOCTYPE html> <html> <head> <title>예시 3번</title> <style> .many{ width: 500px; height: 500px; border: 1px solid black; margin-bottom: 20px; } #one{ background-color: #b21212; } #two{ background-color: #fffc19; } #three{ background-color: #ff0000; } #four{ background-color: #1485cc; } div div{ height: 30px; border: 1px solid green; } span{ border: 1px solid red; } </style> </head> <body> <h2>id와 class값 주기 - div와 span의 차이</h2> <a href="#three">a태그를 이용해서 페이지 내의 특정요소로 이동</a> <div id="one" class="many">div - 1</div> <div id="two" class="many"> div - 2 <div>div - 2-1</div> <span>span - 1</span> <span>span - 2</span> </div> <div id="three" class="many">div - 3</div> <div id="four" class="many">div - 4</div> </body> </html>
새로운 태그들을 하나씩 설명하겠습니다.
<style>태그는 스타일을 정의하는데 필요한 태그입니다. 문서를 꾸미는데 필요한 CSS 값들을 <style>태그 내부에 적을 수 있습니다. 지금은 CSS를 배우지 않으셨으니 이해 못하는게 당연한 것이니 걱정마세요 ! 간략히 설명하자면 각각의 <div>태그마다 다른 id가 주어졌고, CSS를 통해서 다른 색들을 부여했습니다. 그리고 좀 더 상자들을 구분하기 쉽게 경계선을 주었습니다.
기억하실건 <style>태그는 <head>태그 사이에 위치하는게 좋고, 안에 CSS 값들이 들어간다는 것입니다.
다른 태그들을 배우기 전에 id와 class에 대해서 알아보고 가겠습니다.
id란 무엇일까요 ? 회원가입을 할 때 입력하는 id를 생각해보시면 간단합니다. 동일한 id는 존재할 수 없습니다. 동일한 것이 없으니 고유 식별자라고 표현할 수 있겠네요. HTML 문서도 마찬가지입니다. id는 중복될 수 없고, 단 하나여야 합니다. 그리고 주어진 id를 제어할 때는 "#id값"으로 제어 할 수 있습니다. 소스코드를 보시면 <div>태그에 one, two, three, four라는 id값을 각각 주었고, <style>태그 내부에 #one, #two, #three, #four이라는 형태로 제어하고 있는 것을 볼 수 있습니다.
HTML문서 내에서 동일한 id값은 중복 사용 못하고, 제어할 땐 #id값 이라는 형태를 씁니다.
똑같은 형태로 꾸밀건데 하나씩 제어해야 한다면 엄청 불편하겠죠? 그럴땐 그룹을 묶고 그 그룹에 똑같은 스타일을 지정해 준다면 아주 편할 겁니다. 그래서 class값이 필요합니다. class는 id와 다르게 똑같은 class값을 여러 태그에 줄 수 있습니다. 소스코드를 보시면 큰 상자를 나타내는 <div>태그마다 "many"라는 같은 class값을 주었습니다. class 값을 여러 태그들에게 줄 수 있다면 어떤 태그는 두개 이상의 class 값을 가질수도 있습니다. 그럴땐 class="first second"처럼 띄어쓰기로 구분해서 first와 second라는 두개의 class값을 줄 수 있습니다. 그리고 제어할 때는 .class값 이라는 형태를 씁니다. 소스코드 에서도 many라는 class값을 가진 태그들에게 똑같은 스타일을 지정한 것을 볼 수 있습니다.
id와 다르게 class는 중복 사용 가능하고, 값을 여러개 줄 땐 class="first second"처럼 띄어쓰기로 구분하고, .class값 이라는 형태로 제어한다.
잠깐 지난 시간의 복습을 해볼까요 ? <a>태그는 현재 페이지서 다른 페이지로 이동하게 만들어 주는 태그였습니다. 그리고 href 속성 값으로 "#"을 주니 페이지의 최상단으로 이동했습니다. 그럼 현재 페이지의 다른 부분들로 이동할 수도 있을까요? 답은 당연히 "가능하다" 입니다. href 속성 값에 태그의 아이디 값을 주면 그 아이디 값을 가진 태그가 페이지의 최상단이 되도록 이동합니다. 소스코드로 만든 문서의 <a>태그를 클릭해보세요!
<a href="#one">id값이 one인 태그가 최상단이 되도록 이동합니다</a>
<div>태그는 태그들을 분할하거나 그룹을 묶을 때 자주 사용됩니다. 예전에 사용했던 예시를 들고와 볼까요?
<h1>태그와 <p>태그가 각각 <div>태그로 묶여있습니다. 그럼 이 두 묶음을 다시 하나로 합치려면 어떻게 해야할까요? <div>태그를 새로 만들어서 두 개의 <div>태그를 그 사이에 넣으면 됩니다. 그리고 id값이나 class값을 주면 각각을 제어할 수도 있고, 묶어서 제어할 수도 있습니다.
그럼 <div>태그 옆에는 왜 아무것도 오지 못하고 밑으로 내려갔을까요? 각 태그가 얼마나 공간을 차지할 지 정하는 display라는 속성이 있습니다. <div>는 기본적으로 display의 값이 "block"입니다. 쉽게 한 블록을 다 차지한다고 생각하시면 됩니다. <span>태그는 뭘까요? <span>태그의 display값은 기본적으로 "inline"입니다. 한 줄에 다 들어올 수 있게 해주는 것이죠. 그래서 보통 텍스트 사이에 특정부분에 넣어 자바스크립트나 CSS로 제어할 수 있게 만듭니다.
<p>만약 div태그를 중간에 쓴다면 줄이 바뀌겠죠? <span id="example">하지만</span> span태그는 안 바뀝니다.</p>
설명하다보니 너무 길어졌다는 생각이 드네요. display 속성에 대한 건 CSS 수업이 시작되고 더 자세히 알려드릴 수 있을 것 같네요. 이해가 안되는 부분은 댓글로 알려주시면 설명드리겠습니다 !
강의가 마음에 드셨다면 공감을 눌러주세요.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| 캐스캐이딩의 개념과 css 사용하기 (0) | 2017.12.24 |
|---|---|
| CSS 소개와 CSS 선택자 (6) | 2017.12.18 |
| <input>태그, <a>태그, <ul>태그를 활용한 예시 (1) | 2017.12.13 |
| 기본 태그 설명 및 속성값 바꾸기 (0) | 2017.12.12 |
| HTML태그 보충 설명 (6) | 2017.12.07 |