SCSS

SCSSSASS (Synthetically Awesome StyleSheets)SCSS는 Sass로부터 등장했습니다. Sass는 CSS 전처리기로서 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공합니다.전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행시킬 수 있습니다. SCSS는 Sass3 버전부터 새롭게 등장했습니다. SCSS는 Sass의 모든 기능을 지원하는 Superset 입니다.게다가 SCSS는 CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있습니다. Sass와 SCSS의 차이점Sass: 중괄호가 아닌 들여쓰기 사용SCSS: CSS처럼 `{}`와 `;` 을 사용 1. DataTypesSCSS는 다양한 데이터 타입을 정의하고 있어 이를 변수처럼 활용할 수 있습니다.type  ..

2024.05.16

CSS | backdrop-filter

backdrop-filter해당 요소에 블러 처리되는 `filter: blur()`와 달리 요소의 배경 영역에 블러 처리가 된다.`backdrop-filter` CSS 속성을 사용 하면 요소 뒤 배경 영역에 흐림이나 색상 변경과 같은 그래픽 효과를 적용할 수 있다. 이는 요소 뒤에 있는 모든 것에 적용되므로 효과를 보려면 요소나 배경이 투명하거나 부분적으로 투명해야 한다. 사파리 에서는 vender prefix와 함께 사용해야 한다. `-webkit-backdrop-filter`    See the Pen [css]backdrop-filter3 by miok song (@miok-song) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 Syntax..

2024.04.25

Media Queries Breakpoints For Responsive Design In 2023

Using min-width // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } Using max-width @media (max-width: 575.98px) { ... } // ..

2023.11.01

iPhone overscroll, user-scale 제어

css *, *:before, *:after{-webkit-box-sizing: border-box; box-sizing: border-box; outline:none; -webkit-tap-highlight-color:transparent !important; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; overscroll-behavior-y:none; touch-action: pan-x pan-y;}

2023.10.04

사파리 overflow:hidden + border-radius 관련 이슈 해결법

사파리의 렌더링 엔진 Webkit의 버그 해결법 .box {border-radius:1.2rem; overflow:hidden; isolation: isolate; } https://www.sungikchoi.com/blog/safari-overflow-border-radius/ 사파리 overflow:hidden + border-radius 관련 이슈 해결법 사파리에서 overflow:hidden + border-radius 관련 문제를 해결했던 과정을 공유합니다 www.sungikchoi.com

2023.09.08

input type=password ios/aos 폰트 크로스브라우징 이슈

이슈`input type="password"`는 값을 입력하면 value가●●●●● 형태로 출력이 되는데, 이 도트의 사이즈가 브라우저별로 상이하여디자인적으로 value가 input 가로사이즈 영역을 넘어서는 문제, 크로스브라우징 문제가 발생했다. 검색결과문제는 (2016년 기준) 비밀번호 입력란에 파이어폭스와 인터넷 익스플로러는 유니코드 코드포인트를 사용하는 '검은 동그라미'(●) 문자를 사용하지만, 크롬은 ' 25CF불렛'(•) 문자를 사용한다는 점이다. ios safari 에서도 큰 검은 동그라미 형태로 출력되어, 디자인적으로 input 가로사이즈 영역을 넘어서는 문제가 발생하게 되었다.  해결방법'pass' 라는 base64 사용자정의 글꼴을 사용하여 도트의 사이즈를 통일했다.placeholde..

2023.04.06