본문 바로가기

CSS9

scss 반복문 사용하는 방법과 자주쓰는 유용한 반복문 SCSS 반복문 활용: 코드의 간편성과 효율성 SCSS(Sassy CSS)는 CSS의 확장 버전으로, 변수, 중첩 규칙, 믹스인, 함수 등을 제공하여 스타일 시트 작성을 더욱 간결하고 효율적으로 만들어주는 도구입니다. 이 중에서도 SCSS에서 제공하는 반복문은 코드의 재사용성을 높이고 더욱 간편한 스타일링을 가능케 합니다. SCSS 반복문의 종류 1. @for 문: @for 문은 특정 횟수만큼 스타일을 반복 적용할 때 사용됩니다. 아래는 간단한 예시입니다. @for $i from 1 through 3 { .box-#{$i} { width: 50px * $i; } } 위의 코드는 .box-1, .box-2, .box-3 클래스에 각각 다른 너비를 지정합니다. 2. @each 문: @each 문은 리스트나 .. 2024. 1. 1.
유용한 scss 믹스인 모음과 장점 SCSS Mixin이란? SCSS Mixin은 스타일 시트에서 재사용 가능한 코드 조각을 정의하는 데 사용되는 기능입니다. 이는 함수와 비슷한 개념으로, 스타일 속성의 그룹을 정의하고 필요할 때 이를 임포트하여 사용할 수 있게 해줍니다. SCSS Mixin 구문 @mixin mixin-name($parameter1, $parameter2, ...) { property: value; // 다양한 스타일 속성들... } .element { @include mixin-name(value1, value2, ...); // 다른 스타일 속성들... } SCSS Mixin 사용 예시 @mixin border-radius($radius) { border-radius: $radius; } .button { @inclu.. 2024. 1. 1.
How to style custom scrollbars with css css로 스크롤바 커스텀 스타일링 하는 방법 ::-webkit-scrollbar — 전체 스크롤바. ::-webkit-scrollbar-button — 스크롤바의 버튼 (위쪽과 아래쪽을 가리키는 화살표). ::-webkit-scrollbar-thumb — 드래그 가능한 스크롤 핸들. ::-webkit-scrollbar-track — 스크롤바의 트랙 (진행률 표시 줄). ::-webkit-scrollbar-track-piece — 핸들로 덮이지 않은 트랙 (진행률 표시 줄) 부분. ::-webkit-scrollbar-corner — 가로 및 세로 스크롤바가 모두 만나는 스크롤바의 하단 모서리. ::-webkit-resizer — 일부 요소의 하단 모서리에 표시되는 드래그 가능한 크기 조정 핸들 ie, fi.. 2021. 1. 7.
How to set input placeholder color 인풋 placeholder 색상 설정하는 방법 &::placeholder 로 색상값을 지정해주면 된다. 크로스브라우징이 필요할 경우에 webkit, ms 프리픽스를 붙여서 사용하면 된다. 대부분의 브라우저에서 placeholder 텍스트의 모양은 기본적으로 반투명 또는 밝은 회색이 사용된다. placeholder의 텍스트의 색상과 입력 배경 사이의 명암비가 저시력 상태를 경험하는 사람들이 읽을 수있을 만큼 충분히 높은지 확인하고 사이에 충분한 차이가 있는지 확인하는 것이 중요하다. 색상 명암비는 자리 표시 자 텍스트의 광도와 입력 배경색 값을 비교하여 결정된다. 텍스트 콘텐츠에는 4.5 : 1, 제목과 같은 큰 텍스트에는 3 : 1의 비율이 필요하다. 큰 텍스트는 18.66px 및 굵은 폰트 이상 또는 .. 2021. 1. 7.
prevent zooming when the input focus on mobile Prevents zooming when the input area is focused on mobile 모바일 인풋 포커스 클릭시 화면 확대 방지하기 ‌모바일에서 인풋 영역 포커스 또는 클릭시 화면이 자동으로 확대되는 현상이 있다. 모바일 브라우저가 확대되는 이유는 사용자가 읽을 수 있도록 텍스트를 더 크게 만들기 위해서라고 한다. 이 현상을 막기 위해서는 미디어쿼리를 사용해 해당 엘리먼트의 폰트사이즈를 충분히 크게 설정해주면 된다. font-size: 16px; 2021. 1. 7.
모바일 시스템 폰트 설정, Mobile System Font 모바일 시스템 폰트 설정 모바일 기본 시스템 폰트로 설정하는 css font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 각 폰트 의미 // Safari for OS X and iOS (San Francisco) -apple-system, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Rob.. 2020. 12. 19.
css background 속성 단축 css background 단축 속성 사용하기 body { background: url(sweettexture.jpg) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ } background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: top right; 단축 css background: #000 url(images/.. 2020. 10. 1.
CSS 시스템 폰트 System font css OS 별 시스템 폰트 특정 운영 체제의 시스템 폰트를 기본값으로 설정하면 성능을 향상 시킬 수 있다. 맥 기본 시스템 폰트 OS 버전 시스템 폰트 Mac OS X El Capitan San Francisco Mac OS X Yosemite Helvetica Neue Mac OS X Mavericks Lucida Grande 윈도우 기본 시스템 폰트 Windows Vista Segoe UI Windows XP Tahoma Windows 3.1 to ME Microsoft Sans Serif 안드로이드 기본 시스템 폰트 Android Ice Cream Sandwich (4.0)+ Roboto Android Cupcake (1.5) to Honeycomb (3.2.6) Droid Sans 우분투 기본 시스템 .. 2020. 10. 1.
CSS variables How to use Custom properties CSS variables var() Custom properties (--*): CSS variables 사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용 와 --같이 접두사가 붙은 속성 이름 은 함수를 사용하는 다른 선언에서 사용할 수있는 값을 포함하는 사용자 지정 속성 을 --example-name나타낸다. :root { --main-color: #488cff; --second-color: #ffff8c; } #firstParagraph { background-color: var(--first-color); color: var(--second-color); } 정의 : 사용자 지정 속성은 전용 표기법을 사용해 정의 .. 2020. 9. 21.

티스토리툴바