기본적인 작성법
•
main_layout.css 파일을 기준으로 설명 드립니다.
•
맨 상단에는 공통으로 들어가는 디자인을 넣어주세요
(공통에서 일반 요소로 들어갈 때에는 엔터를 두번 쳐주시면 감사하겠습니다.)
/* html 파일 안의 모든 이미지와 버튼은 다음과 같은 형식을 따르게 됩니다. */
img {
width: 85px;
height: 85px;
margin-bottom: 7px;
/* 마우스 커서 변경 */
cursor: grab;
}
button {
border: none;
background-color: transparent;
}
CSS
복사
•
그 이후에는 html 파일 class 순서를 따라 작성해 주세요
◦
속성이 비슷한 요소들끼리 묶어주세요
.container__common {
/* flex 관련 요소 */
display: flex;
flex-direction: row;
/* 가로 세로 */
width: 1291px;
height: 840px;
/* 배경 관련 요소 */
backdrop-filter: blur(24px);
background: rgba(255, 255, 255, 0.6);
mix-blend-mode: normal;
/* 박스에 관한 요소 */
box-shadow: 4px 6px 4px rgba(0, 0, 0, 0.3);
border-radius: 21px;
}
CSS
복사
◦
조원들이 헷갈리거나 모를수도 있을것 같은 속성은 주석을 달아주세요
img {
width: 85px;
height: 85px;
margin-bottom: 7px;
/* 마우스 커서 변경 */
cursor: grab;
}
CSS
복사
◦
하나의 아이템에 많은 속성이 들어가야 한다면 다음과 같이 묶어주세요
/* 엔터두번 (보통은 한개) */
/* toggle ============================================================*/
.toggleSwitch {
width: 70px;
height: 35px;
margin-bottom: 65px;
display: block;
position: relative;
border-radius: 30px;
background: rgba(120, 120, 128, 32%);
/*box-shadow: 0 0 8px 3px rgba(0 0 0 / 15%);*/
cursor: pointer;
}
.toggleSwitch .toggleButton {
width: 29px;
height: 28px;
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
border-radius: 50%;
background: #fff;
}
.toggleSwitch.active {
background: #34C759;
}
.toggleSwitch.active .toggleButton {
left: calc(100% - 33px);
background: #fff !important;
}
.toggleSwitch, .toggleButton {
transition: all 0.2s ease-in;
}
/* ===================================================================*/
/* 엔터 두번 */
CSS
복사