[WebSite] 🖥️ 저작권 무료 목업 사이트 6곳 추천

총 방문자

오늘

어제

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

관리 메뉴

Let's Study Coding

Welcome to Visit!!
Let's get it

웹 개발자로의 새로운 여정을 시작해 보겠습니다.

명 총 방문자

개 총 포스팅

명 오늘 방문자

000일 째 블로그 운영중

여러분들의 방문을
진심으로 환영합니다

웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃

최근 글 ✨

막 올라온 최신 포스팅을 구경해보세요 !

참고하는 웹사이트 목록 💻

필자가 자주 참고하는 웹사이트를 둘러보세요.

2023. 2. 22. 22:45

[WebSite] 🖥️ 웹 개발을 할 때 자주 참고하는 사이트 모음.

목차 제가 웹개발을 할 때 자주 참고하는 사이트를 정리한 포스팅입니다. @Web's CSS 코드펜의 자료들 중 좋은 자료들을 모아 놓은 티스토리 블로그 사이트. 매우 유용한 자료가 많아서 애용하는 블로그다. @web's CSS 코드펜 레퍼런스 사이트입니다. wsss.tistor

2023. 2. 13. 15:16

[WebSite] 🎨 유용한 무료 이미지 사이트 모음

목차 제가 주로 사용하는 또는 인터넷에서 찾은 유용한 무료 이미지 사이트를 모아서 정리한 포스팅입니다. Unsplash Unsplash는 200만개 이상의 완전 무료 고해상도 이미지를 제공하는 무료 이미지 사이트이다. 전 세계의 사진가들이 라이브러리에 사진을 제공하기

2023. 2. 13. 15:01

[WebSite] 🖥️ 저작권 무료 목업 사이트 6곳 추천

포토샵, 일러스트를 이용한 디자인 작업을 할 때 로고나 웹, 패키지 등 디자이너들이 자신의 작업물을 더 업그레이드 하기 위하여 목업을 활용하고 있다. 오늘은 제가 주로 사용했던 무료 목업 사이트를 작성해보려고 한다. 1. Anthony Boyd Graphics Free Mockups

2023. 2. 11. 20:33

[WebSite] 🌈 Gradient 사이트 모음.

