HTML DIV 태그 사용하기 HTML


DIV 영역지정
<div> </div>

보기1: 단순히 영역만을 지정
<div>
여기에 글이나 그림을 넣습니다
</div>

여기에 글이나 그림을 넣습니다

보기2: 지정된 영역에 바탕색을 설정
<div style="background: green";>
여기에 글이나 그림을 넣습니다
</div>
여기에 글이나 그림을 넣습니다

참고: 보기1과 같이 지정하면, 눈으로 구분할 수 없지만, 보기2에서 보이는 것과 같이 역역이 지정되어 있는 것입니다.



DIV 가로 세로 크기 설정
<div style=" width: 숫자px ; height: 숫자px>
여기에 글이나 그림을 넣습니다.
</div>

보기: 가로 200, 세로 100 설정
<div style="background: green; height: 100px; width: 300px ; " >
여기에 글이나 그림을 넣습니다
</div>

여기에 글이나 그림을 넣습니다 가로 300px  세로 100px로 크기를 설정하였습니다



DIV 영역 안쪽 여백 설정 
DIV영역의 경계선과 글씨나 그림이 적당히 떨어지도록 여백을 설정합니다.

<div style="
padding: 30px  20px  30px  20px ;
" >
여기에 글이나 그림을 넣습니다.
</div>

-padding [패딩] : 여백의 순서는 윗쪽, 오른쪽, 아랫쪽, 왼쪽입니다. 각각의 여백을 지정하지 않고, 하나만 쓰면 사방에 동일한 여백이 적용됩니다.


보기: 
<div style="background: green; height: 200px; width: 300px ; padding: 30px  20px  30px  20px ; " >
여기에 글이나 그림을 넣습니다. DIV 영역 안쪽 여백 설정:
DIV영역의 경계선과 글씨나 그림이 적당히 떨어지도록 여백을 설정합니다.
</div>

여기에 글이나 그림을 넣습니다. DIV 영역 안쪽 여백 설정: DIV영역의 경계선과 글씨나 그림이 적당히 떨어지도록 여백을 설정합니다



DIV 테두리 설정하기
<div style="
height: 200px ;
width: 300px ;
border: 선굵기(숫자px)   선종류   선색상 " >
여기에 글이나 그림을 넣습니다.
</div>

-선종류는 solid (실선)  dotted (점선) 등
-선색상은 green blue red 등 색상 이름을 직접 적거나, #000000 와 같이 색상코드를 적습니다


보기: 테두리의 굵기와 종류 색상을 한 가지로 설정합니다
<div style="
height: 200px ;
width: 300px ;
border: 1px   solid  blue ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

여기에 글이나 그림을 넣습니다. DIV영역에 테두리를 설정하였습니다


보기: 테두리의 굵기와 종류 색상을 각각 다르게 지정합니다.
<div style="
height: 200px ;
width: 300px ;
border-top: 1px   solid  blue ;
border-right: 10px   dotted   green ;
border-bottom: 20px   solid  red ;
border-left: 5px   dotted  yellow ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

여기에 글이나 그림을 넣습니다. 위 아래 왼쪽 오른쪽을 각각 다르게 지정하였습니다



보기: 테두리의 특정부분의 굵기와 종류 색상을 다르게 지정합니다.
DIV영역의 윗쪽 선만 그렸기때문에, 왼쪽 오른쪽 아랫쪽 선은 보이지 않지만, 영역은 그대로 설정되어 있는 것입니다.
<div style="
height: 200px ;
width: 300px ;
background: green;
border-top: 5px   solid  red ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

여기에 글이나 그림을 넣습니다. DIV 영역 윗쪽만 선을 지정하였습니다



DIV 바탕 색상 설정하기
<div style="
background: 색상이름 또는 #000000 같은 색상코드 ;
">
여기에는 글이나 그림을 넣습니다
</div>

보기: 색상이름으로 배경 설정
<div style="
height: 200px ;
width: 300px ;
background: green ;
">
여기에는 글이나 그림을 넣습니다
</div>

여기에는 글이나 그림을 넣습니다 색상이름을 직접 적었습니다



보기: 색상코드로 배경 설정
<div style="
height: 200px ;
width: 300px ;
background: #FFB1E2 ;
">
여기에는 글이나 그림을 넣습니다
</div>

여기에는 글이나 그림을 넣습니다 색상코드를 적었습니다



