CSS 변환(CSS Transformations)이란 요소의 모양을 이동하거나 변경하는 것을 말하며 예를 들어, 그 위에 커서를 올려놓을 때를 말한다.

이는

.card-container {
  background-color: rgb(255, 255, 255);
  width: 350px;
  margin: 50px auto;
  box-shadow: 3px 3px 10px rgb(201, 200, 200);
}

위와 같은 코드작성에서

.card-container:hover {
  transform: scale(1.02);
}

의 코드를 입력하게 된다면 CSS 요소의 모양을 변환하는 속성을 추가한 것이다.

CSS 전환(CSS Transition)이란 초기 상태에서 부드럽게 전환되는 것을 말한다.

예를 들어,

.card-container {
  background-color: rgb(255, 255, 255);
  width: 350px;
  margin: 50px auto;
  box-shadow: 3px 3px 10px rgb(201, 200, 200);
  transition: transform 1s ease-out 1ms;
}

와 같이 표현할 수 있으며

‘transition’은 전환을 정의하는 네 가지의 주요 영역이 포함 된 단축된 속성이다.

속성에 해당하는 내용은 다음과 같이 정리된다.

• ‘transform’ 부분은 속성(property)이 위치해야하는 부분이다.
• ‘1s’ 부분은 지속(duration)이 위치해야 하는 부분이며 첫 번째 자리에서 정의된 속성의 변화가 걸리는 시간을 지정한다.
• ‘ease-out’ 부분은 타이밍기능(timing function)이며 전환에 걸리는 효과를 지정하고, 지정하지 않는다면 기본 값으로 ‘ease’가 설정된다.
• ‘1s’ 부분은 지연(delay)이며 커서를 해당 요소 위로 이동하면 전환이 실행되는데 걸리는 시간을 지정한다.

이용하기 좋은 코드 모음

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate3d(10px, 0, 20px) rotateY(30deg);

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/transform

반응형 사이드바는 화면 크기에 따라 동적으로 조절되어 사용자 경험을 향상시키는 중요한 웹 디자인 요소이며 다양한 사용자의 기기에서 최적의 사용을 제공하는 데 중요한 역할을 한다.

HTML 구조 설정

<div class="sidebar">
  <h2>메뉴</h2>
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">소개</a></li>
    <li><a href="#">서비스</a></li>
    <li><a href="#">연락처</a></li>
  </ul>
</div>

사이드바의 기본 HTML 구조이다.

CSS 스타일링

.sidebar {
  width: 250px;
  height: 100vh;
  background-color: #f1f1f1;
  position: fixed;
  left: 0;
  top: 0;
  padding: 20px;
  transition: all 0.3s ease;
}

.sidebar h2 {
  color: #333;
  text-align: center;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  padding: 10px 0;
}

.sidebar ul li a {
  color: #333;
  text-decoration: none;
}

사이드바에 스타일을 적용한 모습이다.

반응형 디자인 구현

@media screen and (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }

  .sidebar ul li {
    display: inline-block;
    padding: 10px;
  }
}

화면 크기에 따라 사이드바가 반응하도록 미디어 쿼리를 사용한다.

이러한 방식으로 CSS를 사용하여 기본적인 반응형 사이드바를 구현할 수 있으며,

필요에 따라 디자인을 조정하고 기능을 추가하여 프로젝트에 맞게 변경할 수 있다.

반응형 웹 디자인이란 웹사이트 내의 컨텐츠, 레이아웃을 장치 크기에 따라 조정하는 것을 의미한다.

반응형 웹 디자인을 사용하지 않는다면 사용자에 따라 불편함을 겪을 수 있으며 문제는 다음과 같다.

픽셀을 고정하면 사용자 정의 옵션의 일부가 제한될 수 있다.
→ 픽셀이 고정된다면, 장치의 크기가 바뀌어도 픽셀의 크기는 바뀌지 않는다.

 따라서, 사용자에게 친화적이기 위해서는 더 동적인 유닛 유형의 사용이 필요하며 동적 유닛으로는 '%, em, rem(일시적 최상위 유닛)' 이 있다. 이러한 동적 유닛은 다음과 같이 설명할 수 있다

%

부모 요소의 크기와 관련이 있는 유닛이며, 정확하게는 폰트 크기의 속성을 의미한다.

→ 현재 요소의 폰트 크기에 %값을 설정하면 현재 작업하는 요소의 부모 요소의 글꼴 크기를 참조한다.

 이에 대한 단점으로, 부모 요소를 따르기 때문에 유닛이 많아지고 폰트 크기를 적용할수록 복잡해지기 쉽다.

em

다른 요소의 폰트 크기와 연관되어 있는 유닛이다.

 이는 ‘%’유닛과 마찬가지로 부모 요소를 따르는 성질로 혼란이 생길 수 있다.

rem

현재 요소의 폰트 크기가 최상위 요소(HTML)의 폰트 크기와 연결되어 있는 유닛이며 부모 요소와는 관련이 없다.

따라서, 최상위 요소의 폰트 크기를 입력하지 않는다면 폰트의 크기는 항상 사용자가 브라우저에 설정한데로 정해진다.