px, %

<div class="container">
  Container
  <div class="parent">
    Parent
    <div class= "child">Child1</div>
    <div class= "child">Child2</div>
  </div>
</div>

body *{
  border : 2px solid;
}
.container{
  width : 600px;
}
.parent{
  width : 300px;
}
.child{
  width : 150px;
}

다음과 같이 작성을 하면, 밑에와 같은 결과가 나온다.

px로만 사용해서 크기 설정 했을 경우

 

 

 

 

하지만 %로도 똑같이 만들 수 있다. %단위는 부모의 영향을 받기 때문에, 부모요소를 제외하고 자식요소를 수정하면, 부모태그 크기에 따라서 자식태그가 크기를 알아서 조절해준다. 위의 소스코드를 보면 알 수 있는것은, 자식태그들은 부모태그 크기의 절반이다. 이로서 50%로 바꿔 써 주어도 결과값은 똑같이 나온다.

body *{
  border : 2px solid;
}
.container{
  width : 600px;
}
.parent{
  width : 50%;
}
.child{
  width : 50%;
}

자식요소 크기를 %로 사용해서 크기 설정 해도 같은 결과 값