웹(HTML, CSS, JS)(07.22) - vertical align, 화면 비율 조절, vh, box-sizing

문제

원하는 답

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

section {
  width:200px;
  height:200px;
  border:10px solid red;
  line-height: 0;
}

section > div {
  width:50%;
  height:50%;
  background-color:black;
  display: inline-block;
}

section > div:nth-child(2) {
  background-color:green;
}

section > div:nth-child(3) {
  background-color:pink;
}

section > div:nth-child(4) {
  background-color:gold;
}

• 문제의 원인은 html에 작성한 <div></div> 와 <div></div>의 공백이다. 이를 제거하기위해 사이를 위의 해답처럼 제거하거나 <!-- --> 사이 주석처리를 하여 당장에 해결을 할 수 있지만, 글이 길어지고 html 자동 정리를 처리했을 경우 문제가 발생할 것이다.
• 그리고 inline-block은 정료한 작업이 불가하다. 글자, 줄 간격(행간)으로 인해 공백이 보인다.

section {
  width: 200px;
  height: 200px;
  border: 10px solid red;
  font-size: 0;
}

section > div {
  width: 50%;
  height: 50%;
  background-color: black;
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
}

font-size를 0을 주어 공백을 없애고 줄 간격을 없앨수있지만, div에 글을 입력할 경우 font-size가 0이므로 div에 글이 보이지 않고, 깨지게 된다.
따라서 verticla-align 수직 정렬을 시켜준다. vertical-align을 주지 않고 div에 글을 일부에만 줬을 때 깨지게 되는데 이유는, 정렬을 맞출 contents가 없어서 깨지게 된다.

---

 

화면의 높이 대비 비율 조절

<section>

</section>

abc

html {
  height: 100%;
}

body {
  height: 50%;
  margin: 0;
}

section {
  height: 50%;
  background-color: gold;
}

html height : 100%는 보이는 창크기를 나타낸다.

<section style="height:100%">
  <div style="height:100%">
    <nav style="height:100%">
      <article style="height:50%; background-color:skyblue;"></article>
      <article style="height:50%; background-color:pink;"></article>
    </nav>
  </div>
</section>

html,
body {
  height: 100%;
}

article {
  background-color: gold;
}

• article에 style로 직접 지정해준다.
• style에 지정하고 css에 지정하면 style이 우선순위가 더 높기에 css에 지정한 background-color가 보이지 않는다.

 

 

CSS Unit - rem, vh, vw

rem

• root em, html에 정의된 사이즈 기준으로 배수

vh, vw

• verticah height, verticla width로 화면의 크기의 높이와 너비에 비례하다.

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

article {
  background-color:gold;
  height:50vh;
}

---

 

box-sizing

<div class="box-1 box-1-2">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</div>

<div class="box-2">

</div>

<div class="box-3">

</div>

.box-1 {
  width: 100px;
  height: 100px;
  margin-top: 100px;
  background-color: red;
}

.box-1-2 {
  border: 10px solid gold;
  padding: 10px;
  box-sizing: border-box;
}

.box-2 {
  width: 100px;
  height: 100px;
  background-color: #afafaf;
}

.box-3 {
  width: 100px;
  height: 100px;
  background-color: #1f1f1f;
  border: 10px solid red;
}

• box-sizing 기본값은 content-box이다.
• box-sizing:border-box에 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다.