HTML - <br>태그, <p>태그







    이전글 :

    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






     

     <br> 태그 줄바꿈을 하는 태그




    <br> 태그

     

    <br> 태그는  line break 약자로 줄바꿈을 할때 사용합니다.

    <br>태그는 닫아주는 태그가 없는 빈 태그<empty tag> 입니다 하지만 xhtml에서는 <br/> 태그로, 열고 다는 태그를 대신합니다.


    예제)

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>줄바꿈을 하는 태그</title>
    	</head>
    
    	<body>
    		br태그는 line break 약자로 줄바꿈을 할때 사용합니다.<br>
    		br태그는 닫아주는 태그가 없는 빈태그 입니다
    	</body>
    
    </html>	



     

     <p> 태그 문단을 구분하는 태그



    <p> 태그

     

    <p> 태그는 paragraph 약자로 문단을 구분할 때 사용합니다 <p>태그 앞뒤로 여백이 들어가는 <br>이 두번 들어간 것과 같이 나오게 됩니다.


    * <p> 태그는 앞뒤로 여백이 들어가는대 <br> 태그가 두번 들어간 것과 같은 결과가 나오게 됩니다.



    예제)

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>문단을 구분하는 태그</title>
    	</head>
    
    	<body>
    		<p>p태그는 paragraph 약자로 문단을 구분할때 씁니다.</p>
    		<p>p태그는 앞뒤로 여백이 들어가는 br태그가 두번 들어간 것과 같이 나오게 됩니다. </p>
    	</body>
    
    </html>	




     

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




    Posted by 서버이야기