국비 지원 IT(웹앱개발) 취업반 강의 33일차 (HTML, CSS, JS)

vertical align 문제를 다시 보면

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

section {
  width:200px;
  height:200px;
  border:10px solid red;
  font-size: 0; 
  text-align: center;
}
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;
}

이렇게 풀었는데 여기서 폰트 사이즈 0을 주지 않고도 푸는 방법이 있었다. (완벽하지는 않다.)
일단 주지 않으면

이런 모양인데

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

div의 공백을 없애줘도 해결이 가능하다.

그런데 코드를 정렬하기 위해서 cmd + shift + f 만 눌러버려도 다시 도로 아미타불이다.
사각형 사이에 흰색 공간은 덤이다. (코드를 잘 보면 vertical을 지웠다)

결국 폰트 사이즈 0으로 돌아오긴한다. 공백도 없앤다. 근데 div안에 글을 쓰면 글이 보이지 않는 문제, 그리고 div 태그가 밀려서 다시 section 밖으로 나가는 문제가 있다.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

section {
  width:200px;
  height:200px;
  border:10px solid red;
  font-size: 0; 
  text-align: center;
}
section > div {
  width:50%;
  height:50%;
  background-color:black;
  display: inline-block; 
  vertical-align: middle; 
  font-size: 4rem;
}
section > div:nth-child(2) {
  background-color:green;
}
section > div:nth-child(3) {
  background-color:pink;
}
section > div:nth-child(4) {
  background-color:gold;
}

이 때 vertical align을 사용해서 밖으로 나오는 div를 옮겨주고 section의 폰트 사이즈를 상속 받던 div에게 폰트 사이즈를 다시 말을 해주면 글자까지 정상적으로 나온다.

vertical-align

div {
vertical-align: baseline; /* vertical-align 의 기본 값*/
vertical-align: top;    /* 텍스트 라인의 윗줄이 기준 */
vertical-align: middle;    /* 텍스트 라인의 중간이 기준 */
ertical-align: bottom;    /* 텍스트 라인의 바닥이 기준 */
vertical-align: sub;    
vertical-align: text-top;    
)

sub 값은 해당 요소를 기준 텍스트보다 약간 아래로 이동. 예를 들어, 화학식 H₂O에서 '₂'를 아래첨자로 표시하는 경우 vertical-align: sub;을 사용.
text-top 값은 해당 요소의 상단을 부모 요소의 텍스트 상단에 맞춘다.

이걸 편하게 하는 방법이 css에 해당 코드를 만들어놓고, html에 해당 클래스를 써주는 방법이다.

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

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

그 때 css 노말라이즈랑 비슷한 느낌이다.
css에는 이런 유사한 것들이 세가지가 있다고 하는데 노말라이즈, 라이브러리, 커스텀이라고 한다. 저건 라이브러리.

그래서 이걸 황용한 문제를 풀어보았다

<section class="box-1 inline-grid">
  <div class="w-1/6">1</div>
  <div class="w-1/6">2</div>
  <div class="w-3/6">3</div>
  <div class="w-1/6">4</div>
  <div class="w-5/6">5</div>
  <div class="w-1/6">6</div>
  <div class="w-3/6">7</div>
</section>

/* 노말라이즈 */
body,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 라이브러리 */
.inline-grid {
  font-size: 0;
}

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

.w-1\/6 {
  width: 16.666%;
}

.w-2\/6 {
}

.w-3\/6 {
  width: calc(16.666% * 3);
}

.w-4\/6 {
}

.w-5\/6 {
  width: calc(16.666% * 2);
}

.w-full {
}

/* 커스텀 */

.box-1 {
  border: 10px solid red;
}

.box-1 > div {
  height: 300px;
}

.box-1 > div:nth-child(1) {
  background-color: red;
}

.box-1 > div:nth-child(2) {
  background-color: orange;
}

.box-1 > div:nth-child(3) {
  background-color: yellow;
}

.box-1 > div:nth-child(4) {
  background-color: green;
}

.box-1 > div:nth-child(5) {
  background-color: blue;
}

.box-1 > div:nth-child(6) {
  background-color: navy;
}

.box-1 > div:nth-child(7) {
  background-color: purple;
}

뭔가 어거지로 푼 것 같긴한데 일단 모양을 맞으니까.

어떤 모양이냐면.

이런 모양이다.
예시를 보고 몇등분인지 계산해서 해당 영역에 그만큼 주니까 쉽게 풀렸다. (번호는 정확한 위치를 알아보려고 일부러 넣었다.)

라이브러리는 다른 곳에서도 활용할 수 있게끔 만들려고 하는 것이다. 그래서 원래 의도는 라이브러리에는 특정 값을 다 넣어두고 html의 클래스 명을 변경해주는 것 (이렇게 하긴 했는데 라이브러리가 들쭉 날쭉에 모든 값을 채워주지 않았다.)

