HTML - <div>, <span> 태그
HTML - <div>, <span> 태그
| <div> 영역을 나누는 태그 |
<DIV> 태그
<div> 태그는 division의 약자로 레이아웃을 나눌 때 주로 쓰입니다. 태그의 특성상 가로 크기가 영역에 꽉차게 설정되는데, CSS의 float 속성을 이용하면 내용에 꽉 붙게 설정할 수도 있습니다. 가로(width), 세로(height) 크기를 지정할수 있고 테이블 대체하며 레이아웃 배치 용도로 주로 쓰입니다
DIV 영역만 지정
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div> 단순히 영역만 지정 </div> </body> </html>
DIV 지정된 영역에 바탕색 지정
1) background: 색상
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="background: red";> 지정된 영역에 바탕색을 설정 </div> </body> </html>
1) width : 세로 크기
2) height : 가로크기
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="background: red ; width: 210px ; height: 20px"> 가로 세로 크기 설정 </div> </body> </html>
DIV 영역 안쪽 여백 설정
1) padding : 여백의 순서는 윗쪽 오른쪽, 아래쪽, 왼쪽입니다 각각의 여백을 지정하지 않고, 하나만 쓰면 동일한 여백이 정용됩니다.
2) padding : 윗쪽, 오른쪽, 아래쪽, 왼쪽
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="background: red ; width: 210px ; height: 20px ; padding: 30px 20px 30px 20px ;"> 영역 안쪽 여백 설정 </div> </body> </html>
DIV 테두리 설정
1) border : 선긋기(숫자px) 선종류 선색상
2) 선종류 : solid (실선), dotted(점선) 등등
3) 선색상 green, blue, red 등 등 색상을 입력하거나 색상코드를 적습니다.
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="width: 210px ; height: 20px ; border: 1px solid red ;"> 영역 안쪽 여백 설정 </div> </body> </html>
DIV 영역내의 위치 설정하기
1) text-align : left(왼쪽), center(가운데), right(오른쪽)
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="text-align: center; "> 영역내의 위치 설정하기 </div> </body> </html>
DIV 영역내 모든 글자의 크기 종류 색상
1) style : [색상이름 또는 색상코드] [숫자] [기울임] [굴기] [글자체 종류] [숫자]
2) coler : 색상이름 또는 #000000 같은 색상코드
3) font-style : 숫자px
4) font-style : 기울임(생략가능)
5) font-weight : 굵기
6) font-family : 글자체 종류
7) line-height : 숫자px
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="text-align: center; "> 영역내의 위치 설정하기 </div> </body> </html>
DIV 영역과 주변과 여백 설정
1) margin의 숫자는 차례대로 윗쪽 오른쪽 왼쪽 여백이며 숫자를 하나만 지정하면, 사방에 모두 동일한 여백이 적용됩니다.
2) margin-top : 왼쪽 여백 지정
3) margin-bottom : 아랫쪽 여백 지정
4) margin-left : 왼쪽 여백 지정
5) margin-right : 오른쪽 여백 지정
DIV 영역의 위치 설정
1) foloat : left(왼쪽), right(오른쪽)
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="height: 30px ; border: 1px solid blue ; float: right ; "> div 영역내 모든 글자의 크기 종류 색상 </div> </body> </html>
| <span> 레이아웃을 설정하는 태그 |
<span> 태그
<div> 태그와 비슷하게 레이아웃을 설정할 때 스입니다
하지만 영역에 꽉차게 표시되지 않고, 크기를 설정 할수 없습니다.
span 영역지정
<html> <head> <meta charset="utf-8"> <title>span 태그 영역지정</title> </head> <body> <span>span 태그 영역지정</span> </body> </html>
span 지정된 영역에 바탕색 지정
<html> <head> <meta charset="utf-8"> <title>span 태그 영역지정</title> </head> <body> <span style="background-color:#9f3">span 태그 영역지정</span> </body> </html>
