본문 바로가기

이미지유형3

[사이트 만들기] 이미지 유형 03 - 이미지 스프라이트 & IR효과 활용하기 사이트 만들기 : 이미지 유형 03 이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 큰 메인 이미지 한 장과 그 옆에 작은 사이즈의 이미지 4장이 배치된 구조이며, 마우스를 올려 놓으면(hover) 제목과 설명이 들어있는 검은색 블러 처리된 박스가 자연스럽게 올라오는 효과까지 반영시켜보도록 하겠다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 귀여운 헬로키티를 보고 가세요😻 산리오의 상징 캐릭터 헬로키.. 2022. 8. 20.

[사이트 만들기] 이미지 유형 02 - Transition & Hover 활용하기 사이트 만들기 : 이미지 유형 02 이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 이미지 위에 제목과 자세히 보기 버튼을 올려놓고 그걸 hover 효과로 위로 나타나게 하는 애니메이션을 주도록 하겠다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 별빛 제빵교실 강사 소개🍞 사람 아닌 동물이지만 훌륭한 실력을 가진 별빛 제빵교실의 강사분들을 소개합니다! 댕댕이 자세히 보기 냥냥이 자세히 보기 북극곰 자.. 2022. 8. 17.

[사이트 만들기] 이미지 유형 01 - 이미지 위에 설명, 버튼 넣기 사이트 만들기 : 이미지 유형 01 이번 포스팅에서는 Figma에서 만든 이미지 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 이번에 만들 웹 사이트의 유형은 이미지 위에 제목과 본문(설명), 버튼을 올려놓는 간단한 방식이다. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하고, 이미지는 img 태그가 아닌 article 태그에 CSS로 나중에 추가해줄 것. 자세한 설명은 아래 예시 코드의 주석처리 내용을 참조할 것. 별빛 제빵교실 개강소식🍞 별빛 제빵교실이 2022년 8월 23일 개강합니다. 수강신청 기회는 지금 뿐이니 서두르세요! 나만의 제빵 포트.. 2022. 8. 17.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바