<section class="box-1 inline-grid">
  <div class="w-1/6">1</div>
  <div class="w-1/6">2</div>
  <div class="w-3/6">3</div>
  <div class="w-1/6">4</div>
  <div class="w-2/6">5</div>
  <div class="w-1/6">6</div>
  <div class="w-3/6">7</div>
</section>

/* 노말라이즈 */
body,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 라이브러리 */
.inline-grid {
  font-size: 0;
}

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

.w-1\/6 {
  width: 16.666%;
}

.w-2\/6 {
    width: calc(16.666% * 2);
}

.w-3\/6 {
  width: calc(16.666% * 3);
}

.w-4\/6 {
  width: calc(16.666% * 4);
}

.w-5\/6 {
  width: calc(16.666% * 5);
}

.w-full {
  width: 100%;
}

/* 커스텀 */

.box-1 {
  border: 10px solid red;
}

.box-1 > div {
  height: 300px;
}

.box-1 > div:nth-child(1) {
  background-color: red;
}

.box-1 > div:nth-child(2) {
  background-color: orange;
}

.box-1 > div:nth-child(3) {
  background-color: yellow;
}

.box-1 > div:nth-child(4) {
  background-color: green;
}

.box-1 > div:nth-child(5) {
  background-color: blue;
}

.box-1 > div:nth-child(6) {
  background-color: navy;
}

.box-1 > div:nth-child(7) {
  background-color: purple;
}

이게 원래 올바른 의도
이제 저기 라이브러리 주석이 있는 곳을 원하는 html에 갖다 붙히면 그 사이즈 만큼을 줄 수 있게 된다.

다음으로 특정 영역을 정할 때 이야기다.
예를 들어서 창의 반을 특정 색으로 칠하고 싶다면 html까지 높이를 명명해주어야한다.

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

body {
  margin: 0;
}
html, body {
  height: 100%;
}

이렇게 하면 창을 줄여도 늘려도 50퍼센트 영역을 유지한다. 퍼센테이지로 유지하고 싶다면 html에 값을 주어야된다.

아 그리고 style이라는 것도 나왔는데 html에 바로 값을 넣어주는 것이다. css에 덮어 쓰려고 해도 style이 우선순위가 더 높다.

또 두가지 방법을 보자.

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

article {
  background-color:gold;
  height:50%;
}
html, body, section, div, nav {
  height: 100%;
}

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

vh라는 단위가 새로 나왔는데 이건 css 단위를 참고하자.

• inline-grid

inline-grid {
    font-size: 0;
}
inline-grid > * {  
font-size: 1rem;  
display: inline-block;  
vertical-align: top;  
box-sizing: border-box;  
}

See the Pen 50퍼센트 영역 나누기 by qBlackBirdp (@qBlackBirdp) on CodePen.

여담으로 이걸 코드를 계속 이렇게 작성할 필요가 없었네, 다른 블로그들 보니까 코드펜 자체를 가져오는걸 하길래 어떻게 하나 검색해보고 적용했다.

암튼 이걸 활용해서 다음 문제를 풀어봤다.

See the Pen Untitled by jhs (@jangka44) on CodePen.

내가 쓴 코드는 이렇고 예시 사진을 보면,

이런 모양이다.

vw까지 써서 높이의 값까지 정해줬다. 모양은 맞긴 했는데, 어차피 높이는 같으니까 높이를 정해주는 걸 따로 만드셨다 강사님은.

See the Pen Untitled by jhs (@jangka44) on CodePen.

다음으로는 box-sizing: border-box; 에 대한 것 이다.

See the Pen Untitled by jhs (@jangka44) on CodePen.

이걸 활용해서 문제를 풀어보면

See the Pen Untitled by qBlackBirdp (@qBlackBirdp) on CodePen.

box-sizing: border-box;가 없다면 border가 픽셀을 나눠먹고 있기 때문에 좌측에 빈 공간이 생긴다. 이런 의도치 않은 빈 공간을 없애기 위해서

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

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

이렇게가 inline-grid 완성.

다음으로 저번에 했던 해당 사이트를 모작하는 것을 했는데 쉽지 않다 매뉴 구성까지는 어떻게 했는데 이미지 모양들을 따라하는데 좀 어려움을 겪었다.

See the Pen bnx 모작 by qBlackBirdp (@qBlackBirdp) on CodePen.

어떻게 모양은 이렇게 잡긴 했는데 이후에 뭔가 잘 원하는대로 안된다.

강사님 코드를 보니까 난 html 구조 잡는 것 부터 틀려먹었다.

See the Pen Untitled by jhs (@jangka44) on CodePen.

이거 보고 참고 해서 공부해야겠다. 강사님 사이트에는 단계별로 나누어져 있다.

암튼 이렇게 수업 끝!