SITE/IMAGE3 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 #2 SITE를 만들어봅시다 ! 우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다. 오늘은 그 중에서도 이미지 유형 두번째 방법을 배워봅시다. 1. CSS 살펴보기 #1. transition-timing-function 속성 속성값 의미 linear 전환 효과가 처음부터 끝까지 일정한 속도로 진행 ease 기본값; 전환 효과가 천천히 시작되고 빨라졌다가 다시 느려짐 ease-in 전환 효과가 천천히 시작 ease-out 전환 효과가 천천히 끝남 ease-in-out 전환 효과가 천천히 시작되어 천천히 끝남 cubic-bezier(n,n,n,n) 전환 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행 .image:hover .image_.. 2022. 8. 17. SITE | imageType #1 SITE를 만들어봅시다 ! 우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다. 오늘은 그 중에서도 이미지 유형 첫번째 방법을 배워봅시다. 1. CSS 살펴보기 #1. background: url(img/22.jpg) no-repeat center; 배경에 사진을 넣고 반복없이 가운데 정렬을 해줍니다. 2. HTML 살펴보기 운동하자 운동 👟 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 운동하자 운동 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 운동의 시작, 스트레칭부터 다양한 스포츠의 종류를 알아봅시다. 자세히 보기 운동하자 운동 운동의 시작, 스.. 2022. 8. 17. 이전 1 다음
