#7 - Split Landing Page

✨ CSS

변수 처리

자주 사용할 것 같은 색상이나 값들은 변수 처리를 하여 사용하는 것이 깔끔하고 유지 보수 측면에서 좋다.
나중에 값을 변경하고 싶을 때 이 코드에서만 수정하면 되기 때문!

:root {
  --left-bg-color: rgba(87, 84, 236, 0.7);
  --right-bg-color: rgba(43, 43, 43, 0.8);
  --left-btn-hover-color: rgba(87, 84, 236, 1);
  --right-btn-hover-color: rgba(28, 122, 28, 1);
  --hover-width: 75%;
  --other-width: 25%;
  --speed: 1000ms;
}

flex-grow

flex-grow: 1;

.container.hover {
	flex.grow: 3;
}

flex-basis를 제외한 가용공간을 flex 아이템끼리 비율을 가지고 나눠갖는 것이다.
어렵게 생각할 필요 없이 그냥 내가 지정한 비율로 나눠갖는다고 생각하면된다!!

white-space

이 속성은 줄바꿈에 대한 속성으로 기본 값은 줄바꿈이 되는 것이 기본값이다.

프로젝트를 하며 hover가 되면 반대쪽의 width 값이 줄어들어 글자가 들어갈만한 충분한 공간이 없게 되어 브라우저에서 알아서 줄바꿈을 실행하는 것을 볼 수 있다.

내가 보고 작성한 디자인에는 줄바꿈이 없었으므로 나도 강제로 줄바꿈을 없애기 위해 이 속성을 사용했다.

white-space: nowrap;

overflow

overflow: hidden;

이 속성은 거의 모든 프로젝트에서 쓰이는데도 내가 계속 헷갈려서 매 블로그마다 나오는 주제인 것 같다.

항상 제일 부모에서 사용하여 마진 병합 현상을 처리하기 위해서만 사용했는데 이번엔 자식 요소가 빠져나오는 것을 막기 위해 사용되었다.

hover가 되었을 때 반대쪽의 width는 줄어드는데 내가 위에서 줄바꿈을 안하도록 강제 설정을 했기 때문에 글자가 width보다 길어져서 삐져나오는 경우가 발생했다.

이를 해결하기 위해 내가 제일 먼저 생각해낸 것은 z-index 속성이었다.
단순히 hover안된 쪽의 글자만 삐져나오니까 hover된 곳에 z-index: 1을 설정하여 그냥 덮어버리면 되지 않을까? 라는 생각으로 진행했다.

이 해결방법의 문제점은 transition을 이용하여 애니메이션 속성을 사용할 때 자연스럽게 변환이 안되는 것이다.

배경은 hover에 따라서 자연스럽게 width가 변하는데 글자만 혼자 지속 시간 없이 먼저 변해버렸다.

결과적으로!!!
이 때는 부모 요소에 overflow: hidden을 사용하면 된다는 생각이 들었다.
부모에 이 속성을 적용하면 width < 글자 길이 일 때 삐져나가지 않고 안보인다.

background-size

실제로 사이즈를 지정하는 것이라기 보다는 배경 이미지를 어떻게 사이즈에 맞출지 라고 생각해야 한다.

• auto - 원래 배경 이미지 크기 만큼 표시 (기본 값)
• contain - 지정한 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 (이미지를 맞춤)
• cover - 지정한 요소를 다 덮도록 배경 이미지를 확대/축소 (이미지를 자름)
• 크기 값
• 백분율

💡 contain vs cover

• contain - 크기에 맞춰 이미지를 조정한다고 생각하면 된다.
• cover - 크기만큼 이미지를 자른다고 생각하면 된다.

contain 단점

각 이미지는 자신이 가진 사이즈가 있는데 contain을 사용하면 이미지가 가진 자체 비율을 생각하지 않고 우리가 원하는 크기에 맞추려고 이미지를 늘리거나 줄이거나 맘대로 하므로 화질이 깨질 수 있다.

cover 단점

