HTML - <div>, <span> 태그





    이전글 :


    HTML이란? - http://server-talk.tistory.com/1


    HTML - 기본 구조의 HTML 문서 만들기 - http://server-talk.tistory.com/101

    HTML - 문법과 주의사항 - http://server-talk.tistory.com/102

    HTML - 목록을 만드는 태그 - http://server-talk.tistory.com/103

    HTML - <br>태그, <p>태그 - - http://server-talk.tistory.com/104




     

     <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>	



     DIV 가로 세로 크기 설정


    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>



    Posted by Server-talk 서버이야기

    • 2017.04.30 18:47

      비밀댓글입니다


      • 2017.04.30 19:13

        비밀댓글입니다