본문 바로가기

이미지스프라이트4

[사이트 만들기] 텍스트 유형 03 사이트 만들기 : 텍스트 유형 STUDY 03 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 9. 1.

[사이트 만들기] 텍스트 유형 02 사이트 만들기 : 텍스트 유형 STUDY 02 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 9. 1.

[사이트 만들기] 텍스트 유형 01 사이트 만들기 : 텍스트 유형 STUDY 01 이번 포스팅에서는 Figma에서 만든 텍스트 유형 섹션을 HTML과 CSS 코드로 옮기는 작업을 해보도록 하겠습니다. 아이콘 출력은 아이콘이 들어갈 원을 먼저 코딩으로 만들어 낸 후, 아이콘을 이미지 스프라이트 기법으로 원 안에 넣는 식으로 코딩을 진행하였습니다. Figma 먼저 만들고자 하는 웹 사이트의 모양을 Figma라는 프로그램을 이용하여 아래와 같이 만들어주도록 하자. 그와 동시에 이미지 스프라이트용 아이콘 SVG를 출력할 페이지도 따로 만들도록 한다. 만드는 방법은 지난 이미지 스프라이트 포스팅을 참조할 것. HTML 소스 웹 표준 준수를 위해 시맨틱 태그를 적극 사용하도록 하자. img 태그의 alt와 같은 효과를 주기 위해 아이콘이 들어갈 sp.. 2022. 8. 30.

[CSS] 이미지 스프라이트 + 백그라운드 & IR 효과 이미지 스프라이트 이번 포스팅에서는 지난번에 올렸던 이미지 유형 03 포스팅에서 활용된 이미지 스프라이트 효과와 백그라운드, IR 효과에 대해 심도 있게 다뤄보도록 하겠습니다. 이미지 스프라이트(Image Sprite)란? 여러 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹을 제작하다보면 사용되는 이미지 수는 기하급수적으로 증가하게 될 것이며 그만큼 웹 브라우저가 서버에 요청해야 할 이미지의 수가 늘어나게 되므로 로딩 시간이 오래 걸리게 된다. 하지만 이미지 스프라이트를 사용한다면 요청해야 할 이미지의 수를 줄여 로딩 시간을 절약하는 것이 가능하다. Figma 예제 다음 예제는 SNS 공유 기능을 위한 아이콘(36x36px 사이즈)을 14px 간격으로 떨어뜨려 아이콘 하나당 50px씩 .. 2022. 8. 20.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바