목차 프론트엔드 웹개발을 하다 보면 Gradient를 이용하여 작업을 해야할 때가 많다. 문제는 Gradient 디자인을 할 때 단색으로 많은 톤을 잡지만 두 가지 이상을 사용할 때 조합이 어색하다면 전체적인 느낌이 살지 않을 수 있다. 하지만 조합이 잘된 그라데이션(Grada

2023. 2. 11. 19:26

[WebSite] 🖥️ 유용한 SVG 사이트 모음

프론트엔드 작업을 하다보면 SVG를 사용하여 사이트를 만들어야 할 때가 생긴다. 그래서 어떤 유용한 SVG 사이트가 있는지를 알아볼 겸 자주 사용하는 SVG 사이트를 정리해서 작성해보려고 한다. 필자는 주로 7개의 SVG 사이트를 이용한다. 1. 부트스트랩(Bootstra

CSS 스타일링 🎨

웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.

Frontend/CSS, SCSS [SCSS] 🚀 SCSS를 이용한 반응형 웹 개발하기.

목차 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다. 하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자. SCSS를 이용한 반응형 웹 개발. SCSS에서 반응형 사이즈 사용법. 우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다. SCSS $pc2000: 2000px..

Light9639 약 1개월 전

(0)

Frontend/CSS, SCSS [CSS] 🕹️ Border에 그라데이션 적용하기.

목차 바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다. 예제 파일 작성하기 1. Index.html 수정 index.html의 body 부분 안에 밑의 코드를 작성한다. HTML 2. Style.css 작성. 우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다. CSS html { display: flex; align-items: center; justify-content: center; height: 100vh; } 이후 .box1 부분에 다음과 같이 CSS를 작성한다. CSS .box1 { width: 200px; height: 200px; border: 5px solid..

Light9639 약 1개월 전

(0)

Frontend/CSS, SCSS [CSS] 🎯 Ellipsis를 이용하여 말줄임 처리하기.

목차 웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다. CSS overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 -webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정 -webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다. word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨 1. 한줄만 나타내기 결과) Lorem, i..

Light9639 약 1개월 전

(0)

Frontend/CSS, SCSS [CSS] 🕹️ 텍스트에 그라데이션 적용하기.

목차 웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다. 우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다. CSS # 이 속성은 그라데이션을 넣어주는 속성이다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); # 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-background-clip: text; # 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다. -webkit-text-fill-color: transparent; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..

Light9639 약 1개월 전

(6)

전체 보기

Let's Write Message

Guest Book

블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~

Let's Choose Tag Box

Tag Page

원하시는 태그를 클릭해보세요.

Light Dev
Light Dev에서 공부한 내용을 정리합니다.

SCROLL DOWN

-

[WebSite] 🖥️ 저작권 무료 목업 사이트 6곳 추천 본문

Website

[WebSite] 🖥️ 저작권 무료 목업 사이트 6곳 추천

Light9639 2023. 2. 13. 15:01

포토샵, 일러스트를 이용한 디자인 작업을 할 때 로고나 웹, 패키지 등 디자이너들이 자신의 작업물을 더 업그레이드 하기 위하여 목업을 활용하고 있다. 오늘은 제가 주로 사용했던 무료 목업 사이트를 작성해보려고 한다.

Anthony Boyd Graphics

Free Mockups - Anthony Boyd Graphics 사이트는 퀄리티가 대단히 높고 깔끔한 무료 명함 목업이나 무료 캔 목업, 무료 노트북 목업, 무료 UI 목업 등 동일하고 깔끔한 분위기가 특징인 무료 목업 사이트이다.

Free Mockups

Free Mockups by Anthony Boyd Graphics. Easily Edit Smart Objects in Photoshop. Free for personal and commercial use.

www.anthonyboyd.graphics

Freepik

Freepik 사이트는 필자가 애용하는 사이트로 단순 목업 파일만이 아니라 무료 이미지와 무료 목업 배경, 무료 그래픽 소스, 무료 일러스트 소스 등 다양한 무료 그래픽 소스들을 제공하는 사이트이다.

Free Vectors, Stock Photos & PSD Downloads | Freepik

Millions of Free Graphic Resources. ✓ Vectors ✓ Stock Photos ✓ PSD ✓ Icons ✓ All that you need for your Creative Projects. #freepik

www.freepik.com

Mockupsworld

Mockupsworld는 국내에서 가장 잘 알려진 무료 목업 사이트이다. 비록 자체 제작과 다른 곳에서 제작한 무료 배포 파일을 함께 제공하다 보니 목업 파일의 톤이 일정하지 않지만, 다양하고 종류의 목업들이 존재하며 사이트에서 제공하는 모든 목업 파일이 무료라는 장점이 있다.

Mockups Archive

This website uses cookies We inform you that this site uses own, technical and third parties cookies to make sure our web page is user-friendly and to guarantee a high functionality of the webpage. By continuing to browse this website, you declare to accep

www.mockupworld.co

Pixeden

Pixeden은 프리미엄 디자인과 웹 리소스까지 다양한 카테고리의 디자인 관련 소스들을 제공하는 목업 사이트이다. 멤버십 정기구독(월 10달러)을 하면 무료로 배포하는 목업 파일 말고도 사이트에서 제공하는 모든 유료 소스들을 제한 없이 사용할 수 있다.

Free Graphics | Pixeden

This is a square mail psd cardboard box packaging mockup to showcase your brand product designs. Easily change colours and add…

www.pixeden.com

Weenidy

Weenidy는 모던하고 감각적인 고퀄리티 무료 목업 템플릿 사이트이다. 주로 흰색 입간판 목업이나 건물 입체 로고 목업, 나무 간판 목업, 무료 명함 레이아웃, 무료 옥외 간판 목업, 무료 포트폴리오 템플릿 등 국내의 디자이너들이 자주 사용하는 소스들을 제공하는 사이트이다.

위니디 - 실무 밀착형 디자인 리소스 서비스

전지적 국내 디자인 시점, 어디서도 본적 없는 새로운 디자인 리소스, 템플릿에서 목업까지!

weenidy.com