코드노트

font-size: clamp(20px, 0.264em, 100%);/* 최소, 반응형, 최대 */

$image-width: 1912; // 이미지 가로 값$image-height: 625; // 이미지 세로 값@mixin position($t, $l) { //100% 일 때 탑, 레프트 값) top: calc($t / $image-height * 100%); left: calc($l / $image-width * 100%);}.p-1 { @include position($t: 238, $l: 664)}

ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }li { width: 100% } #gall_ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 각 열의 최소 크기를 0, 최대 크기는 1fr로 설정 */ gap: 54px 26px;}#gall_ul .list { background-position: center; background-size: cover; background-repeat: no-repeat; aspect-ratio: 1 / 1; background-color: #fff; width: 1..

See the Pen text 형광펜 디자인 by publisher-jy (@publisher-jy) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 엔터해도 상관 없지롱

" alt="" class="img">.pdList .pdImage { border-radius: 16px; border: 1px solid #E8E8E9; overflow: hidden; position: relative;}.pdList .pdImage::after { display: block; content: ""; padding-bottom: 100%;}.pdList .pdImage .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

$colors-data: ( search: var(--cBlue), dtldSrch: var(--cGreen));@each $name, $color in $colors-data { .btn-#{$name}, .btn-#{$name} i { background: $color; }}

// @include aspect($w: 16, $h: 9); @mixin aspect($w: 16, $h: 9) { aspect-ratio: #{$w} / #{$h}; @supports not (aspect-ratio: #{$w} / #{$h}) { &::before { content: ''; float: left; padding-top: calc((#{$h} / #{$w}) * 100%); } &::after { content: ''; display: block; clear: both; } } }

hyphens: auto; overflow-wrap: break-word; https://developer.mozilla.org/ko/docs/Web/CSS/hyphens

한글 범위: U+AC00-D7A3 영어 대문자 범위 : U+0041-005A 영어 소문자 범위 : U+0061-007A 숫자 범위 : U+0030-0039 특수 문자: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E 적용할 폰트의 @font-face에 범위 적어주기 @font-face { unicode-range: }

HTML 삽입 미리보기할 수 없는 소스