HTML_CSS_022_tag_vertical-align

vertical-align : 수직정렬

• inline-block으로 작업시
• html에서 enter에 의한 공백이 생기는 문제점 발생
• 사이즈가 딱 맞을 경우
• font-size = 0 로 해결 가능 // 문자 적을 수 없음
• vertical-align 이용한 정렬 가능
• vertical-align : top
  • 요소의 맨 상단을 줄에서 가장 큰 요소의 맨 위에 맞춤
• vertical-align : bottom
  • 요소의 맨 하단을 줄에서 가장 낮은 요소에 맞춤

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

section {
  width:200px;
  height:200px;
  border:10px solid red;
  /* 폰트 사이즈를 변경으로 공백 제거를 할 수 있다. */
  /* font-size: 0; */
}

section > div {
  display:inline-block;
  width:50%;
  height:50%;
  background-color:black;
  /*  */
  vertical-align : top;
}

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

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

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

---

inline-grid 클래스를 CSS로 만들어 두어 필요 순간마다 적용한다.

<section class="inline-grid">
  <div>텍스트</div>
  <div>텍스트</div>
  <div>텍스트</div>
  <div>텍스트</div>
</section>

.inline-grid {
  font-size:0;
}

.inline-grid > * {
  display:inline-block;
  vertical-align:top;
  font-size:1rem;
}

body {
  margin:0;
}

section {
  border:10px solid red;
  height:500px;
}

section > div {
  width:calc(100% / 2);
  height:calc(100% / 2);
  background-color:black;
  color:white;
  font-weight:bold;
  text-align:center;
}

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