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)의 폰트 크기와 연결되어 있는 유닛이며 부모 요소와는 관련이 없다.

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

미디어 쿼리는 CSS 코드이며 이를 CSS 파일에 추가하는 방법은 다음과 같다.

@media(min width or max-width: 1200px) {
p{
font-size: 2rem;
}
}

위와 같은 코드를 입력하면 해당 코드가 브라우저에 미디어 쿼리가 존재한다는 것을 알린다.

위의 예시에서 적용된 픽셀값은 장치의 넓이를 의미하며, 미디어 쿼리가 실행될 화면의 넓이이다.

이 때, 픽셀(px) 대신에 em과 rem같은 유닛도 사용 가능하다.

이는 미디어 유형에 대한 정보를 수집하거나 query(질문)해서 사용자가 웹사이트를 이용할 때, 사용하는 장치의 유형과 사양 정보를 수집하며 장치의 유형이 어떤 기준에 부합하면 미디어 쿼리 안에 정의했던 코드가 실행된다.

미디어 쿼리 코드의 한계점 설정에서 도움이 될만한 픽셀 정보

Smartphone 480px
Tablet 768px
Notebook 1024px
Desktop Computer 1200px
TV >1200px

위와 같은 기준은 절대적인 기준이 아닌 참고용이다.

각 요소와 CSS 모두 박스에 둘러 쌓여 있으며 이는상호작용한다.

콘텐츠(Contents)

‘패딩(padding)’이라는 박스 테두리 사이의 공간으로 감싸져 있으며 이 또한 크기 설정이 가능하다.

여백(margrin)

여백은 콘텐츠를 표시하는 방식이기 때문에 실제 요소와는 관련이 없다. 다른 요소와 관련된 공간의 여백을 부여한다.

경계(Border)

‘border’의 속성은 세 가지 주요 정의가 있으며

첫 번째로는 테두리의 넓이가 있다.

얇은 테두리를 지정하고 싶다면

{
border: 1px;
}

로 가능하다.

두 번째로는 테두리 유형이며 이는 ‘dashed’라는 점선 테두리와‘solid’라는 실선 테두리가 있다.

세 번째로는 테두리의 색상을 지정할 수 있으며 색상값을 입력한다.

 이를 HTML과 CSS 내부에서 표현하면

• HTML

<p>The Box Model</p>

• CSS

p{
	padding: 2px 4px 2px 4px;
	border: 2px dashed black;
	margin: 8px 6px;
}

와 같이 표현이 가능하며, 이에 대해 설명하자면

‘padding’의 숫자 4개는 각각 상부, 우측, 하부, 좌측에 대한 설정값이며

‘border’는 각각 경계의 크기, 테두리 유형, 색깔에 대한 설정값이고

‘margin’은 각각 요소의 상부와 하부, 좌측과 우측의 여백값을 의미한다.