패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"
웹 페이지를 구현하다 보면 작은 아이콘들과 같은 이미지를 사용하지만, CSS를 이용한 대체 기법을 이용해 이미지를 사용하지 않음으로써 웹 페이지 성능 높이기
<i class="triangle"></i>
<style>
.triangle {
border: 40px solid transparent;
border-left-color: red;
}
</style>
<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>
<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>
<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>
<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>
<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>
<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>
radio & checkbox
어떤 브라우저나 운영 체제에서도 동일한 모양의 버튼 UI가 제공 되도록 개발된 코드 확인 → Codepen 예제보기