로고

  • UTIL

UTIL

# Text Decoration

텍스트 아래 밑줄에 해당하는 class 


.underline { text-decoration: underline;}                   /* 밑줄 */
.line-through { text-decoration: line-through;}             /* 취소선 */
.no-underline { text-decoration: none;}                     /* 밑줄 취소 */
.underline-offset-1 { text-underline-offset: 1px;}          /* 밑줄과 텍스트 간격 숫자가 낮을 수록 가까움 */
.underline-offset-2 { text-underline-offset: 2px;}
.underline-offset-4 { text-underline-offset: 4px;}
.underline-offset-8 { text-underline-offset: 8px;}

# Text Transform

텍스트 대문자 소문자 


.uppercase { text-transform: uppercase;}
.normal-case { text-transform: none;}

# Cursor

커서 타입 


.cursor-auto { cursor: auto;}                   /* 자동 */
.cursor-default { cursor: default;}             /* 기본 */
.cursor-pointer { cursor: pointer;}             /* 손가락모양 */
.cursor-move { cursor: move;}                   /* 사방모양 */
.cursor-not-allowed { cursor: not-allowed;}     /* 커서 중지 */

# Scroll

스크롤 


.scroll-auto { scroll-behavior: auto;}          /* 스크롤 자동 */
.scroll-smooth { scroll-behavior: smooth;}      /* 스크롤 부드럽게 */

# Box Sizing

박스 사이징 종류 


.box-border { box-sizing: border-box;}
.box-content { box-sizing: content-box;}

# Floats

float 


.fl { float: left;}
.fr { float: right;}
.float-none { float: none;}         /* float 취소 */

# Overflow


.overflow-auto { overflow: auto;}
.overflow-hidden { overflow: hidden;}
.overflow-visible { overflow: visible;}
.overflow-scroll { overflow: scroll;}

.overflow-x-auto { overflow-x: auto;}                   /* 가로 자동 넘치면 스크롤 */
.overflow-x-hidden { overflow-x: hidden;}               /* 가로 넘치면 숨기기 */
.overflow-x-visible { overflow-x: visible;}             /* 기본값 넘치면 밖으로 */
.overflow-x-scroll { overflow-x: scroll;}               /* 가로 무조건 스크롤 */

.overflow-y-auto { overflow-x: auto;}                   /* 세로 자동 넘치면 스크롤 */
.overflow-y-hidden { overflow-y: hidden;}               /* 가로 넘치면 숨기기 */
.overflow-y-visible { overflow-y: visible;}             /* 세로 기본 */
.overflow-y-scroll { overflow-y: scroll;}               /* 세로 무조건 스크롤 */

# Object

주로 이미지 비율 맞출때 쓰인다.


/* object fit */
.object-contain { object-fit: contain;}
.object-cover { object-fit: cover;}

/* position */
.object-center { object-position: center;}

# Display

급할때 사용하는 class


.block { display: block;}
.inline-block { display: inline-block;}
.dis-table { display: table;}

# Border 0

border 값 0 이고 싶을때 사용하는 class


.border-t-0 { border-top: 0 !important;}            /* 위 */
.border-l-0 { border-left: 0 !important;}           /* 왼쪽 */
.border-r-0 { border-right: 0 !important;}          /* 오른쪽 */
.border-b-0 { border-bottom: 0 !important;}         /* 아래 */
Class 내용