만들기10 CSS | ANIMATION | 늘어났다 줄어났다 반복하는 정육면체 쫘아아악 늘어나는 정육면체 🎲 정육면체가 위아래로 늘었다 줄었다 반복하는 애니메이션을 만들어봅시다요 ! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 정육면체 면 6개를 만들어줍니다. 코딩하자:9 #2. CSS(SCSS) 코드를 확인해보자 body { background-color: #333; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3.. 2022. 9. 22. ANIMATION | SVG 텍스트 애니메이션 만들기 SVG ANIMATION SVG 텍스트 애니메이션 만들기 svg Gyupp Gyupp @font-face { font-family: 'Tmon'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot'); url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/t.. 2022. 9. 8. 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. CSS | 통통 돌아다니는 공 만들기 통토도동 돌아다니는 공 🏐 codepen을 사용해서 통통 튕기며 돌아다니는 공을 만들어 봅시다. 첫번째 공이 먼저 가고 뒤따라 연속적으로 가는 것처럼 만들어보았습니다만.. 속도를 빠르게 하니 그냥 공이네요^^! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 * { box-sizing: border-box; } body { background: linear-gradient(to top, blueviolet 0%, pink 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: cent.. 2022. 9. 4. 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 다음
