[JS 포트폴리오 만들기] img 태그와 다른태그 수직정렬 맞추기

2022.03.14

2022.03.16 추가

 

---

What's the issue?

• navbar에서 오른쪽의 logo 섹션과 왼쪽의 menu섹션의 수평이 맞지 않는다.
  logo가 상단에 붙어 있어서 이를 중간으로 내리고 싶다.
• 이미지 태그가 들어가면 다른 태그들과 수평축이 맞지 않는다.

---

How to solve?

1st trial: 좌표값을 주고 static하게 고정시킴

맨 처음 프로젝트였던 Youtube clone을 했을 때, 한 box안에 img 태그와 i 태그를 넣었는데 수직이 맞질 않았다.

text-align도 해봤지만 맞질 않았다.

그래서 그냥 두 태그를 따로 떼어 좌표값을 주고 static 하게 fix시켜 벼렸는데 그렇게 처리하기엔 뭔가 아쉬움이 남았다.

2nd trial: img태그의 css속성인 vertical-align을 사용

그러던 중 이번에 포트폴리오를 만들면서 로고 img와 text를 넣으며 똑같은 현상을 경험하게 됐다. 분명 해결방안이 있을것이라 생각하여 mozila img 의 css파트를 제대로 읽어보았다. 그리고 아래와 같은 내용을 발견하게 된다.

---

---

수직정렬이 기본적으로 베이스라인을 기준으로 하기 때문에 이미지의 아래쪽 모서리를 중심으로 텍스트가 정렬이 된다고 한다. 아! 그래서 텍스트가 자꾸 이미지 아래쪽으로 내려가 정렬이 되었나 보다.

위 방법대로 img css 속성에 vertical-align:middle; 값을 설정해줬다.

[css]

.navbar__logo img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  /* default: 아래쪽 모서리가 텍스크 기준선이 됨.
  따라서 다른 텍스트와 수직라인을 맞추기 위해 조건을 바꿔줘야함. */
}

우왓! 수직균형이 맞춰졌다.

Another problem

해결했다고 좋아하고 있었는데 또다른 문제가 생겨버렸다. 다른 메뉴들과 수평이 안 맞는 것이다...

3rd trial: margin: auto를 줌

logo가 div 태그로 이뤄져 있기에 margin이 자동으로 오른쪽으로 들어가게 된다.
margin을 auto로 주면 margin이 양 옆으로 골고루 퍼지게 되기 때문에 수평이 맞게 된다.

현재 logo와 menu에 flexbox(space-between)를 적용한 상태여서 로고가 차지하던 margin영역을 모두다 써버리는 상황이 발생해버렸다. 이러면 로고가 왼쪽정렬이 되지 않는다.

/* navbar */
#navbar {
  display: flex;
  justify-content: space-between;
}

.navbar__logo {
  font-size: var(--font-regular);
  margin: auto;
}

4th trial: transform & translate를 사용

중앙정렬을 하는 또다른 방법에는 tranform과 translate를 이용하여 좌표값을 지정해주는 방법이 있다.
translate의 %는 본인을 기준으로 %가 정해짐으로 (즉, logo box 가로, 세로값의 n%) 세로로 이동할 것이므로 %를 대략 맞춰보았다.

.navbar__logo {
font-size: var(--font-regular);
transform: translate(0, 30%); /세로로 30% 이동함/
}

오? 맞는다??
근데 뭔가 %를 '임의로' 맞춘 느낌이 있어 좀 찜찜하다.
(원랜 절반만 내려오면 될 것 같이 50%로 설정했는데 안 맞아서 30%로 바꿨다. 아마 왼쪽 모서리를 기준으로 값이 정해지다보니 50%가 왼쪽 모서리 기준으로 설정되어 더 내려왔던 것 같다.)

게다가 이렇게 logo box가 30%만큼 내려온게 뭔가 별로다. 나중에 스타일링 할 때도 좀 꺼림직하다.
분명 방법이 있을거다.

5th trial and solve. margin: auto를 세로에만 줌

포스팅을 하며 보니, margin: auto를 줬을 때, 가로와 세로의 정렬이 모두 맞춰짐을 볼 수 있었다.
그 말인 즉슨, 세로에만 margin: auto를 주면 세로정렬이 맞지 않을까?라는 생각이 들었다.
그래서 해봤다.

네?!! 된다구요?!!!!
와 진짜.. 눈물날 뻔...

드디어.. img와 다른 태그 요소들을 함께 사용할 때 세로 정렬을 맞추는 방법을 알게 되었다.
혹시 나중에 더 좋은 방법을 알게된다면 추가해야지.

6th trial and solve. flexbox 속성을 사용함

내가 왜 이 생각을 못했을까? 아니면 내가 flebox속성을 사용했었는데 적용이 안 됐어서 착각한걸까?

5th trial에서 문제를 해결했다고 생각했었는데 스크린 크기가 작아졌을 때를 대비한 반응형으로 만들다보니 문제가 생겨버렸다.

margin값을 auto로 두니까 아래와 같이 메뉴가 차지하는 모든 영역을 로고가 차지하면서 세로중앙정렬을 하게 되어버렸다.

아무리 생각해도 이건 아닌 것 같단 생각이 들어, 분명 방법이 있을 것으로 생각하여 다시한번 찾아보았다. 그리고 의외로 엄청 쉬운곳에서 방법을 찾았다. 그건 바로 Flexbox.

<nav id="navbar">
    <div class="navbar__logo">
      <img src="imgs/favicon.png" alt="logo">
      <a href="#">Eunne</a>

     ...

.navbar__logo {
  ...
  display: flex;
  align-items: center;

 

navbar__logo를 flexbox로 만든 후, 각 아이템의 수직정렬을 center로 맞추면 해결이었다. 아...

내 생각엔 내가 "align-items"가 아니라"align-content"로 설정했어서 수직정렬이 안 맞았던거 같다.

둘의 차이는 여기에서 확인 가능하다.

 

이렇게 드뎌!! 문제가 시원하게 풀렸다.ㅎㅎ 좋다.

 

---

Feedback

내가 너무 마음이 급했는지 제대로 문서를 읽어보지 않은 것 같단 생각이 들었다.
제대로 가는 것이 중요하니 너무 마음을 급하게 먹지 말고 차근차근 해결해나가도록 하자.

그리고 확실히 지금은 여러가지 인풋을 많이 넣어서 이것저것 응용해봐야하는 것 같다.