CSS) px, %

1. px
절대적으로 고정하는데 사용하는 단위

css

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

 

html

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

 

출력

 

 

 

2. %
부모단위의 영향을 받아서 %가 적용된다.

css

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

 

html

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

 

출력