DIV 배경에 이미지 넣기
<div style="
background-image: URL(이미지 주소) ;
height: 200px ;
width: 300px ;
">
여기에 글이나 그림을 넣습니다
</div>

보기: 이미지만 배경에 넣기
<div style="
background-image: URL(http://3.bp.blogspot.com/.../image.jpg) ;
height: 200px ;
width: 300px ;
">
여기에 글이나 그림을 넣습니다
</div>

여기에 글이나 그림을 넣습니다


보기: 이미지를 배경에 넣고 테두리 두르기
<div style="
background-image: URL(http://3.bp.blogspot.com/.../image.jpg) ;
border: 5px   solid  silver ;
height: 200px ;
width: 300px ;
">
여기에 글이나 그림을 넣습니다
</div>

여기에 글이나 그림을 넣습니다



DIV 영역내의 글이나 그림의 위치 설정하기
<div style=" text-align: left (왼쪽)  center (가운데)  right (오른쪽) ; " >
여기에 글이나 그림을 넣습니다.
</div>


보기: 가운데 위치
<div style="
height: 200px ;
width: 450px ;
border: 1px   solid  blue ;
text-align: center ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

여기에 글이나 그림을 넣습니다.
text-align: center를 써서 글이 가운데에 정렬이 되었습니다.


보기: 오른쪽에 위치
<div style="
height: 200px ;
width: 450px ;
border: 1px   solid  blue ;
text-align: right ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

여기에 글이나 그림을 넣습니다.
text-align: right 를 써서 글이 오른쪽 정렬되었습니다.



DIV 역역내 모든 글자의 크기 종류 색상 설정하기
<div style="
color: 색상이름 또는 #000000 같은 색상코드 ;
font-size: 숫자px ;
font-style: 기울임 ;
font-weight: 굵기 ;
font-family: 글자체 종류 ;
line-height: 숫자px ;
">
여기에 글이나 그림을 넣습니다
</div>

-color: green  blue  red ... 같은 색상이름 또는 #000000 같은 색상코드
-font-size: 숫자로 지정 px
-font-style: italic (기울임). 쓰지 않아도 됨
-font-weight: bold (굵게)
-font-family: 바탕체 굴림체 Arial  Georgia ....... 등
-line-height: 숫자px로 지정


보기: 글자와 줄간격 설정
<div style="
height: 100px ;
width: 450px ;
border: 1px   solid  blue ;
color: red ;
font-size: 25px ;
font-style: italic ;
font-weight: bold ;
font-family: Arial ;
line-height: 30px ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

여기에 글이나 그림을 넣습니다. 글자 크기나 모양에 따라 줄간격을 적절하게 조절할 필요가 있을 때는 line-height: 숫자px 을 추가하여 조절 할 수 있습니다.



DIV 영역과 주변과의 여백 설정하기
<div style=" margin: 숫자px  숫자px  숫자px  숫자px ;  ">
여기에 글이나 그림을 넣습니다
</div>

-margin의 숫자는 차례대로 윗쪽  오른쪽  아랫쪽  왼쪽 여백입니다.
숫자를 하나만 지정하면, 사방에 모두 동일한 여백이 적용됩니다.
특정한 쪽만 여백을 지정하려면, 아래와 같이 특정하면 됩니다.
margin-top: 숫자px            <= 윗쪽 여백 지정
margin-bottom: 숫자px     <= 아랫쪽 여백 지정
margin-left: 숫자px           <= 왼쪽 여백 지정
margin-right: 숫자px         <= 오른쪽 여백 지정


보기: 마진을 적용하지 않음
<div style="
height: 100px ;
width: 300px ;
border: 1px   solid  blue ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
DIV 영역과 위 아래의 여백이 없이 붙어 있습니다.
333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333


보기: 마진을 적용함
<div style="
height: 100px ;
width: 300px ;
border: 1px   solid  blue ;
margin: 30px ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
margin: 30px을 써서 DIV 영역과 위 아래 왼쪽 오른쪽 여백이 주변과 띄어졌습니다.
333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333



DIV 영역의 위치 설정하기
<div style="float: 위치 ; "> </div>

-위치: left (왼쪽)  right (오른쪽)
-float 를 적용하면서, DIV 영역의 주위로 글이 따라 올라오지 않게 하려면,
<div styl="clear: both ; "></div>를 추가하면 됩니다.


보기: 왼쪽에 위치
<div style="
height: 200px ;
width: 200px ;
border: 1px   solid  blue ;
float: left ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

여기에 글이나 그림을 넣습니다.
float: left; 를 써서 DIV영역을 왼쪽에 위치시켰습니다.


보기: 오른쪽에 위치
<div style="
height: 200px ;
width: 200px ;
border: 1px   solid  blue ;
float: right ;
 " >
여기에 글이나 그림을 넣습니다.
</div>

여기에 글이나 그림을 넣습니다.
float : right; 를 써서 DIV 영역을 오른쪽에 위치시켰습니다.


보기: DIV 영역을 두개 설정하고 각각 왼쪽과 오른쪽에 나란히 위치시킴

<div style="
height: 200px ;
width: 200px ;
border: 1px   solid  blue ;
float: left ;
 " >
첫번째 DIV영역은 왼쪽으로 위치하였습니다.
</div>

<div style="
height: 200px ;
width: 200px ;
border: 1px   solid  blue ;
float: right ;
 " >
두 번째 DIV영역은 오른쪽으로 위치하였습니다.
</div>

첫번째 DIV영역은 float: left 를 써서 왼쪽으로 위치하였습니다.
두 번째 DIV영역은 float: right를 써서 오른쪽으로 위치하였습니다.



보기: DIV영역을 세 개 설정하고 나란히 놓기

<div style="
height: 200px ;
width: 100px ;
border: 1px   solid  blue ;
float: left ;
 " >
첫 번째 DIV영역
</div>

<div style="
height: 200px ;
width: 100px ;
border: 1px   solid  blue ;
float: left ;
 " >
두 번째 DIV영역
</div>

<div style="
height: 200px ;
width: 100px ;
border: 1px   solid  blue ;
float: left ;
 " >
세 번째 DIV영역
</div>

첫번째 DIV영역
두번째 DIV영역 
세번째 DIV영역



보기: DIV영역을 세 개 설정하고 나란히 놓고 간격 조정하기
DIV영역 세 개를 나란히 놓고, 첫번째 DIV영역은 왼쪽에 위치시키고, 세번째 DIV영역은 오른쪽에 위치시키고, 두번째 DIV영역은 가운데 위치시킨다.
left와 right를 써서 왼쪽과 오른쪽에 위치시키고, 가운데의 DIV영역은 마진을 써서 위치를 잡는다

<div style="
height: 200px ;
width: 100px ;
border: 1px   solid  blue ;
float: left ;
 " >
첫 번째 DIV영역 float: left를 써서 왼쪽에 위치시킴
</div>

<div style="
height: 200px ;
width: 100px ;
border: 1px   solid  blue ;
float: left ;
margin-left: 53px ;
 " >
두 번째 DIV영역 float:left로 첫번째 DIV에 나란히 위치시킨후 margin-left:의 px를 조절하여 위치를 조정함
</div>

<div style="
height: 200px ;
width: 100px ;
border: 1px   solid  blue ;
float: right ;
 " >
세 번째 DIV영역 float: right로 오른쪽에 위치시킴
</div>

첫 번째 DIV영역
float: left를 써서 왼쪽에 위치시킴
두 번째 DIV영역
float:left로 첫번째 DIV에 나란히 위치시킨후
margin-left:의 px를 조절하여 위치를 조정함
세 번째 DIV영역
float: right로 오른쪽에 위치시킴



DIV영역의 절대 위치를 설정하기1
<div style="
position: absolute ; 
top: 숫자px ; 
left: 숫자px ; 
">
여기에 글이나 그림을 넣습니다.
</div>



DIV영역의 절대위치 설정하기2
화면이 스크롤 되어도 고정된(FIXED)된 위치에 그대로 보여집니다.
<div style="
position: fixed ; 
top: 숫자px ; 
left: 숫자px ; 
">
여기에 글이나 그림을 넣습니다.
</div>


보기: POSITION:FIXED
이 보기의 DIV영역은 화면의 왼쪽상단에 보이는 핑크바탕 사각형입니다.
<div style="
position: fixed ; 
top: 300px ; 
left: 15px ; 
width: 125px;
background: pink;
">
DIV영역에 position:fixed를 설정하여, 화면이 스크롤되더라도 항상 지정된 위치에 고정(fixed)되어 있도록 한 것입니다
</div>


덧글

댓글 입력 영역


통계 위젯 (화이트)

321
92
287925