이미지를 크기에 맞춰 잘라서 사용하므로 원하는 부분이 화면에 안나올 수도 있다.
이때는 두가지 방법으로 이미지의 내가 원하는 부분을 가져올 수 있다.

• background-position 조정
• object-fit 사용 (이미지 태그에 적용)

1. background-position
   이 속성을 사용하여 이미지의 표시 위치를 조정할 수 있다.
   예를 들어, 이미지를 중앙 또는 특정 위치에 맞추어 잘리지 않도록 조정할 수 있다.

.container {
  background-image: url("./images/example.jpg");
  background-size: cover;
  background-position: center center; /* 중앙으로 위치 조정 */
}

2. object-fit 사용 (이미지 태그에 적용)
   이미지를 <img> 태그로 삽입하고, CSS의 object-fit 속성을 사용하여 이미지가 컨테이너에 맞게 조정되도록 할 수 있다.

<div class="image-container">
  <img src="./images/example.jpg" alt="example" />
</div>

.image-container {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 컨테이너의 경계를 넘는 부분 숨기기 */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지를 컨테이너에 맞게 조정 */
}

object-fit에 대해 자세히 설명되어 있는 블로그 추천

::before 가상 클래스

배경 이미지를 이미 지정했는데 그 이미지에 색까지 추가하고 싶다면 가상 클래스를 사용하여 색상을 추가하는 방법이 있다.

아무 내용을 적지 않고 높이, 너비를 전체로 주어 원하는 색을 지정하면 우리가 넣은 이미지 위에 색상이 덮이게 된다.

.container.right::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--right-bg-color);
}

✨ JavaScript

나는 이 프로젝트를 CSS 에서 hover 기능을 사용하여 해결했지만 이 비슷한 기능은 JS에서도 구현할 수 있다.

const left = document.querySelector(".container.left");
const right = document.querySelector(".container.right");

left.addEventListener("mouseenter", () => left.classList.add("hover"));
left.addEventListener("mouseleave", () => left.classList.remove("hover"));

right.addEventListener("mouseenter", () => right.classList.add("hover"));
right.addEventListener("mouseleave", () => right.classList.remove("hover"));

mouseenter

마우스를 특정 요소 위에 올렸을 때 원하는 이벤트 실행

left.addEventListener("mouseenter", () => left.classList.add("hover"));

mouseleave

마우스가 특정 요소 위에서 떠났을 때 원하는 이벤트 실행

left.addEventListener("mouseleave", () => left.classList.remove("hover"));

classList.add()

hover가 될때 클래스를 미리 만들어 놓은 후 이걸로 추가하고 remove를 이용하여 클래스를 삭제하면 원할 때만 특정 클래스를 적용할 수 있다.

👀 그렇다면 CSS에서 hover를 사용하는 것과 JS에서 마우스 이벤트를 하는 것은 어떤 차이가 있을까?

제일 큰 차이점은 아마도 동적 스타일링에서 차이가 있을 것 같다.

CSS에서는 단순히 스타일을 변경하는 것만 가능하고, 복잡한 동작이나 상태 전환 등이 불가능하다. 또한 사용자 상호작용에 따라 특정 로직을 수행할 수 없다.

JS에서는 특정 조건에 따라 스타일이나 동작을 변경할 수 있으며, 다양한 이벤트와 상호작용하여 복잡한 작업이 가능하다. (애니메이션, 데이터 업데이트 등)

• 단순한 스타일 변경: CSS :hover
  간단하고 효율적이며, 성능이 좋다.
• 복잡한 동작이나 상태 변경: JavaScript mouseenter/mouseleave
  더 많은 유연성을 제공하며, 복잡한 상호작용과 로직을 구현할 수 있다.

결론

결국, 선택은 구현하려는 기능의 복잡성과 요구 사항에 따라 달라진다. CSS로 처리할 수 있는 간단한 스타일 변경에는 CSS :hover를 사용하고, 더 복잡한 로직이나 상호작용이 필요할 때는 JavaScript를 활용하는 것이 좋다.