포토샵 닫고 CSS 열기

Yudrey·2022년 3월 26일

CSS CSS로 모형 만들기 Checkbox Custmization Radio Custmization shaping

견고한 UI 설계를 위한 마크업 가이드

목록 보기

15/18

패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"

웹 페이지를 구현하다 보면 작은 아이콘들과 같은 이미지를 사용하지만, CSS를 이용한 대체 기법을 이용해 이미지를 사용하지 않음으로써 웹 페이지 성능 높이기

삼각형 만들기

<i class="triangle"></i>

<style>
.triangle {
     border: 40px solid transparent;
     border-left-color: red;
}
</style>

Codepen 예제보기

꺽쇠 만들기

<i class="check"></i>

<style>
.check {
    width: 20px;
    height: 10px;
    border: 4px solid red;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
    transform-origin: 25% 25%; /* transform 기준점. X축 25% Y축 25% 지점에서 회전 */
}
</style>

Codepen 예제보기

화살표 만들기

<i class="arrow arrow--left"></i>
<i class="arrow arrow--right"></i>
<i class="arrow arrow--top"></i>
<i class="arrow arrow--bottom"></i>

<style>
.arrow {
    display: inline-block;
    position: relative;
    margin: 2em;
    width: 32px;
    height: 32px;
    --color: #000;
}
.arrow::before,
.arrow::after {
    content: '';
    position: absolute;
}
.arrow::before {
    width: 100%;
    height: 100%;
    border: 1px solid var(--color);
    border-right: 0;
    border-bottom: 0;
}
.arrow::after {
    width: 48px;
    height: 1px;
    background: var(--color);
    transform-origin: 0 100%;
    transform: rotate(45deg);
}
.arrow--left { 
  	transform: rotate(-45deg); 
}
.arrow--right { 
  	transform: rotate(135deg); 
}
.arrow--top { 
  	transform: rotate(45deg); 
}
.arrow--bottom { 
  	transform: rotate(225deg); 
}
</style>

Codepen 예제보기

스피너 만들기

<p class="spinner">Loading...</p>

<style>
.spinner {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 0;
    color: transparent;
}
.spinner::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 8px solid silver;
    border-top-color: transparent;
    animation: spin 1s linear infinite; 
}
@keyframes spin {
  	to { transform: rotate(360deg); }
}
</style>

Codepen 예제보기

격자 배경 만들기

<div class="crossStripeBg"></div>

<style>
.crossStripeBg {
    width: 380px;
    height: 380px;
    margin: 40px;
    background:
        /* linear-gradient(아래쪽 방향으로, 47px까지 투명, 47px부터 silver) X축 0 Y축 0 / 사이즈는 X축으로 100vw Y축으로 48px Y축으로 반복 */
        linear-gradient(to bottom, transparent 47px, silver 47px) 0 0 / 100vw 48px repeat-y,
        /* linear-gradient(오른쪽 방향으로, 47px까지 투명, 47px부터 silver) X축 0 Y축 0 / 사이즈는 X축으로 48px Y축으로 100vh X축으로 반복 배경색 검정 */
        linear-gradient(to right, transparent 47px, silver 47px) 0 0 / 48px 100vh repeat-x
        black;
}
/* 
linear-gradient를 이용해 배경색까지 작성할 때, 
색상 값은 마지막에 배치해야만 전체 코드가 정상적으로 적용 됨
*/
</style>

Codepen 예제보기

체커 배경 만들기

<div class="checkerBg"></div>

<style>
.checkerBg {
    width: 200px;
    height: 200px;
    margin: 20px;
    background-image: 
		/* 사각형 네 개가 하나의 배경이미지 영역 */
        linear-gradient(45deg, silver 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, silver 25%),
        linear-gradient(-45deg, silver 25%, transparent 25%),
        linear-gradient(-45deg, transparent 75%, silver 75%);
    background-size: 20px 20px;
    background-position: 0 0, -10px 10px, 0 -10px, 10px 0;
}
</style>

Codepen 예제보기

햄버거 아이콘 만들기

<button class="navBtn">메뉴 열기</button>

<style>
.navBtn {
    position: relative;
    width: 48px;
    height: 48px;
    border: 0;
    background: lightgray;
    color: transparent;
}
.navBtn::before,
.navBtn::after { 
    content: ''; 
    position: absolute;
}
.navBtn::before {
    top: 14px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 24px;
    height: 4px;
    background: black;
    box-shadow: 0 8px 0 black, 0 16px 0 black; 
    /* box-shadowbox: 그림자의 X좌표 Y좌표 blur값 색상 */
    /* 쉼표 구분자를 이용해서 반복 선언 가능 */
    /* 햄버거 아이콘의 두세번째 라인은 box-shadow로 생성됨 */
}
.navBtn::after {
    top: 10px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px white;
    background: red;
}
</style>