사이트5 SITE | footerType #1 👊🏻 SITE | footer 유형 뽀개기 ✔︎ CSS Point ☑︎ background: url(../img/slider_bg01.jpg) no-repeat center / cover; 배경 이미지 url 형식으로 삽입, 반복없이 가운데 정렬 / 사이즈에 맞도록 cover /* footerType */ .footer__menu { display: flex; margin-bottom: 70px; } .footer__menu > div { width: 16%; } .footer__menu h3 { font-size: 18px; margin-bottom: 20px; } .footer__menu li a { font-size: 14px; color: #666; margin-bottom: 10px; displ.. 2022. 9. 6. SITE | bannerType #1 👊🏻 SITE | banner 유형 뽀개기 ✔︎ CSS Point ☑︎ background: url(../img/slider_bg01.jpg) no-repeat center / cover; 배경 이미지 url 형식으로 삽입, 반복없이 가운데 정렬 / 사이즈에 맞도록 cover /* bannerType */ .banner__inner { background-image: url(../img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color: #fff; } .banner__title { font-size.. 2022. 9. 6. SITE | sliderType #1 👊🏻 SITE | slider 유형 뽀개기 ✔︎ CSS Point ☑︎ blind 효과 사용하기 ☑︎ 이미지 스프라이트 / ir 효과 사용하기 /* sliderType */ .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../img/slider_bg01.jpg) no-repeat center / cover; } .slider__img .desc { width: 1160px; margin: 0 auto; padding: 100px 20px; } .slider__img .desc span { font-size: 16px; background-color: #fff; padding.. 2022. 9. 6. SITE | imgTextType #1 사이트 이미지/텍스트 유형 #1 이미지와 텍스트로 이루어진 사이트를 만들어봅시다. 이미지 유형과 텍스트 유형을 잘 떠올리면서 도전해보세요 ! 1. CSS 살펴보기 /* reset */ li { list-style: none; } .blind{ position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } + 목록 초기화와 블라인드 효과 추가 /* common */ .gray { background-color: #f5f5f5; } + 배경색 추가 /* imgTextType */ .imgText__inner { display: flex; justify-content: space-between;.. 2022. 9. 2. SITE | headerType #1 사이트 header 유형 #1 사이트 상단에 위치한 header 부분을 만들어 봅시다. 오늘은 간단해서 다들 성공하실거에요 ☺️ 1. CSS 살펴보기 /* reset */ em, i, address { font-style: normal; } + reset에 폰트 스타일 초기화 추가 /* headerType */ .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; } .header__logo { width: 20%; font-size.. 2022. 9. 2. 이전 1 다음
