[HTML & CSS] <div> 안에 <div> float로 정렬하기

CSS 연습
<div> 안에 <div> 정렬

---

 

 워낙 레이아웃을 야매로 짜다 보니 나중에 요소를 추가 할 때마다 정렬이 제대로 들어맞지 않는 경우가 있다. 그냥 안 되는 건 아닐 것이다. 컴퓨터랑 코드는 잘못된 게 없다. 당연하게도 내가 코딩을 잘못한 거다... 여러 이유가 있겠지만 내가 주로 빼먹고 실수하는 것은 float를 지정해주지 않아서. 이번에도 한참 작업하다가 왜 이래? 이랬는데 찬찬히 살펴보니 또 같은 실수를 하고 있었다.

 아주아주 기초적인 거지만 더이상 까먹지 말자는 다짐으로 글을 남긴다. 😣

<div id="main">
  <div class="name_tx">
    <a href="">Lorem</a>
  </div>
  <div class="wrap">
    <ul class="menu">
      <li><a href="#">ABC</a></li>
      <li><a href="#">DEF</a></li>
    </ul>
  </div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
li {
  list-style: none;
}
a {
  font-size: 14px;
  text-decoration: none;
  color: #616161;
}
/* RESET */


#main {
  width: 100%;
  height: 48px;
  border-bottom: 1px solid #bbb;
  background: #fff;
  float: left;
}
.name_tx {
  padding: 10px 0px 0px 18px;
}
.name_tx > a {
  font-size: 21px;
}
.wrap {
  float: right;
  position: relative;
  width: 100px;
  height: 100%;
  display: inline-block;
}
.menu > li {
  line-height: 40px;
  width: 40px;
  background: #efefef;
  float: left;
  text-align: center;
}

 작업하던 것 일부. 블로그에 업로드 하려고 id랑 class 이름이나 속성값은 임의로 변경했다. 앞뒤로 다른 요소들이 있지만 문제가 있을 땐 그 부분만 똑 떼와서 뜯어본다. 이렇게 따로 떼와서 보면 문제 되는 부분이 뭔지 잘 보인다. 나중에 코딩이 익숙해지면 원본 파일 내에서 스크롤 내리면서 보기만 해도 쏙쏙 눈에 들어오려나? 아직은 좀만 길어져도 이게 뭔가 싶다.

 이렇게 뜯어와서 이 부분에 문제가 없는 것 같으면 부모 요소를 더 떼오고, 떼오고... 그렇게 문제가 어딘지, 뭘 해야 하는지 찾아봐야 한다.

ABC, DEF가 Lorem과 같은 열에 있어야 한다.

 위 코딩의 결과. ABC, DEF라고 적혀있는 리스트를 Lorem이라는 텍스트와 같은 열에 올리려고 한다. 원래 리스트가 없던 거라 갑자기 추가해놓고 보니까 저 모양이 되어 있었다. 처음엔 리스트에다 따로 포지션값도 넣어보고 float:right를 지정해보고 두 요소에 너비를 지정하는 등등 별짓을 다 해봤는데 그래도 원하는 모양이 안 나와서 한참을 고민하다 그 이전 요소 정렬에 문제가 있는 것이 아닐까 싶어 float: left를 위에서부터 하나하나 다 넣어봤다.

.name_tx {
  padding: 10px 0px 0px 18px;
  float: left; /* 왼쪽에 붙도록 정렬 */
}

해결!

 class="name_tx", 그러니까 저 왼쪽 <div>에다가 정렬을 넣었더니 됐다. 지정을 안해주면 저 가로 너비를 다 잡아먹는 건가? 정렬 지정해주는 게 필요하다는 건 알겠지만 왜 지정 안 해주면 왜 다른 애를 붕 뜨게 만드는지에 대해선 잘 모르겠다.

기본적으로 이건 정렬이다, 이건 뭐다 해도 응용할 때는 다른 것과 함께 생각해야 해서 그런지 잘 꼬인다.

 마지막 스타일에 세미콜론을 안 붙여도 에러는 안 뜨지만 나중에 수정 할 때를 고려해 세미콜론을 붙여주는 것처럼, 앞으로 css를 작업할땐 나중에 다른 요소를 추가 할 것도 염두에 두고 코딩하는 것이 좋을 것 같다.