SITE/TEXT3 SITE | textType #3 SITE를 만들어봅시다 ! 1. CSS 살펴보기 ... /* textType03 */ .text__inner { display: flex; justify-content: space-between; } .text__box { width: 373px; background-color: #fff; border-radius: 10px; padding: 30px; margin-left: 20px; position: relative; transition: all 0.3s; } .text__box:nth-child(1) { margin-left: 0; } .text__box:hover { scale: 1.03; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.15); } ... + .text.. 2022. 9. 1. SITE | textType #2 SITE를 만들어봅시다 ! 1. CSS 살펴보기 ... /* textType02 */ .text__inner { display: grid; grid-template-areas: "box1 box2 box3" "box1 box4 box5" ; grid-template-columns: 32.3% 32.3% 32.3%; grid-template-rows: 50% 50%; grid-gap: 50px 20px; } .text__desc { grid-area: box1; } .text__inner:nth-child(2) { grid-area: box2; } .text__inner:nth-child(3) { grid-area: box3; } .text__inner:nth-child(4) { grid-area: box.. 2022. 9. 1. SITE | textType #1 SITE를 만들어봅시다 ! 카드, 이미지 유형에 이어 텍스트 유형 첫번째 방법 입니다. 그동안 배웠던 방법을 적용해 다같이 만들어봅시다 ~ 1. CSS 살펴보기 ... /* textType */ .text__wrap h6 { text-align: center; font-size: 16px; margin-bottom: 10px; text-decoration: underline; } .text__wrap h2 { text-align: center; font-size: 50px; margin-bottom: 50px; } .text__inner { display: flex; flex-wrap: wrap; justify-content: space-between; } .text__box { width: 32.3%;.. 2022. 8. 30. 이전 1 다음