사용자

처음으로
  • UTIL

UTIL

# Text Decoration

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


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

# Text Transform

텍스트 대문자 소문자 


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

# Cursor

커서 타입 


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

# Scroll

스크롤 


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

# Box Sizing

박스 사이징 종류 


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

# Floats

float 


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

# Overflow


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

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

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

# Object

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


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

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

# Display

급할때 사용하는 class


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

# Border 0

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


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