이미지 비율에 맞춘 크기 설정

제가 HTML과 CSS를 처음 배우기 시작했을 때, 이미지의 크기를 원하는 대로 설정하는 게 어찌나 힘들었는지 모르겠습니다. 지금은 이 방법으로 쉽게 이미지의 비율을 쉽게 조절하고 있습니다.

감싼 태그의 position은 relative로 주고,
태그의 자녀인 img 태그의 position을 absolute로 주는 방식입니다.

EX)

<div>
  <img src="url" alt="이미지" />
</div>

위와 같은 HTML 태그가 준비되었다고 가정하겠습니다.
이미지는 항상 16:9 비율로 맞출 계획입니다.

div {
 position: relative;
 border: 1px solid black;
 padding-bottom: 56.25%;
}
img {
 position: absolute;
 width: 100%;
 height: 100%;  
}

div에 relative를 주고 padding-bottom에는 56.25%를 줬습니다.
이렇게 하면 사진을 16:9 비율로 고정시킬 수 있게 됩니다.(50%는 2:1비율)
이제 img의 태그엔 absolute를 주고, 너비와 높이를 부모 태그인 div에 꽉 맞춰 설정해 주면 이미지의 사이지가 비율에 맞춰 변하게 됩니다.

혹시, 원래 사진의 비율과 정한 비율의 값이 맞지 않는다면 object-fit 속성을 잘 이용하면 됩니다.

MDN

hover시 메뉴 드롭하기

넷바와 관련된 CSS입니다.
이 기능을 자바스크립트로 처리하기보단
CSS로 처리하면 정말 간편하기 때문에 자주 애용하는거 같습니다 ㅎㅎ

<nav id="nav">
      <li>더보기</li>
      <ul class="menu">
        <li>고객센터</li>
        <li>자주묻는질문</li>
        <li>기타</li>
      </ul>
</nav>

#nav:hover .menu {
  display: block;
}

.menu {
  display: none;
}

이처럼 CSS 선택자를 이용해 메뉴 드롭 기능을 구현 할 수 있습니다.

툴팁 구현

넷바의 메뉴 드롭에 이어, CSS로도 툴팁을 구현할 수 있습니다.

<h3 data-tooltip='프로젝트에 활용했었으며 사용 가능합니다.'>Awesome</h3>

  [data-tooltip]:hover {
    position: relative;
  }

  [data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: 12px;
    z-index: 9999;
    opacity: 0;
    left: -9999px;
    transition: opacity 500ms;
  }

  [data-tooltip]:hover:after {
    opacity: 1;
    bottom: 100%;
    padding: 1em;
    width: 240px;
    left: -100%;
  }

CSS만으로도 자바스크립트의 부담을 덜 수 있습니다!

position의 정확한 가운데 정렬

가끔 position 속성을 이용해 top, left, right, bottom 등으로 위치를 조절하는 도중 중앙으로 정확하게 정돈하지 못해 불편함을 겪을 때가 있습니다.
이때, transform과 함께 사용하면 정확한 중앙 정렬이 가능합니다.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)

이렇게 하면 정확하게 중앙 정렬이 됩니다.
부모 태그 중에 relative한 속성이 있으면 그 태그 너비와 높이에 맞춘 중앙 정렬입니다.

position fixed 스크롤

position: fixed 속성은 넷바나, 사진 등을 고정시키려 할 때 많이 쓰는 속성입니다.

그런데 브라우저의 높이를 컨텐츠의 높이보다 낮게 줄여버리면 그만큼의 높이가 삭제되서 삭제된 컨텐츠를 보지 못하는 단점이 있죠.

만약 잘려도 상관없다면 굳이 신경쓸 필요 없겠지만 필수적인 컨텐츠라면 브라우저의 높이가 줄어 들었어도 스크롤로 볼 수 있게 만들면 더할나위 없이 좋을겁니다.

img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
img::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

width, height을 설정해 주고 overScroll 값을 줌으로써, 브라우저의 너비와 높이가 줄어들어도 스크롤로 모든 UI를 볼 수 있게 됩니다. 일단 스크롤이 가능하게 하려면 width와 height의 설정이 꼭 필요합니다.

되지 않는다면 top, left, right, bottom도 설정 하면 됩니다.
만약 스크롤이 되는 데, 어느 일정 부분이 자꾸 짤린다면 display 설정때문일겁니다.

... 말 줄임표

말 줄임표(...)는 가끔이지만 필요할 때가 상당히 많은 효과입니다.

<div class="word">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

.word {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

주의할 점은 block 형태이고, 너비가 정해진 형태여야 작동합니다.

말 줄임표에 대해서는

CSS로 글자 자르기
위 사이트를 참고하면 좋을 거 같습니다.

---