[ utility class 란? ] 각각의 클래스들을 정적으로 하나 하나씩 작성하는 것이 아니라, 하나의 코드로 여러 클래스들을 동적으로 생성하는 방식을 유틸리티 클래스라고 할 수 있습니다. CSS 프레임워크인 TailwindCSS 가 이러한 유틸리티 클래스 방식을 사용하고 있는 대표적인 사례라고 할 수 있습니다. [ 예시 ] 1. 다음과 같이 scss 파일을 작성합니다. -- index.scss $alignments: ( "center", "space-between", "space-around", "space-evenly", "flex-start", "flex-end" ); @each $align in $alignments { .justify-#{$align} { justify-content: #{$..

최근에 제가 만든 티스토리 "Stroke" 스킨이 2023년 8월에 v0 으로 처음 공개되었고, 2023년 10월에 v1 이 릴리즈 되었습니다. 이번 글에서는 Stroke 스킨을 만들면서 겪었던 과정들을 소개해드리고자 합니다. 티스토리 스킨을 만들어보고 싶다! 티스토리 블로그를 운영하면서 계속 아쉬웠던 부분이 스킨이었습니다. 이용자 제작 스킨 페이지에서 다른 분들이 만들어주신 스킨들을 쭉 탐색해 보았지만 제 마음에 쏙 드는 스킨이 없었습니다. 그래서 이참에 제가 직접 티스토리 스킨을 만들어보고 싶었습니다. 티스토리 스킨 치환자 동작 방식에 대한 적응 검색을 해보니 티스토리에서 스킨 개발 시 필요한 가이드 문서를 제공해주고 있었습니다. 티스토리 스킨은 치환자를 이용하여 제작하게 되는데, 처음에는 이 치환..

CSS 우선순위는 제일 높은 것에서 제일 낮은 것으로 나열한다면 !important -> inline style -> id selector -> class selector -> tag selector -> css combinators 순 이라고 할 수 있습니다. 우선순위 1. !important !important 가 명시된 css 속성이 우선순위가 제일 높습니다. .my-selector { background-color: #f00 !important; } 2. inline style 그 다음으로는 inline 에 작성된 style 이 우선순위가 높습니다. 3. id 선택자 그 다음으로는 id 선택자가 우선순위가 높습니다. #my-selector { background-color: #f00; } 4. c..

Windows 에서 종종 봐왔던 로딩 애니메이션을 css 로 한번 비슷하게 만들어보았습니다. 위 GIF 이미지는 속도가 좀 느려 보이는데, 실제 적용하면 저것 보단 빠르게 동작합니다. ㅎㅎ; 아래 html 과 css 코드를 공유합니다. html css .loading-icon { /* variables */ --main-size: 40px; --item-color: #000000; width: var(--main-size); height: var(--main-size); display: inline-block; position: relative; } .loading-icon > div { width: 100%; height: 100%; position: relative; display: flex; jus..

안녕하세요. 루루개발자 입니다. 이번 시간에는 css 에서 사용하는 길이 단위 종류에 대해서 알아보도록 하겠습니다. 절대 길이 (Absolute Lengths) 크기가 고정되어 있으며 정확히 그 크기로 표시됩니다. 요즘 여러 디바이스가 존재하면서 화면 크기가 매우 다양하기 때문에 절대 길이 단위는 사용하지 않는 것이 좋습니다. cm : centimeters 단위 고정 길이로 표시합니다. mm : millimeters 단위 고정 길이로 표시합니다. in : inches (1in = 96px = 2.54cm) 단위 고정 길이로 표시합니다. px : pixels (1px = 1/96th of 1in) 단위 고정 길이로 표시합니다. pt : points (1pt = 1/72 of 1in) 단위 고정 길이로 표시..

안녕하세요. 루루개발자 입니다. 금일 회사에서 곧 오픈할 서비스의 약관에 대한 내용을 기획자분께 전달받아 해당 내용대로 HTML 마크업 작업을 진행 하던 도중 겪은 일에 대해 공유드리고자 합니다. 먼저, 다음과 같이 코드를 작성했다고 합시다. 첫번째 아이템입니다. 두번째 아이템입니다. 가. 첫번째 아이템입니다. 나. 두번째 아이템입니다. 첫번째 ol 태그는 목록 앞의 마커를 기본 값으로 사용하였고, 두번째 ol 태그에서는 가, 나, 다.. 로 시작하는 옵션을 css 에서 제공해주지 않기 때문에 list-style-type을 none 으로 줘서 목록 앞에 표시되는 기본 마커를 없앤 뒤 수기로 내용 앞에 "가", "나" 등의 글자를 적어주었습니다. 하지만 보시는대로 기본 마커는 컨텐츠가 차지하고 있는 영역의..

안녕하세요. 루루개발자 입니다. 이번 시간에는 css 로 특정 요소를 무한 회전시키는 애니메이션 예제를 살펴보겠습니다. 예제 코드는 다음과 같습니다. .box { width: 10px; height: 10px; display: flex; position: relative; -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; } .box > div { width: 5px..

html에서 element의 scrollbar를 css로 스타일 지정할 수 있으며, 해당 내용은 w3school 사이트에도 나와있습니다. www.w3schools.com/howto/howto_css_custom_scrollbar.asp How To Create a Custom Scrollbar How TO - Custom Scrollbar Learn how to create a custom scrollbar with CSS. Custom Scrollbars Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79. How To Create Custom Scrollbars Chrome, Edge, Safari and ..