본문 바로가기


IT 이야기/HTML 강좌

#HTML 강좌 - div 태그 개념다지기

by 낭만ii고양이 2018. 4. 27.



안녕하세요 낭만고양이 입니다. 오늘은 div 테그에 대해서 배워보도록 하겠습니다.

자주 사용하는 테그인 만큼 확실하게 공부하여 자기것으로 만드시기를 바랍니다.


이 포스팅을 보시기전에 앞강좌를 보시지 않았다면 보시고 아래링크를 따라가서 공부하고 오세요.


#HTML 강좌 - 테이블(TABLE) 테그

#HTML 강좌 - 표제테크(h) 줄바꿈테그(br/p) 수평선테그(hr)

#HTML 강좌 - 글자의 서식 , 주석처리 방법

#HTML 강좌 - 이미지 삽입

#HTML 강좌 - 링크걸기



■  div  테그 개념다지기



<div></div> 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰이며, 주로 CSS와 연동하여 사용합니다.



 
<!DOCTYPE html>
<html>
<head>
<title>HTML DIV태그</title>
<style type="text/css">
.cat {
  color: #4674D9;
  line-height:32px;
  font-size: 20px;
  font-weight: bold;
  border-radius:3px;
  padding-top: 5px;
  padding-bottom: 1.5px;
  padding-left: 10px;
  margin-bottom: 2px;
  margin-top: 5px;
  background: #DBE8FB;
  border: 1px  solid #4674D9;
  }
.romantic {
  color: #F14978;
  line-height:32px;
  font-size: 20px;
  font-weight: bold;
  border-radius:5px;
  padding-top: 3px;
  padding-bottom: 1.5px;
  padding-left: 10px;
  margin-bottom: 2px;
  margin-top: 5px;
  background: #ffd8eb;
  border:1px solid #F14978;
  }
</style>
</head>
 
<body>
 
<div class="cat">낭만고양이와 함께<br>
div테그를 공부해 보아요
</div>
 
<div class="romantic">낭만고양이와 함께<br>
div테그를 공부해 보아요</div>
 
</body>
</html> 



※ 위 소스가 제대로 안보이면 아래 텍스트 파일을 다운받으세요.

첨부파일 다운 →  

div.txt





위 소스를 다운받아서 test.htm 으로 저장한후 실행하보면 아래와 같이 뜰것입니다.






div 테그 자체는 글자에 아무런 영향을 줄수 없지만 div 테그에 class 값을 부여하니 위 그림과 같이 class 에 속한 글자 속성이 적용이 된걸 확인할수가 있습니다. 상단에는 cat 이라는 class값이 주어진 결과물이구요 하단에는 romantic  이라는 class값이 주어진 결과물입니다.

div 테그에 대해 감이 조금은 잡히시나요? div 테그는 일반적으로 레이어 형태로도 사용되지만 블로그나 홈페이지의 전체적인 레이아웃을 만들때도 사용됩니다.  아래를 보세요.


 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
 
<title>div 태그로 레이아웃 잡기</title>
 
 
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body {
 margin: 0px; <!-- 언제나 전체 body에는 margin 값을 0으로 세팅해준다-->
 font-size: 18px;
 color: #FFF;
}
#box {
 position: relative;
 height: auto;
 width: 500px;
 margin: auto; <!-- 레이아웃을 싸고 있는 box의 margin을 auto로 주면 중앙정렬 효과-->
 background-color: #F90;
}
#top {
 background-color: #333;
 height: 50px;
 width: 500px;
 position: relative;
}
#left {
 background-color: #09C;
 float: left;
 height: 400px;
 width: 100px;
 position: relative;
}
#main {
 background-color: #3C0;
 float: left;
 height: 400px;
 width: 400px;
 position: relative;
}
#footer {
 background-color: #C0F;
 height: 50px;
 width: 500px;
 position: relative;
 clear: both; <!-- 상단의 흐름을 한번 끊어주기 위해 -->
 float: left; <!-- 새로운 흐름을 지정-->
}
 
 
</style>
 
 
</head>
 
<body>
 
 
<div id="box">
  <div id="top">상단부</div>
  <div id="left">왼쪽</div>
  <div id="main">본문</div>
  <div id="footer">바닦</div>
</div>
 
 
</body>
 
</html>



→ 출처 : http://hello-ux.com/116


※ 위 소스가 제대로 안보이면 아래 텍스트 파일을 다운받으세요.

첨부파일 다운 →  

div_2.txt





위 소스를 메모장에 붙여넣은뒤 test.htm 으로 저장한후 실행해보시면 아래와 같이 뜰것입니다.




기본적인 레이아웃이 잡힌걸 확인할수가 있습니다. 근데 여기서 위 소스를 가만히 보시면 div 테그에서 스타일을 호출할때 class 값이 아니라 id 값으로 호출한것을 볼수가 있습니다. 여기서 class 와 id 의 차이점을 설명하고 넘어가야겠네요.


class 선택자 는 여러개의 태그에 동시에 적용될수 있으며 id 선택자는 body 태그안에 한개만 존재 할 수 있습니다.  따라서 여러개의 테그에 중복으로 사용하실려면 class 에 한번만 등록하시고 필요할때마다 사용하시면 되구요. id 는 유일하게 한군데만 적용하고 싶을때 사용하시면 됩니다. 







제 글이 도움이 되셨다면  "공감 (♡)" 한번씩 클릭해주시고 응원의 댓글들도 남겨주세요.


 









저작자표시

'IT 이야기 > HTML 강좌' 카테고리의 다른 글

div 테그 - 가운데 정렬방법 꿀팁 [너무 쉽네]  (0) 2018.07.04
#HTML 강좌 - bgsound 태그 embed 태그 iframe 태그  (0) 2018.04.26
#HTML 강좌 - 테이블(TABLE) 테그  (0) 2018.04.25
#HTML 강좌 - FONT 테그  (0) 2018.04.24
#HTML 강좌 - 링크걸기  (0) 2018.04.20
#HTML 강좌 - 이미지 삽입  (0) 2018.04.19
#HTML 강좌 - 글자의 서식 , 주석처리 방법  (0) 2018.04.18

관련글

댓글

티스토리툴바