CSS4 [WEB] CSS 이미지 스프라이트 #248 1. 이미지 스프라이트(Sprite)란? 스프라이트(Sprite)란 번역기를 돌렸을 때에는 사이다, 요정 등이라고 하나 그래픽 용어로는 움직이는 2차원 비트맵 개체를 나타낸다고 합니다. 아마 최초 도입했었던 기술에서 이를 이용한 요정 이미지를 사용해서 그러지 않았나 싶습니다. 웹 개발에서는 이미지 스프라이트라는 용어를 사용하는데 여기서는 웹 화면에서 사용하는 여러 개의 이미지를 하나로 모하 놓은 이미지를 뜻합니다. 2. 이미지 스프라이트를 사용하는 이유 이미지를 많이 필요로하는 웹 페이지에는 해당 사항이 없으나, 네이버나 다음 등 많은 이미지와 구성요소들을 필요하는 사이트의 경우 이미지 스프라이트를 사용하고 있습니다. 그 이유는 반응 속도 및 효율성과 관련이 있습니다. 위에서 정의한 대로 사용하.. 2023. 1. 18. [HTML] 메일 본문에서 HTML 사용하기 #231 1. 메일 본문에서 HTML을 사용하게된 이유 메일에 포스터와 같은 이미지를 삽입해야하는 경우가 있었습니다. 보통의 경우 이미지 첨부 기능을 위해서 첨부만 하면 되지만 포스터의 특정 위치에 링크나 특별한 효과를 넣고 싶었습니다. 나름의 지식을 가지고 수정하겠다하면 싶어 알아보게 되었습니다. 2. 메일에서 HTML 지원여부 우선 메일에서 HTML을 지원하는지를 확인하였습니다. 대표적으로 자주 사용하는 두 개의 메일 서비스들이 지원하는지 알아보겠습니다. 1) NAVER 네이버의 경우 오른쪽 하단에 잘 보이실지 모르겠지만 HTML이라고 하여 작성된 글을 HTML 편집기를 이용하여 수정할 수 있습니다. 편집기가 잘 동작하는지 테스트로 버튼을 하나 만들어보겠습니다. HTML 편집기에서 작성이 완료되면 다.. 2022. 8. 2. 티스토리 스킨 편집하기- 개발자 도구 활용하기 #46 편집을 하는데 있어 가장 중요한 부분은 분석입니다. 기존에 어떠한 형태로 구성되어 있는지를 알아야 수정이 가능하기 때문입니다. 웹페이지 구성을 확인할 때 유용하게 사용할 수 있는 도구가 개발자 도구입니다. F12번 단축키를 이용하여 창을 보실 수 있습니다. 1. 개발자 도구란? 여러 가지 웹 브라우저에서 제공하는 도구로써, 웹 브라우저에서 실시간으로 웹 사이트를 분석할 수 있도록 도움을 주고 있습니다. 실시간으로 편집이 가능하며 실제 웹 사이트에는 적용되지 않으나, 변경된 화면을 바로 확인하실 수 있습니다. 특히 블로그 스킨 편집할 때 유용하게 사용할 수 있습니다. 2. 개발자 도구 화면 구성 F12 단축키를 이용하여 화면을 보실 수 있습니다. Elements외에 다양한 정보를 볼 수 있는 영역이.. 2020. 3. 12. 티스토리 스킨 편집하기 - 기본 스킨(Book Club) 살펴보기 #45 티스토리를 시작하고 제가 사용하고 있는 스킨은 Book Club이라는 기본 스킨을 사용하고 있는데요. 제 기준에 구성도 마음에 들고 포스팅한 글을 보았을 때 깔끔하다는 생각이 들어 사용하고 있습니다. 하지만 제 기호에 따라 조금 수정을 해보고 싶다는 생각이 들었습니다. 티스토리의 경우 스킨을 편집할 수 있도록 에디터를 제공하고 있어 의지와 노력만 있다면 수정이 가능합니다. 저도 그 의지와 노력을 가지고 수정을 조금씩 해보려고 합니다. 맨 처음으로는 제가 수정하고자하는 부분의 영역을 분석해봤습니다. 1. 티스토리에서 제공하는 스킨 확인 먼저 티스토리에서 제공하는 스킨을 확인해보도록 하겠습니다. 꾸미기 메뉴에서 스킨 변경을 통하여 티스토리에서 제공하는 스킨을 확인하실 수 있습니다. 기본적으로 제공하지.. 2020. 3. 12. 이전 1 다음
