[꿀정보] 벤치마킹 사이트 굿디자인웹

안녕하세요. 플입니다. 오늘은 벤치마킹 사이트를 추천드리려고 합니다. 1. 굿디자인웹 http://gdweb.co.kr/ 굿디자인웹 국내 최우수 이미지, 웹사이트. 굿디자인웹 gdweb.co.kr 벤치마킹할 때 주로 찾는 사이트입니다. 굿디자인웹이죠. 업데이트도 빠른 편이고 심사를 거쳐서 올라오는 홈페이지들이다 보니 도움이 많이 됩니다. 유행하는 디자인이나 구조도 생각해볼 수 있습니다. 2. 카테고리 위의 이미지처럼 디자인 타입에 따라서 분류를 나눠 찾아볼 수도 있습니다. 원하는 디자인 느낌을 찾기 편하죠. 모바일이나 해외사이트도 볼 수 있어서 좋습니다. 저는 특히 해외사이트를 볼 수 있다는 점을 좋아합니다. 이렇게 카테고리도 나눠져 있어서 찾아볼 때 유용하죠. 특별한 디자인을 하고 싶다고 생각할 때 해..

tip/디자인 팁 · 2020. 1. 3. 07:30

[css] z-index

안녕하세요. 플입니다. z-index에 대해 그려봤어요. 2. z-index z-index z-index는 겹치는 요소들 간의 순서를 정리해줄 때 사용해요. 위쪽으로 올리고 싶은 요소에 값을 더 크게 적어주는데 z-index: 30; 위처럼 숫자를 값으로 입력하고, 숫자가 높을수록 위쪽으로 올라온답니다. 포토샵의 레이어와 동일하다고 여기면 조금 더 쉽게 이해할 수 있죠. 포토샵을 몰라도 괜찮아요. 이렇게 생각해보면 어떨까요? 1층보다는 2층이 위에 있죠. 숫자는 그런 의미랍니다. 일반적으로 요소들이 겹치는 일은 거의 없지만 position을 사용하면 이야기가 달라져버립니다. 한 요소에만 position을 사용한다면 상관없겠지만 사람 일이라는 게 그렇게 마음대로 되지는 않다는 걸 저희는 이미 알고 있죠. ..

coding/html + css · 2020. 1. 2. 07:30

[css] 레이어 설정

안녕하세요. 플입니다. css에서 위치 순서를 정해보겠습니다. 1. z-index ul{ z-index:10; } 이미지처럼 두 개 이상의 요소가 겹쳤을 때 순서를 정해주는 코드가 z-index입니다. 포토샵을 사용하신다면 포토샵의 레이어와 같은 원리라고 이해하시면 됩니다. z-index의 숫자가 클수록 위쪽으로 올라옵니다. 2. 범위 ul{ z-index:-10; } z-index의 범위는 정수로 -(마이너스)까지 포함합니다. 수를 -10으로 줬을 때 뒤쪽으로 보내져 보이지 않게 된 것을 알 수 있습니다. 자리를 표시하는 부분이 살짝 보이지만 요소는 보이지 않죠. 2020년 새해 복 많이 받으세요~! 그럼 이만. 총총.

coding/html + css · 2020. 1. 1. 07:30

[반응형] 포트폴리오 사이트

안녕하세요. 플입니다. 포트폴리오 사이트 리뉴얼을 완성했습니다 1. 디자인 전체 디자인이에요. 반응형 홈페이지라 pc버전, 태블릿 버전, 모바일 버전, 세 가지 모두 있답니다. 이번엔 노랑과 청록을 주요 컬러로 해서 디자인을 진행해봤어요. 네모 모양을 사용해 깔끔한 느낌을 주도록 노력했습니다. 포트폴리오 취지에 맞게 가장 잘 보이는 것은 작업물이도록 신경 썼어요. 2. 주소 http://ssimplay.com/ ssimplay ssimplay.com 도메인 주소는 이전과 동일하답니다. 직접 방문하여 여러 기능들과 포트폴리오를 구경해주세요~ 3. 포트폴리오 페이지 마지막으로 포트폴리오 페이지의 이미지를 올려보고 마무리하겠습니다. 그럼 이만. 총총.

coding/개발 팁 · 2019. 12. 27. 07:30

[html] 뷰포트 설정하기

안녕하세요. 플입니다. 오늘은 뷰포트를 설정해보겠습니다. 1. 뷰포트(viewport) 뷰포트는 모바일 화면을 위해 꼭 필요한 태그입니다. 뷰포트를 설정 안 했을 때 화면입니다. 뷰포트를 설정했을 때 화면입니다. 어떤 차이가 있는지 확실히 느껴지시죠? 2. 뷰포트 설정 위에도 같은 코드를 적었는데요 이 메타태그를 태그 안에 넣어주시면 설정 완료입니다. 저렇게 메타태그를 넣어줍니다. 그럼 이만. 총총.

coding/html + css · 2019. 12. 23. 07:30