반응형 Style Sheets20 [SCSS] 불러오기는 @use를 사용하도록 하자 (@import vs @use) 불러오기 (@import, @use)SCSS는 스타일시트를 더 효과적으로 관리하고 모듈화 하기 위해 두 가지 주요 지시어를 제공하는데, 그게 바로 @import와 @use 지시어이다.이 두 지시어는 비슷한 목적을 가지고 있지만 @import는 @use와 비교하여 아주 오래전부터 사용되어온 방식이다.물론 @import가 오래된 기술이라고 해서 @import말고 @use를 사용해야 한다는 이유는 아니다.(둘의 차이를 어느정도 알고 싶다면 공식문서를 살펴보거나 내가 작성한 글을 읽어봐도 좋다. @import / @use) 공식문서를 본 사람은 알겠지만 애초에 공식문서에서 @import 대신에 @use를 사용하는 것을 권장한다.⚠️ Heads up!The Sass team discourages the conti.. 2024. 6. 19. [SCSS] 불러오기 (@use / @forward) 불러오기 (@use)scss에서의 '@use'지시어는 다른 scss파일을 현재 파일로 가져와서 사용할 수 있다./* @use "layout.scss" */@use "layout"; '@use'는 가져온 파일의 모든 내용을 로컬 스코프로 가져오며, 사용할 때 네임스페이스를 통해 접근해야 한다.이를 통해 충돌을 방지하고, 코드의 가독성을 높일 수 있다./* src/_corners.scss */ $radius: 3px;@mixin rounded { border-radius: $radius;}/* style.scss */ @use "src/corners";.button { @include corners.rounded; padding: 5px + corners.$radius;}별칭 (Alias)네임스페이스를.. 2024. 6. 19. [CSS] 모바일 브라우저에서 발생한 sticky 하단 고정 오류 버튼이 자유분방하게 움직인다고? 회사에서 업무를 진행하던 도중 놀랍게도 말썽꾸러기인 사파리 환경이 아니라 크롬, 삼성 브라우저에서 이슈가 발생하였다. QA팀 제보로 알게 되었는데, bottom: 0으로 박아두었던 버튼이 자유분방하게 돌아다닌다는 것이다. 놀랍게도 position: sticky / bottom: 0px 의 조합으로 구현된 footer버튼이 전혀 예상하지 못한 방향으로 동작하였다. 원인 파악 사실 이 글을 작성하는 시점에서도 정확한 원인을 알 수 없다는 게 좀 슬프다. 단지, 브라우저의 뷰포트를 잘못 인식하는게 아닌가 "추측"만 할 뿐이다. 특히 이는 본문 시작할 때 언급한 것 처럼 크롬, 삼성브라우저 중에서 유독 삼성브라우저에서 재현이 잘된다. 크롬의 경우에는 "특정 버전"에서만 stick.. 2024. 3. 22. [SCSS] Sass Variable in calc() function Error SCSS문법을 사용하여 스타일을 주던 중 calc() 함수에 SCSS변수를 넣어 계산을 하려고 하였더니 빌드 오류가 발생하였다. 이렇게 사용하면 안 되는 건가? 싶어 레퍼런스 조사를 해보았더니 SCSS변수를 calc() 함수에 넣어서 사용하려면 "보간 문법"을 사용해야 한다고 한다. 이렇게 까지 귀찮을 일인가? 고작 변수를 가져다 계산에 사용하려는 건데 보간문법(#{})까지 써야 한다니 여간 불편한 게 아닌가 싶었다. 그리고 몇 가지 의문들이 해결이 안되었다. 참고한 레퍼런스의 sass버전을 알 수 없었다. 이게 버전 문제가 아닌가라는 의문도 들었고, 우리랑 같은 환경이 아닌 이상 언제든지 상황은 바뀔 수 있다고 생각된다. sass 개발진들이 이렇게 귀찮은 것들을 그대로 방치했을까? 말 그대로다. 빠르.. 2024. 3. 19. [CSS] aspect ratio - 요소 가로세로 비율 지정하기 aspect-ratio? 언제 나왔는지는 모르겠으나 과거에는 css에서 비율로 요소를 조절할 수 없었다. 하나 이제부터 aspect-ratio 속성을 사용하여 비율을 지정할 수 있게 되었다. aspect-ratio 속성은 주로 이미지나 동영상을 비율대로 줄이거나 늘리는데 활용되며 매우 직관적인 특징이 있다. 해당 속성으로 인해여 이제 요소를 width/height로만 지정하던 시대가 저물지 않을까 싶다. 일반적인 사용방법은 다음과 같다. aspect-ratio: 1 / 1; aspect-ratio: 1; /* fallback to 'auto' for replaced elements */ aspect-ratio: auto 3/4; aspect-ratio: 9/6 auto; /* Global values *.. 2024. 2. 15. [CSS] 글자를 줄 바꿈 없이 한 줄로 표현하기 (ft. white-space/overflow/text-overflow) CSS를 통해 텍스트 글자를 줄 바꿈 없이 한 줄로 표현하는 방법에 대해 알아보자. 보통 글자가 길면 자동 줄바꿈이 일어나 표현되고는 하는데, 만약 칸의 여유가 없고 디자인적으로도 넘치는 부분을 잘라내고 한 줄로만 표현하고자 한다면 이는 javascript를 사용하지 않고도 css만으로도 표현이 가능하다. 가장 흔하게 알려진 방법으로는 이 아래 3가지 속성을 주로 사용하여 제어를 하는 방법이다. white-space : 요소 내부의 공백을 처리하는 방법에 대한 설정 ( normal|nowrap|pre|pre-line|pre-wrap|initial|inherit ) text-overflow : 공백 문자를 처리하는 법 즉, 표시되지 않은 오버플로된 콘텐츠를 사용자에게 알리는 방법에 대한 설정이며 잘리거나 .. 2023. 1. 7. [SCSS] 반복문 (@for / @each / @while) @for @for는 through를 사용하는 방법과 to를 사용하는 방법으로 나뉜다. through 방식은 마지막 종료 숫자를 포함하며, to의 경우에는 마지막 종료 숫자를 포함하지 않는다. $base-color: #036; @for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } @for $i from 1 to 3 { li:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } to css /* use through */ ul:nth-child(3n + 1) { background-colo.. 2022. 11. 3. [CSS] CSS vs CSS-in-CSS vs CSS-in-JS CSS CSS(Cascading Style Sheets)에 대해서는 다들 어느 정도 알거라 생각된다. CSS-in-CSS 와 CSS-in-JS에 알아보기 전에 왜 CSS를 사용하다가 CSS-in-CSS와 CSS-in-JS가 등장했는지에 대해 알아보자. CSS는 지금까지 사용하면서 명확한 단점이 존재했었다. 모듈화가 어렵다. 클래스 이름의 최소화 문제 (방법론을 사용하면 어느 정도 해소는 되겠으나 완전한 해결은 아닌 듯하다.) CSS의 우선순위를 파악하기 어렵다. 뭐 그 외에도 여러 단점들이 존재하겠지만 당장 생각나는 건 이 정도이다. 그래도 요즘 CSS 같은 경우 매우 많은 업데이트를 해왔기 때문에 변수 사용, 중첩(nesting) 사용 등 많이 편리해지거나 편리해질 예정이라는 점에는 부정할 수 없다. .. 2022. 10. 26. [CSS] CSS 방법론이란? (ft. OOCSS / BEM / SMACSS) CSS 방법론 CSS 방법론이란 CSS를 어떤 방법으로 구성하면 더 효율적으로 구성할 수 있는가에 대한 방법론이다. 즉, 쉽게 말하면 CSS에서 클래스 네임을 쉽게 정의하기 위한 일종의 규칙이라고 생각하면 될 것 같다. CSS방법론을 사용하는 이유는 뭘까? 원활한 유지보수 코드의 재사용성 클래스명으로도 무슨 내요인지 예측 가능 확장 가능 그리고 CSS 방법론에는 크게 OOCSS, BEM, SMACSS로 나뉘어 있다. OOCSS OOCSS(Object Oriented CSS)는 CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법론이다. 실제로 가장 많이 쓰이는 방법론이라고 볼 수 있는데, 나 역시 현업에서 프로젝트를 진행할 때 OOCSS 방법론을 많이 사용하였다. 주요 원리는 구조와 스타일을 분리해.. 2022. 10. 26. 이전 1 2 3 다음 반응형
