코드 조각-Android, Java, Spring, JavaScript, C#, C, C++, PHP, HTML, CSS, Delphi

CSS div의 크기 조정에 대해(div의 width, height 속성에 대해)

웹 페이지를 구성함에 있어서 보이지 않는 box 형태로 다양한 레이아웃을 구성할수 있게 도와주는 div의 가로의 넓이를 지정하는 속성이 width, 세로의 높이를 지정하는 속성이 height이다.

이들 속성에 값을 지정할 때의 가장 대표적인 단위가 pixel이다.

만일 percentage로 지정하면 div의 크기는 브라우저의 창 크기에 상대적인 크기로 설정되고

em단위로 지정하면 div 안에 있는 글자(text)의 크기에 기반해서 dive의 크기를 설정한다.

요즘은 화면의 크기가 다양한 기기들에 대응하기 위해 percentage나 em 단위를 많이 사용하는 추세이다.

아래는 HTML 코드 조각이다.

<div>

   <p>'그들이 움직인다'…어나니머스, IS에 '선전포고'

         "전세계 회원들이 너희를 추적할 것이다. 당신들을 찾아내 도망가지 

         못하게 할 것이라는 걸 알아야만 한다."</p>

</div>

아래는 CSS 코드 조각이다.

div.box {

height: 300px;

width: 300px;

background-color: #99ccff;}

p {

height: 75%;

width: 75%;

background-color: #ccff66;}

위의 코드에서 div의 가로 길이가 300pixel, 세로 높이가 300pixel이고

div 안에 있는 paragraph가 75%인데 이는 paragraph가 속해 있는 div의 크기 300pixel에 대한 75%이다.

따라서 paragraph의 크기는 225pixel에 해당된다.