구성하기9 SITE | 모든 유형을 합쳐서 SITE를 완성해보자 :9 사이트 제작부터 반응형 적용까지 해보자:9 지금까지 배운 헤더, 배너, 슬라이드, ... 등의 타입들을 조합하여 반응형 사이트를 만들어봅시다. ✔︎ 결과 확인하기 전체 소스 보기 실제 사이트 보기 #header 💡 햄버거 메뉴를 사용해주었습니다. 화면 크기 1300px부터는 헤더 메뉴를 보이지 않게 처리하고 햄버거 메뉴로 대신하게 만들었습니다. * 햄버거 메뉴 : 주로 앱 상단 모퉁이에 위치하며, 메뉴를 토글하거나 네비게이션 바의 역할을 합니다. ⚠ 햄버거 메뉴를 열었을 때 스크롤이 생기는 현상을 막아주었습니다. script로 햄버거 메뉴를 클릭했을 때, body에 class="fixed"를 추가시켜 해결해주었습니다. ⚠ 햄버거 메뉴를 열어놓은 상태에서 화면크기를 최대로 키웠다가 다시 줄였을 때 메뉴가 .. 2022. 9. 15. 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 | 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 | imageType #3 SITE를 만들어봅시다 ! 이미지 유형 세번째 방법 입니다. 구조가 바뀌면서 나중에 데이터를 불러오는 작업까지 생각하여 flex가 아닌 grid 방식으로 레이아웃을 구성하였습니다. 추가로 마우스 hover 효과를 넣어 아이콘이 뜨는 효과를 적용하였습니다. 1. CSS 살펴보기 + 웹 접근성을 위해 ir효과 추가 + 바뀐 구조에 맞춰 추가 + flex 구조가 아닌 grid 구조 적용 + 이미지 설명 부분 설정과 이미지 오버 효과 설정 + 이미지 오른쪽 상단 아이콘을 설정해줍니다. + 이미지 스프라이트(image sprite), background 설정 + hover : opacity 속성 + 이미지 오른쪽 하단 아이콘을 설정해줍니다. + 이미지 스프라이트(image sprite), background 설정.. 2022. 8. 20. SITE | imageType #1 SITE를 만들어봅시다 ! 우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다. 오늘은 그 중에서도 이미지 유형 첫번째 방법을 배워봅시다. 1. CSS 살펴보기 #1. background: url(img/22.jpg) no-repeat center; 배경에 사진을 넣고 반복없이 가운데 정렬을 해줍니다. 2. HTML 살펴보기 운동하자 운동 👟 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 운동하자 운동 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 자세히 보기 운동하자 운동 운동의 시작, 스.. 2022. 8. 17. SITE | cardType #3 SITE를 만들어봅시다 ! 이번에는 또 다른 형식의 카드 유형으로 사이트 구성을 만들어봅시다. 1. Figma 활용하기 큰 영역 안에 3개의 카드가 있는 형태 입니다. 카드만 있는 것이 아닌 각각을 구분하는 선과 소제목 표시, 프로필 등 디테일 요소가 추가 되었습니다. 2. CSS 살펴보기 3. HTML 살펴보기 건축의 세계 Architects 세상에서 제일 높은 빌딩은 어디에 위치해 있고 특징이 무엇일까 ? (TOP5를 통해 살펴보자) 세상에서 제일 높은 빌딩은 어디에 위치하고 있으며 누가 설계하였을까? 높게 짓기 위해 특별히 적용한 공법이 있는지 다같이 알아보기로 하자. 먼저 5위를 말해보자면... Arc_Building 9 minute ago Roma (서양 건축사) 로마네스크 시대의 특징과 건축의.. 2022. 8. 11. SITE | cardType #2 SITE를 만들어봅시다 ! 이번에는 또 다른 형식의 카드 유형으로 사이트 구성을 만들어봅시다. 1. Figma 활용하기 같은 디자인의 카드를 4개씩 총 8개 배열한 형태입니다. 먼저 공통적인 카드의 틀을 만들어 놓고 component 처리를 해서 배열해주면 혹여나 수정사항이 생긴다해도 하나를 수정하면 전체가 똑같이 반영되어 수정이 용이합니다. 2. CSS 살펴보기 3. HTML 살펴보기 계절별 추천 여행지 봄, 여름, 가을, 겨울 4계절별 각각에 맞는 여러 여행지와 추천 식당, 카페 등을 모아서 정리해보았습니다. 잘 참고하셔서 좋은 여행 되시길 바래요! lt;article class="card"> lt;img src="img/card_bg02_01.jpg" alt="봄 Spring"> lt;h3 clas.. 2022. 8. 10. SITE | cardType #1 SITE를 만들어봅시다 ! 우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다. 오늘은 그 중에서도 카드 유형 첫번째 방법을 배워봅시다. 1. Figma 활용하기 모든 사이트들은 각각의 레이아웃을 가지고 있습니다. 레이아웃이 잘 짜여 있어야 그에 맞춰 코딩하기가 편하기 때문에 오차가 없도록 만들어 주는 것이 중요합니다. 아래 참고 사진은 figma를 통해 frame에 layout grid - Columns 를 사용해주었습니다. 2. CSS 살펴보기 #1. .section > h2 { } 부모 바로 밑에 있는 자식에게만 적용하고 싶을 때는 스트레칭(Stretching)> >스트레칭은 쉽게 말해서 평상시 상태보다 근육의 길이를 늘려주는 것으로 근육의.. 2022. 8. 9. 이전 1 다음
