본문 바로가기

퍼블리셔

(11)
[벤치마킹] 굿디자인웹 안녕하세요. 플입니다. 오늘은 벤치마킹 사이트를 추천드리려고 합니다. 1. 굿디자인웹 http://gdweb.co.kr/ 굿디자인웹 국내 최우수 이미지, 웹사이트. 굿디자인웹 gdweb.co.kr 벤치마킹할 때 주로 찾는 사이트입니다. 굿디자인웹이죠. 업데이트도 빠른 편이고 심사를 거쳐서 올라오는 홈페이지들이다 보니 도움이 많이 됩니다. 유행하는 디자인이나 구조도 생각해볼 수 있습니다. 2. 카테고리 위의 이미지처럼 디자인 타입에 따라서 분류를 나눠 찾아볼 수도 있습니다. 원하는 디자인 느낌을 찾기 편하죠. 모바일이나 해외사이트도 볼 수 있어서 좋습니다. 저는 특히 해외사이트를 볼 수 있다는 점을 좋아합니다. 이렇게 카테고리도 나눠져 있어서 찾아볼 때 유용하죠. 특별한 디자인을 하고 싶다고 생각할 때 해..
[css] z-index 안녕하세요. 플입니다. z-index에 대해 그려봤어요. 2. z-index z-index z-index는 겹치는 요소들 간의 순서를 정리해줄 때 사용해요. 위쪽으로 올리고 싶은 요소에 값을 더 크게 적어주는데 z-index: 30; 위처럼 숫자를 값으로 입력하고, 숫자가 높을수록 위쪽으로 올라온답니다. 포토샵의 레이어와 동일하다고 여기면 조금 더 쉽게 이해할 수 있죠. 포토샵을 몰라도 괜찮아요. 이렇게 생각해보면 어떨까요? 1층보다는 2층이 위에 있죠. 숫자는 그런 의미랍니다. 일반적으로 요소들이 겹치는 일은 거의 없지만 position을 사용하면 이야기가 달라져버립니다. 한 요소에만 position을 사용한다면 상관없겠지만 사람 일이라는 게 그렇게 마음대로 되지는 않다는 걸 저희는 이미 알고 있죠. ..
[css] hover로 색 바꾸기 안녕하세요. 플입니다. 오늘은 hover를 이용해 마우스 오버 시 색을 변경해보겠습니다. ▷hover hover는 '맴돌다'라는 뜻을 가진 영어단어입니다. 마우스가 위에서 맴돌고 있을 때라고 이해할 수 있습니다. 저는 마우스 오버 시 적용되는 css로 생각하고 작업합니다. ▷사용 이유 hover를 사용하는 건 사용자의 편의를 위해 들어가는 효과입니다. 마우스를 올렸을 때 어떤 효과가 적용되거나 마우스의 모양이 손가락 모양이 되면 사용자들은 '클릭을 하는 부분'이라는 것을 직감적으로 알게 됩니다. 오늘 예시로 사용할 메뉴 색상을 변경하는 것을 살펴보면 마우스를 올렸을 때 색상이 변경되면 사용자는 클릭하는 부분이라는 것을 쉽게 알 수 있습니다. 이처럼 사용자의 클릭을 유도해 조금 더 쉽게 홈페이지를 이용할 ..
[Node.js] cmd로 실행하기 안녕하세요. 플입니다. 오늘은 Node.js를 실행해보겠습니다. 1. cmd 열기 실행창을 열어 cmd를 열어줍니다. 단축키는 window + R입니다. 2. 폴더 이동하기 기본 폴더가 C로 설정되어 있으니 D폴더로 이동해줘야 합니다. d:를 입력해 폴더를 이동해줍니다. d폴더로 이동했습니다. 다음은 Node.js파일을 저장한 폴더로 이동해줍니다. 명령어는 cd 폴더명입니다. cd는 "Change Directory"의 줄임말로 디렉토리, 즉 폴더를 바꿔주는 명령어입니다. 저는 폴더명을 nodejs라고 저장했기 때문에 cd nodejs라고 적어주었습니다. 엔터를 누르면 폴더가 이동된 걸 확인할 수 있습니다. 3. Node.js 실행하기 제가 실행시킬 node.js 파일입니다. nodejs라는 폴더 안쪽에 ..
[반응형사이트] 포폴사이트 시안 안녕하세요. 플입니다. 오늘은 완성된 포폴 사이트 메인 시안을 가져와봤습니다. 로고는 무료로 제작할 수 있는 사이트에서 제작했고, 컬러는 로고 컬러에 맞춰 진한 청록색과 노란색으로 포인트를 주었습니다. 전체적으로 사각형 모양을 주로 사용했고, 플랫 한 느낌을 주기 위해 노력했습니다. 노란색 배경으로 흰 배경일 때보다 경쾌한 느낌을 주려고 했습니다. 메인에서는 포트폴리오로 보일 작업물을 가장 큰 비중으로 넣어 집중시켰습니다. 사이트 이름과 제작 날짜를 적어 신뢰감을 높이는 효과를 기대해봤습니다. 바로가기 아이콘 역시 사각형 모양을 사용하였고 플랫 한 느낌을 주려고 노력했습니다. 마지막으로 시안 이미지를 남기고 마무리하겠습니다. 그럼 이만. 총총.
[css] border-style 종류 안녕하세요. 플입니다. 오늘은 border-style 종류를 알아보겠습니다. border 보더는 테두리를 말합니다. css에서 border 값을 설정하면 테두리 디자인을 할 수 있습니다. 오늘은 그중 style에만 중점을 두고 살펴보겠습니다. 1. dotted 도티드는 점선이라고 생각하시면 됩니다. 테두리가 점선으로 처리됩니다. p{ border-style: dotted; } 2. dashed 대쉬드는 짧은 선이 연속으로 나옵니다. 점선과 비슷하지만 점보다는 조금 긴 모양이죠. p{ border-style: dashed; } 3. solid 솔리드는 가장 많이 사용하는 형태로 선 타입입니다. p{ border-style: solid; } 3. double 더블은 두줄이 나옵니다. 주의할 점은 두줄이기 때..
[리디자인] 피피핏자 서브 시안 피피핏자의 서브 시안을 완성했습니다. 상단과 하단은 메인과 동일하게 들어가고 좌측으로 서브네비게이션이 위치한 디자인으로 설정했습니다. 해당 페이지는 노란색 포인트 컬러로 배경이 들어가게 해주었습니다. *동명의 다른 업체와는 전혀 관련이 없습니다.
명함제작 안녕하세요. 씸플레이입니다. 최근에 명함을 제작했답니다. 이 이미지가 제작용으로 만든 명함 파일입니다. 로즈골드박을 위해서 단색으로 디자인하였습니다. 로즈골드박이 너무 마음에 들어요. 제작은 #디자인봄봄 에서 제작했습니다. 글자가 약간 작은 감이 있지만 엄청 문제가 되거나 하는 것은 아니라서 만족하고 있습니다. 빛에 따라서 반짝반짝하는 게 마음에 들어요. 사진으로도 중간중간 반짝임이 보여서 만족스러워요. 흑백으로 보면 또 다른 분위기의 느낌이 납니다.