본문 바로가기

웹122

목록 썸네일 이미지 피그마 그리드 레이아웃 설정법, 켜고 끄는 단축키 정리! 피그마 그리드 레이아웃은 반응형 디자인을 할 때 특히 유용한 도구입니다. 그리드 시스템을 설정하는 방법과 필요에 따라 레이아웃 그리드를 켜고 끄는 단축키까지 간단하게 알아보겠습니다. HTML 삽입 미리보기할 수 없는 소스 지난 시간에는 피그마의 웹버전/ 다운로드버전 비교, 기초 튜토리얼과 폰트 사용법, 단축키 등에 대해 알아보았습니다. 오늘은 디자인을 할 때 필수적인 그리드에 대해 알아보겠습니다. Figma 그리드 시스템이란? 우선, Figma 그리드가 무엇인지 알아보겠습니다. 기본적으로 Figma 그리드는 프레임 안에 있는 객체를 레이아웃에 따라 손쉽게 배치하는 데 도움이 됩니다. 그리드 시스템을 이용하면 디자인을 할 때 더 쉽게 시각적인 구조를 만들 수 있습니다. 레이아웃 그리드는 픽셀이나 해상도에 .. 2022. 2. 3.
목록 썸네일 이미지 애드센스 수익 정산 준비! 미국 세금 정보 작성 등등 (지급 보류 해결) 애드센스 수익을 정산하려면, 몇 가지 절차를 거쳐야 합니다. 그 첫 번째가 바로 미국 세금 정보 작성이며, 그 밖에 우편 PIN 인증이나 결제 수단 추가에 대해서도 이야기합니다. 애드센스 지급일과 기본 지급일 변경, 지급액 변경하는 방법도 정리해두었습니다. 애드센스 수익 지급 절차 페이지를 보면, 다음과 같은 단계를 거친다고 말합니다. 애드센스는 말을 길게 하지 않으니, 좀 더 구체적으로 설명해드리겠습니다. 1. 미국 세금 정보 작성 0. 미국 세금정보를 왜 작성해야 하는가? 구글이 미국 회사라 미국에 세금 신고 의무가 있기 때문입니다. 만약 이것을 작성하지 않으면, 전체 애드센스 수익의 30%를 그냥 떼 갑니다. 작성하면, 미국에서 발생한 수익의 30%를 떼 갑니다. 미국에서 대부분의 트래픽이 발생하는.. 2022. 1. 30.
목록 썸네일 이미지 TOP 8 일러스트레이터 브러쉬팩 무료 다운 (예시, 상업용, 사용법) 일러스트레이터 브러쉬 다운로드 항목을 엄선해보았습니다. 실무에서 효과적으로 사용하실 수 있도록, 상업적 이용이 가능한 무료 브러쉬 중에서 쓸만한 것들을 정리해서 소개해보겠습니다. 이 글에서는 그저 다운로드 링크의 나열에 그치지 않고, 실제로 활용성이 있어 실무에서 사용하실만한 것만 골라봤어요. 혹시 브러쉬 사용하는 법을 모르신다면, 글 아랫부분에 간단하게 설명해드리니 참고해주세요. TOP 8 일러스트레이터 브러쉬 무료 다운 1. 그런지 브러쉬 12 set 그런지 브러쉬를 일러스트의 그림자나 색면 부분에 그어 사용하면, 조금은 섬뜩하고 오래된듯한 멋스러운 디자인을 만들 수 있습니다. 스크래치 느낌의 선이나, 스프레이로 뿌린 것 같은 점 등 여러 브러쉬가 들어 있습니다. 일러스트에 한정하지 않고, 그래피티 .. 2022. 1. 20.
목록 썸네일 이미지 어도비 일러스트레이터 클리핑 마스크 간단 설명, 응용까지! 일러스트레이터 클리핑 마스크 기능을 소개합니다. 도형이나 문자의 모양대로 이미지를 오려내고, 경계를 부드럽게 하는 방법을 설명합니다. 간단한 사용 방법을 익혀서, 다양하게 응용해보세요! 클리핑 마스크란? 이 기능은 간단히 말해서 ‘숨기고 싶은 부분을 숨기고, 보이고 싶은 부분을 보이는’ 기능입니다. 도형 툴이나 패스로 만든 오브젝트의 모양대로 사진이나 이미지의 필요한 부분만 보여주고 오려낸 것처럼 보이게 하는 것이죠. 마스크 기능은 이런 특성 때문에, 어도비 일러스트레이터에서 작업을 최종적으로 마무리할 때도 많이 사용됩니다. 주변의 불필요한 부분을 숨기거나, 인쇄 영역을 넘어가는 부분을 숨길 때에도 유용합니다. 일러스트레이터 클리핑 마스크 설정하기 그럼, 이제 직접 클리핑 마스크 만들기를 사용해서 이미지.. 2022. 1. 19.
목록 썸네일 이미지 애드센스 광고가 클릭 된 글과 수익, CTR 등 조회하기 애드센스로 수익을 얻으시는 분들은 어떤 글에서 광고 수익이 발생했는지, 수익과 CTR은 어떤지 궁금하실 겁니다. 그것을 알면 수익이 좋은 글과 비슷한 글을 써서 수익을 강화할 수 있으니까요! 저도 이 글을 읽고 계시는 분들과 같은 고민이 들어, 직접 알아보고 조회해봤습니다. 생각보다 쉬우니까 보시면서 바로 따라 해 보세요~ 1. 애널리틱스에서 게시자 페이지 클릭 애드센스 광고가 클릭된 글과 정보를 조회하기 위해서는, 애드센스가 아니라 구글 애널리틱스를 사용해야합니다. 만약 애널리틱스 사용이 처음이시라면, 단계별로 꼼꼼하게 정리해둔 글이 있으니 참고해주세요. 구글 애널리틱스 사용법 총정리(추적 코드 및 초기 설정, 5가지 핵심항목) 구글 애널리틱스 사용법이 어렵게 느껴지시.. 2022. 1. 8.
목록 썸네일 이미지 웹사이트 개설 단계 (도메인 구매부터 브랜딩, 최적화까지!) 웹사이트를 개설하기 위한 작업을 단계별로 설명합니다. 사이트를 개설하고 최적화하는 작업은 하다 보면 익숙한 일이 되지만, 처음에는 복잡하고 헷갈릴 수 있습니다. 따라서 웹사이트를 만들어보지 않으신 분들도 이해하기 쉽도록, 단계별로 필수적인 항목을 안내해드리겠습니다. 웹사이트 개설 단계 0. 사이트 기획 점검 사이트를 개설하려고 하신다면 어느 정도 웹사이트에 대한 기획을 하셨으리라 생각됩니다. 하지만 전체적으로 차근차근 돌아보며 점검을 해보는 것도 좋겠지요. 웹사이트를 제작하는 단계에 대해 설명한 글이 있으니 참고해주세요. 웹사이트를 제작하는 5단계 과정! 기초편 웹사이트 제작 과정의 대략적인 흐름에 대해 알아봅니다. 웹사이트를 제대로 제작하려면 기획부터 출시까지, 많은 계획과 작업이 필요합니다. 하지만 .. 2022. 1. 7.
무료로 코딩 공부하기! 이론, 소스 코드, 튜토리얼 사이트 모음 코딩은 이제 필수과목입니다. 직장인들도 코딩을 배우는 시대에, 큰 결심하고 학원을 등록하지 않고도 집에서 편안하게 코딩을 배워볼 수 있는 사이트들을 소개합니다. 주로 웹을 만드는 프론트 쪽의 코딩(HTML, CSS, JS, JS라이브러리들)에 치우쳐 있지만, 다른 언어도 같이 제공하는 사이트가 많으니 한번 살펴보세요. 1. 무료 코딩 학습 사이트 생활코딩(차근차근 처음부터 천천히) W3Schools(세계적으로 유명) TCP School(W3스쿨의 내용을 한국어로 보고싶다면) MDN(좀 더 어려운 내용) OverAPI(모든 언어에 대한 요약, 치트시트) 2. 예제 소스, 튜토리얼 기초적인 HTML, CSS, JS(jQuery)를 이용한 국가자격증 시험 공부 webStudyBasic(가장 간결한 웹디자인 기.. 2021. 12. 30.
미니멀, 추상 도형 컨셉의 심플한 웹사이트 모음 미니멀하고 심플한 디자인 좋아하시나요? 웹은 가독성이 중요해서 더욱 간결함이 디자인 미덕이 되는 분야인 것 같습니다. 어찌 됐든 문서니까요 ㅎㅎ 이 글에서는 심플한 디자인과 추상적인 도형을 이용한 웹사이트들을 소개해드리겠습니다. 제가 웹서핑하다가 방문하고, 개인적으로 눈에 띄었던 부분을 괄호 속에 메모해두었으니 참고해주세요! 심플한 디자인의 웹사이트 phantom(색면, 큼직한 글씨) eamonnlavelle(페이지마다 색상) bornikirken(배너) kbmaru(여정표 라인) laborfit(씬 전환을 원형으로) theflow(타이포, 여백, 스크롤러) severinobecagli(설명 페이드, 반응형) ultraviolette(섹션마다 배경색, 깔끔한 타이포디자인) launchbuzz(자세히보기 .. 2021. 12. 30.

티스토리툴바