관심쟁이 영호

[HTML] div 태그 ㅣ div 관련 속성 본문

Front-End/HTML

[HTML] div 태그 ㅣ div 관련 속성

관심쟁이 영호 2021. 4. 10. 14:48
반응형

<div> 태그란?

<div> 태그는 Division의 약자입니다.

레이아웃을 나누는데 사용하는 태그입니다.

 

쉽게 말해서, 구역들을 정해주는 겁니다.

 

예를들면, 어느 구역만 background 색을 바꿔주고 싶을 때,

해당 구역만 지칭하는 틀을 만들어주어야 합니다.

이 떄, <div>태그를 사용합니다.

 

  • 사용법
<html>
	<head>
    </head>
    
    <body>
    	<div> 첫번째 구역 </div>
        <div> 두번째 구역 </div>
    </body>
    
<html>

 

 

위와 같이 코드를 짜면 구역이 2개가 생깁니다.

박스가 2개 생겼다고 생각하시면 됩니다.

 

여기서 css를 이용하여 div의 구역을 설정해줄 수 있습니다.

<html>
	<head>
    </head>
    
    <body>
    	<div id="first"> 첫번째 구역 </div>
        <div id="second"> 두번째 구역 </div>
    </body>
    
<html>
#first{
    background-color: #000000;
    width: 10px;
    height: 100px;
}

#second{
	background-color: #123456;
    width: 1000px;
    height: 1000px;
}

이렇게 선택자를 통해서 크기조절과 색 조절을 할 수 있습니다.

 

300x250

'Front-End > HTML' 카테고리의 다른 글

[HTML #4] HTML 옵션값 ui, li, ol, br,  (0) 2021.04.28
[HTML #3] 실제로 HTML 살펴보기  (0) 2021.04.27
[HTML #2] 기본적인 흐름 및 구조 파악하기  (0) 2021.04.26
[HTML #1] HTML 기초를 시작하자!  (0) 2021.04.25
'Front-End/HTML' Related Articles more
Comments