본문 바로가기

css

(36)

css 2024. 11. 18. 10:09

[scss]hex코드 rgb값으로 변경하기 (헥스코드, 변경, rgb) @function HexToRgb($color){ @return red($color), green($color), blue($color);}:root{ --color-111: #{HexToRgb(#111)}; --bg-111: rgb(var(--color-111));} --컴파일:root { --color-111: 17, 17, 17; --bg-111: rgb(var(--color-111));}

css 2024. 11. 14. 16:43

[css]ios에서 table-layoout : fixed 안 먹힐때 table{table-layout : fixed; min-width: 100%; max-width: none; width: auto} 일단 됨확인은 더 필요함

css 2024. 8. 14. 09:01

[scss]each 두번 쓰기 12345678910111213141516171819202122232425$justify-arr:( start :flex-start, center :center, end :flex-end, between :space-between, around :space-around, evenly :space-evenly,);$align-arr:( start :flex-start, center :center, end :flex-end,); .flex{ @each $justifyKey,$justifyValue in $justify-arr{ @each $alignKey,$alignValue in $align-arr{ &-#{$justifyKey}-#{$alignKey}{ jus..

css 2024. 8. 9. 11:13

[scss]vscode live sass compiler 저장 위치 변경 / map 안 만들기 setting 열기 (컨트롤 + , )@ext:glenn2223.live-sass 검색Editt in setting.json"liveSassCompile.settings.formats": [ { "format": "expanded", // expanded(default), compact, compressed, nested. "extensionName": ".css", // ".css" 혹은 ".min.css" 등으로 저장 "savePath": "~/../", // 저장경로 },]위 코드 추가 포맷 예시// expandeddiv{ width: 100px; height : 100px;}span{ display:block}// compact > sass에는 있는..

css 2024. 8. 1. 16:40

[scss]배열, if문 축약형, 부트스트랩처럼 미디어쿼리 작성하기 scss 배열$colors-arr : red, blue, yellow$colors-arr : ( "main" : red, "sub" : blue, "emphasis" : yellow ) scss if문 축약형.bg-dark{ color: if($name=="dark",#fff,inherit)} 부트스트랩처럼 미디어쿼리 작성하기// 각 미디어쿼리도 each로 쓰고싶었으나 실패함$breakpoint-sm : "576px";$breakpoint-md : "768px";$breakpoint-lg : "992px";$breakpoint-xl : "1200px";$breakpoint-xxl : "1540px";@mixin responsive-sm{ @media (min-width: $..

css 2024. 7. 22. 09:32

[css]animation 깜빡이는 효과 (깜빡임) See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.

css 2024. 7. 9. 17:42

[css]import 시킬 때 참고사항 (css include같이) @import는 최상단에 위치해야함( @charset이 있을 경우 @charset > @import ) @import + media query쓰기@import url(_import/common_1600.css) screen and (max-width: 1600px);

css 2024. 6. 12. 16:54

[css]모바일 확대 금지 (아이폰 포함) 일반적으로 meta태그로 모바일 확대 금지가 되지만, 아이폰은 css로 적용 가능 html{touch-action: pan-y;}

이전 1 2 3 4 5 다음

top

티스토리툴바