div와 태그에 style속성 추가하기

div 는 주로 레이아웃을 구성하기 위해서 틀을 구역의 틀을 잡는 용도로 사용한다. 콘솔창을 눌러서 보면 우리가 보는 많은 페이지들이 div로 구성된 것을 볼 수 있다. 

우측의 콘솔창을 보면 naver는 무수히 많은 div로 만들어 진 것을 확인 할 수 있다. 

 

이 div를 html에 선언하면 처음에는 아무것도 보이지 않는다. 그러나 div에 무언가를 작성하고 div를 여러개 적어보면 뭐가 달라지는지 볼 수 있다. 

 

<div>안녕하세요</div>
<div>div입니다.</div>

 

div가 나눠지는 모습

 

div로 텍스트를 작성하니 각 div의 구역이 나눠졌다. 이와 같은 속성을 display : block 속성이라고 하는데 이 div의 구역 만큼 화면의 넓이를 차지하여 작성된 다음 태그가 아래로 내려가게 된다. 

 

div에 style 적용시키기 

html에서 div태그를 꾸미기 위해서는 태그에 style어트리뷰트를 추가해야한다.  

 

<div style="border: 1px solid black">

 

style어트리뷰트에 원하는 스타일을 추가하려면 해당 css를 작성하면 된다. 

 

border속성을 추가 하여 div 테두리에 border 가 그려진 모습

 

만약 스타일을 추가하고 싶다면 해당 css가 끝날때 ' ; ' 세미콜론을 붙여 다음 css를 작성하면 된다. 

 

 <div style="border: 1px solid black; border-radius: 100px; height: 100px; width:100px">

 </div>

 

태그는 어떠한 모습을 하고 있더라도 사실은 사각형의 상자에 존재하고 있다. 그렇기 때문에 스타일링을 통한 특별한 방법 없이는 서로의 영역을 침범할 수 없다.