HtmlCss. 4. 문제//크기와 배경색이 서로 다른 사각형 3개를 만들기

문제

정답

• 파란색은 창의 넓이에 따라 크기가 바뀜
  (바뀔때마다 넓이의 절반을 차지함)
• 초록색은 창의 넓이에 따라 크기가 바뀌지 않음

내 풀이

<div></div>
<section></section>
<nav></nav>

div{
  background : red;
  width : 100%;
  height : 80px
}
section{
  background : blue;
  width : 50%;
  height : 80px;
}
nav{
  background : green;
  width : 600px;
  height : 160px;
}

선생님풀이

<div></div>
<section></section>
<nav></nav>

div {
    background-color:red;
    height:50px;
}

section {
    background-color:blue;
    height:50px;
    width:50%;
}

nav {
    background-color:green;
    height:100px;
    width:800px;
}

핵심 사항

• div는 속성 자체로 100%를 가지고 있기 때문에 빨강네모는 속성을 따로 안줘도 됨
• px : 화소를 의미하며 숫자를 넣으면 그 크기 만큼 고정됨(화면크기를 줄여도 그 크기만큼 고정)
• % : 화면 크기를 100%로 보고 %설정의 비율만큼 설정이 됨 (화면크기를 줄이면 %비율에 따라 크기가 줄어들고 넓어짐

요약

px : 딱 고정됨
% : 화면의 비율에 맞게 유지하려고 한다.