SiteType16 사이트 만들기 완성.ver 사이트 헤더 만들기 + 스크립트 적용하기 사이트의 헤더 메뉴를 햄버거 메뉴로 만들어서 반응형에서도 메뉴가 작동할 수 있게 만들어 줍니다. 📣추가적으로 스크립트를 작성하여 슬라이드가 움직일 수 있도록 만들어 주며 메뉴를 클릭했을때 해당 영역으로 부드럽게 이동할 수 있도록 만들어 줍니다. 헤더 영역 헤더 영역은 화면이 줄어 들면 많은 부분이 깨지기 때문에 줄어 들었을때에 햄버거 메뉴를 추가 하여 주었습니다👻 우선 span태그를 사용하여 햄버거 메뉴를 만들어 줍니다. 햄버거 메뉴 CSS .header__ham { position: absolute; right: 10px; top: 10px; z-index: 1000; width: 50px; height: 50px; display: none; cursor: po.. 2022. 9. 15. 사이트 만들기 + 반응형 작업하기 사이트 반응형 만들기 다양한 타입의 유형들을 하나로 모아 만든 사이트를 반응형 까지 완성하는 시간을 가져 봅시다👻 시작하기전에 모든 영역을 display: none; 속성을 통하여 보여지지 않게 만들고, 하나씩 추가하면서 작업을 하도록 합니다~ #headerType{display: none;} #sliderType{display: none;} #imageType{display: none;} #imgTextType{display: none;} #cardType{display: none;} #bannerType{display: none;} #textType{display: none;} #footerType{display: none;} HTML코드 HTML코드는 기존의 유형과 달라지는건 없지만 슬라이드 유형에.. 2022. 9. 14. 사이트 만들기(슬라이드 유형 - 01) 사이트 만들기(슬라이드 유형 - 01) 사이트에 사진이 움직이는 슬라이드를 만들어 봅시다✏️ CSS .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../img/SLIDER-TYPE01.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: 1px 14px 0 14px; border-radius: 30px; .. 2022. 9. 5. 사이트 만들기(배너 유형 - 01) 사이트 만들기(배너 유형 - 01) 사이트에 배너를 만들어 봅시다✏️ CSS .banner__inner { background-image: url(../img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; text-align: center; padding: 120px 0; color: #fff; } .banner__inner .title { font-size: 50px; line-height: 1; font-weight: 300; margin-bottom: 40px; } .banner__inner .desc{ font-size: 24px; line-height: 1.5; font-weight: 300; margin.. 2022. 9. 5. 사이트 만들기(푸터 유형 - 01) 사이트 만들기(푸터 유형 - 01) 사이트의 마지막, 푸터를 만들어 봅시다✏️ CSS .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; display: block; } .footer__right { border-top: 1px solid #d9d9d9; text-align: center; padding-top: 40px; color: #666; line-height.. 2022. 9. 5. 사이트 만들기(이미지/텍스트 유형 - 01) 사이트 만들기(이미지/텍스트 유형 - 01) 이미지와 텍스트가 함께있는 사이트 유형을 만들어 봅시다🧸 CSS .gray { background-color: #f5f5f5; } /* imgTextType */ .imgText__inner { display: flex; justify-content: space-between; } .imgText__inner > div { width: 32%; height: 500px; } .imgText__txt span { font-size: 16px; color: #666; text-decoration: underline; text-underline-position: under; margin-bottom: 20px; display: block; } .imgText__tx.. 2022. 9. 1. 사이트 만들기(헤더 유형 - 01) 사이트 만들기(헤더 유형 - 01) 사이트의 헤더를 만들어 봅시다🦢 CSS .section > span { display: block; text-align: center; font-size: 16px; text-decoration: underline; margin-bottom: 16px; } .mb70 { margin-bottom: 70px !important; } /* 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 sol.. 2022. 9. 1. 사이트 만들기(텍스트 유형 - 03) 사이트 만들기(텍스트 유형 - 03) 텍스트 형식의 사이트를 만들어 봅시다✏️ CSS body { background-color: #EFFAFF; } /* textType03 */ .text__inner { display: flex; justify-content: space-between; } .text { width: 29%; height: 400px; padding: 20px; background-color: #fff; } .text .text__desc { line-height: 1.5; font-size: 18px; margin-bottom: 30px; } .text__main { border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; padd.. 2022. 8. 31. 사이트 만들기(텍스트 유형 - 02) 사이트 만들기(텍스트 유형 - 02) 텍스트 형식의 사이트를 만들어 봅시다✏️ CSS /* textType02 */ .text__inner { display: flex; } .text__header { width: 28%; padding-right: 40px; } .text__main { width: 68%; display: flex; flex-wrap: wrap; justify-content: space-between; } .text__main .text__box { width: 47%; margin-bottom: 50px; } .text__main .icon { width: 60px; height: 60px; border-radius: 50%; text-align: center; line-height.. 2022. 8. 31. 사이트 만들기(텍스트 유형 - 01) 사이트 만들기(텍스트 유형 - 01) 텍스트 형식의 사이트를 만들어 봅시다✏️ CSS /* textType01 */ .text__inner { display: flex; flex-wrap: wrap; justify-content: space-between; } .text { padding: 20px; width: 29%; height: 260px; margin-bottom: 20px; transition: all 0.5s ease; } .text:hover { background-color: #f5f5f5; } .text .icon { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 10px; text-align: center; line-he.. 2022. 8. 30. 사이트 만들기 (이미지 유형 - 03) 사이트 만들기(이미지 유형 - 03) 큰이지 하나와 작은 이미지 여러개가 함께있는 사이트 유형을 만들 수 있습니다. CSS /* imageType */ .image__inner { display: grid; grid-template-areas: "box1 box1 box2 box3" "box1 box1 box4 box5"; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 20px; } .image { overflow: hidden; position: relative; transition: all 0.5s ease-in-out; } .image__inner .image:nth-child(1){ grid-area: .. 2022. 8. 20. 사이트 만들기 (이미지 유형 - 02) 사이트 만들기(이미지 유형 - 02) 이미지가 삽입된 형식의 사이트를 만들 수 있습니다. CSS /* imageType */ .image__inner { display: flex; justify-content: space-between; } .image { width: 32%; background-color: #f5f5f5; position: relative; overflow: hidden; } .image__box img { vertical-align: top; transition: all 0.5s ease-in-out; } .image__desc { position: absolute; left: 0; bottom: -100px; width: 100%; height: 100px; text-align: .. 2022. 8. 17. 사이트 만들기 (이미지 유형 - 01) 사이트 만들기(이미지 유형 - 01) 이미지가 삽입된 형식의 사이트를 만들 수 있습니다. CSS /* imageType */ .image__inner { display: flex; justify-content: space-between; } .image { width: 49%; height: 370px; color: #fff; padding: 200px 30px 30px 30px; box-sizing: border-box; } .image.img1 { background: url(img/imageType01_01.jpg) no-repeat center; } .image.img2 { background: url(img/imageType01_02.jpg) no-repeat center; } .image__t.. 2022. 8. 17. 사이트 만들기(카드 유형 - 03) 사이트 만들기(카드 유형 - 03) 카드 형식의 사이트를 제작 할 수 있습니다. 피그마 작업 피그마로 만들고자 하는 사이트의 가이드 라인을 잡아 줍니다. 하나의 카드 틀이 완성 되면 컴포넌트를 이용해 원본을 만들어 줍니다. CSS CSS보기 /* cardType03 */ body { background-color: #2254c3; } .card__inner { display: flex; } .card__inner .card { padding: 26px; width: 33.3333%; background-color: #fff; } .card__inner .card:nth-child(1){ border-right: 1px solid #eee; } .card__inner .card:nth-child(2){ b.. 2022. 8. 10. 사이트 만들기(카드 유형 - 02) 사이트 만들기(카드 유형 - 02) 카드 형식의 사이트를 제작 할 수 있습니다. 유형02 에서는 8개의 카드가 존재하는 사이트를 보여줍니다. CSS .gmark { font-family: GmarketSans; font-weight: 500; } .card__inner { display: flex; flex-wrap: wrap; justify-content: space-between; } .card__inner .card { width: 24%; position: relative; } .card__inner .card:nth-child(1) { margin-bottom: 50px; } .card__inner .card img { margin-bottom: 20px; border-radius: 10px; .. 2022. 8. 9. 사이트 만들기(카드 유형 - 01) 사이트 만들기(카드 유형 - 01) 카드 형식의 사이트를 제작 할 수 있습니다. CSS .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { text-decoration: none; color: #000; } img { width: 100%; } /* common */ .container { width: 1160px; padding: 0 20px; margin: 0 auto; } .section { padding: 120px 0; } .section > h2 { /* + 는 형제, > 는.. 2022. 8. 8. 이전 1 다음
