[ 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: #{$..

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..

안녕하세요. 루루개발자 입니다. 이번 시간에는 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 으로 줘서 목록 앞에 표시되는 기본 마커를 없앤 뒤 수기로 내용 앞에 "가", "나" 등의 글자를 적어주었습니다. 하지만 보시는대로 기본 마커는 컨텐츠가 차지하고 있는 영역의..

안녕하세요. 루루개발자 입니다. 최근 회사에서 관리자 페이지 프론트를 개발하고 있는데 알림 모양의 아이콘에 마우스를 올리면 흔들리는 효과가 있었으면 좋겠다는 의견을 접수하여, 이번 시간에는 bell 이 흔들리는 모양의 css 애니메이션 예제를 살펴보려 합니다. 예제는 다음과 같습니다. .bell-icon { display: inline-flex; position: relative; -webkit-animation: ring 2s .7s ease-in-out infinite; -webkit-transform-origin: 50% 4px; -moz-animation: ring 2s .7s ease-in-out infinite; -moz-transform-origin: 50% 4px; animation: ri..

안녕하세요. 루루개발자 입니다. 이번 시간에는 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 ..