-
[TIL] CSS 기능들 (custom variable, transition)TIL-sparta 2024. 5. 8. 22:23
> 팀 프로젝트 제출 전 날 동안 CSS를 수정하면서 배운 부분들을 정리해보았다.
학습 키워드: CSS, custom variable, transition
1. Custom Variable
1) What is it?:
- CSS에서도 임의의 변수를 지정하여 다른 property 들에서 값으로 사용할 수가 있다.
2) How does it work?:
:root { --scroll-width: 25px; --full-width: calc(100vw - var(--scroll-width)); --half-width: calc(50vw - var(--scroll-width)); }- 위는 과제 css 파일의 일부다. :root는 이 document의 root element, 즉 <html> element를 의미(specificity가 다르다고는 함)한다. Variable의 이름 앞에는 -- 를 붙이고, 단어 구분마다 - 를 하나 붙이는 식으로 변수명을 작성한다. 만들어둔 변수를 호출할 때는 var() 함수를 사용하고, 괄호 안에 변수명을 적어준다.
- 이렇게 만들어진 변수는 다른 stylesheet에서도 호출이 가능하다. 만약 var()을 사용해 호출하는 변수가 존재하지 않는 변수이거나, 값이 올바르지 않은 경우 이 변수를 사용하는 property가 무효화된다. 예를들면 --scroll-width라는 변수의 값이 thin이나 rgb 값이면 calc() 함수가 계산을 할 수 없고, 잘못된 값이 들어가기 때문에 --full-width와 --half-width를 사용하는 모든 property가 동작하지 않게 된다.
3) Why use it?:
- 프로젝트의 style을 수정하던 중 viewport의 값 (100vw)으로 너비를 설정하면 스크롤 바 크기를 고려하지 않고 너비를 지정하여 element의 일부가 스크롤 바에 가려진다는 사실을 알게됐다. 이러한 현상을 해결하기 위해 너비에 일정 값을 빼주는 작업을 해야했는데, 이 계산이 stylesheet의 여러 부분에서 반복되기에 알아보다가 이렇게 custom variable을 생성하여 사용할 수 있다는 것을 배웠다.
2. Transition
1) What is it?:
- CSS의 값이 변경될 때 transition 효과를 줄 수 있는 property다.
2) How does it work?:
.card-container { background-color: transparent; width: var(--full-width); height: fit-content; overflow-y: hidden; text-align: center; visibility: visible; opacity: 100%; transition: all 0.5s; } .info-review-wrapper { /* display: none; */ position:absolute; visibility: visible; opacity:100%; /* transition-property: display; */ transition: all 0.5s; } *.disabled { /* display: none; */ visibility: hidden; height: 0vh; opacity: 0%; /* transition-property: display; */ }- 역시나 프로젝트 stylesheet의 일부를 발췌했다. 맨 위에서 두 개의 class는 각각 하나가 보여질 동안은 다른 하나가 보이지 않아야하는 element들에 사용되고 있다. 그 '보이지 않게' 하는 작업을 disabled 클래스가 해준다. Javascript에서 이 disabled 클래스를 toggle 해주면서 사용하는데, transition property를 이용하면 toggle 하면서 바뀌는 값 들을 대상으로 transition 효과를 추가할 수 있다.
- transition all 1s 으로 설정되어있는데, 이는 transition이 발생할 때 'all 1s', 즉 변경되는 모든 값에 대해 1초 간 transition을 진행한다는 뜻이다. 여기서 all 자리에 다른 property의 이름을 적으면 해당 property만을 대상으로 transition이 진행된다. 참고로, display의 none 처럼 transition의 rendering에서 제외되는 경우가 존재한다. 처음에 이 값을 변화시키려고 했으나 작동을 하지 않아서 찾아보다가 알게 되었다.
- transition-timing-function이나 transition-delay 등의 보조 property들이 존재하므로 창의적으로 활용하면 여러가지 형태의 transition 효과를 만들 수 있다.
3) Why use it?:
- Transition 효과가 없이 화면이 넘어가면 밋밋한 느낌이 든다. 이번 프로젝트에서도 카드 클릭 후 영화 정보로 이동하는 부분이 밋밋한 느낌이어서 개선할 방법을 궁리하다가 개인 과제 때 카드 뒤집기에 사용한 transition을 도입했다. 또한 예전에 어디선가 UI가 transition 없이 휙휙 바뀌게 되면 UX적인 관점에서 봤을 때 제대로 인식되지 않아 유저가 헷갈릴 수 있다거나 하는 이야기를 들은 적이 있다. 별 것 아닌 것 같지만 의외로 중요한 포인트라고 생각한다.
--
REFERENCES:
Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the @property at-rule or by custom property syntax (
developer.mozilla.org
> MDN, CSS custom properties (variables)
Using CSS transitions - CSS: Cascading Style Sheets | MDN
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the c
developer.mozilla.org
> MDN, CSS transitions
CSS Transitions
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
> w3school, CSS transitions
728x90'TIL-sparta' 카테고리의 다른 글
[TIL] 스파르타) CS 강의 수강 (TCP/IP, HTTP, HTTPS) (0) 2024.05.10 [TIL] 스파르타) CS 강의 수강 (OSI model), 프로젝트 복기 조금 (0) 2024.05.09 [TIL] 스파르타) Project3 마무리 (Dependency Injection) (0) 2024.05.07 [TIL] 스파르타) CS 강의 수강 (HashMap, HashSet) (2) 2024.05.06 [TIL] 스파르타) CS 강의 수강 (Character Encoding, Numbers Representation) (0) 2024.05.05