position:absolute 일 때 가운데 정렬하는 방법 left:50%; transform:translateX(-50%;) *크로스 브라우징 사용 주의

이미지 흑백처리 CSS 이미지 작업 없이 CSS 코드만으로 흑백 처리하는 방법 마우스 hover 효과 적용시 유용하다.

멋진 명조체로 디자인된 웹사이트 11 을 소개합니다. Craig Reynolds 뉴욕 출신 Craig Reynolds 라는 디자이너의 포트폴리오 사이트로 마우스 오버 시 타이포 디자인 위로 이미지가 커서에 따라 움직이며 나타나는 효과가 인상적 입니다. 명조체와 이미지 페이드 효과가 분위기 있는 웹 디자인을 보여주고 있고, 타이틀 hover 시 해당하는 콘텐츠를 이미지로 보여주어 더욱 직관적입니다. Marvin Schwaibold 디자이너의 포트폴리오 사이트입니다. 포트폴리오의 썸네일, 상징적인 이미지와 함께 잘 보여주고 있습니다. 정형화된 레이아웃이 아닌 스크롤 인터랙션으로 이미지가 등장하는 방식이 자유로움을 느끼게 해줍니다. 특정 아이콘을 로고화하여 표현한 점이 눈여겨볼만 합니다. reiter-fris..

웹에 최적화된 이미지 파일 유형인 .svg 아이콘을 무료로 다운로드 할 수 있는 사이트를 소개합니다. feather https://feathericons.com/ 지속적으로 새로운 아이콘을 업데이트하는 듯 합니다. png로 크게 키우고 이미지를 작게 조절해도 깨지기 일쑤인 아이콘 이미지 파일을 SVG 유형으로 사용할 수 있고, 깔끔한 디자인이 포인트인 고마운 무료 사이트입니다. 제작자 Colebemis 원하는 아이콘을 클릭하면 바로 파일이 다운로드 됩니다. Size와 Stoke width를 조절하여 원하는 느낌의 아이콘 디자인으로 변경하여 다운로드도 가능합니다. Color 코드를 입력하여 컬러 변경도 가능합니다. 상단의 Reset 버튼을 클릭 시 모든 설정이 초기화됩니다. feather에서 다운로드한 s..

웹디자인에 유용한 여름테마 컬러 팔레트를 제작하였습니다. 이미지 수정 금지 및 출처를 밝히고 자유로운 배포 가능합니다. @dbre.co.kr Summer flower color palette Flower and bees color palette Fruits color palette Summer icecream color palette Summer beach color palette

여러개의 페이지로 생성할만한 충분한 양의 콘텐츠가 없을 때 소량의 콘텐츠와 텍스트만으로도 멋진 웹사이트를 구현할 수 있는 원페이지형 웹사이트 21가지를 소개합니다. 원페이지 웹사이트란 접속한 전면페이지에서 스크롤 다운으로 전체 메뉴가 구성되어 별도의 페이지 이동이 없이 전체 스크롤 페이지 내에서 위치를 이동할 수 있도록 구현된 웹 페이지입니다. 원페이지 웹사이트는 콘텐츠의 양이 적어 웹사이트 내에서 머물 수 있는 요소가 적을 수 있지만, 대신 스크롤을 내리고 슬라이드를 탐험할 수 있도록 다양한 인터랙션을 적용하면 콘텐츠의 양이 많은 웹사이트보다 콘셉을 전달하고 감각을 표현하는 데에 더욱 효과적일 수 있습니다. 요즘 많은 브랜드와 기업들이 단기적인 캠페인을 홍보하거나 마이크로사이트 등으로 활용하고 있습ㄴ다..

기존에는 맥에 otf 유형의 폰트 파일만 사용이 가능했는데, 요즘에는 ttf 파일도 가능하다고 하네요. 맥에 폰트 설치하는 방법입니다. 저는 무료 영문폰트는 dafont 라는 곳에서 주로 다운로드합니다. 고딕, 명조, 핸드라이팅 등 폰트의 성격 별로 잘 나위어져있고, 영문폰트라 구매가 저렴하며, 일부는 개인 사용 무료 또는 100% 무료인 경우가 많아 잘 사용하고 있어요. 가장 큰 편리한 점은 내가 적용하고자 하는 텍스트를 해당 폰트로 미리보기하여 검색할 수 있다는 점입니다. dafont는 일반 작가들이 폰트를 업로드할 수 있는 사이트로, 저도 hapole 폰트를 만들어 배포하기도 했습니다. Hapole font Download 여기서 폰트를 다운받았는데, 맥에는 어떻게 적용할까요? 맥에 폰트 설치하기 ..

아크릴을 소재로 한 멋진 디자인들을 소개합니다. kisdio THE CURTIS CASA paperartists moodyboard Marijke sabine_marcelis CalligraphyKE biasol thebrandidentity imprimeriedumarais. oflux 다음에 더 유익한 콘텐츠로 찾아올게요!

[Full stack Designer - Publishing] 풀스택 디자이너가 되기 위한 첫 걸음, 퍼블리싱 공부를 저는 cafe24 에디터로 이것저것 수정하면서 자연스레 익히게 됐어요. 하지만 cafe24 에디터는 cafe24에서만 사용하는 코드들이 있고, 공개되어있지 않은 소스들도 많아서 자유로운 수정에는 한계가 있습니다. 무료 호스팅이기 때문에 수정의 범위가 제한되어있는 것은 당연하겠죠. 그래도 무료 호스팅에서 이만큼의 기능을을 모두 무료로 사용할 수 있다는 것은 큰 장점입니다. 많이들 아시겠지만 cafe24는 쇼핑몰에 특화된 무료 이미지호스팅으로 관리자와 ftp까지 제공하는 혜자로운 서비스입니다. 최근에는 스마트모드와 에디봇이라는 더 쉽고 편리하게 UI가 개선된 형태의 서비스를 제공하고 있어 진..

[맥/맥북 초보탈출] 카카오톡이나 기타 링크를 바로 클릭했을 때 맥에서 바로 safari로 연결되어 불편하셨던 경험 있으신가요? 익스플로러가 지원을 중단하면서 많은 유저들이 크롬으로 이동했는데, 크롬의 북마크 링크와 구글 서비스들을 모두 연동해서 사용하다보면 safari가 여간 불편하지 않을 수 없습니다. 물론 아이폰에서는 safari가 익숙해서 아이폰은 무조건 safari를 이용하고 있지만요. 크롬에서는 북마크바에 넣기만 하면 구글아이디로 로그인 시 모든 북마크를 연동할 수 있어 컴퓨터를 바꿔 사용해도 북마크에 즐겨찾기된 링크들을 모두 똑같이 연동해서 사용할 수 있다는 것이 큰 장점이에요. 맥 기본 브라우저 설정 변경하기 맥에서 기본 브라우저가 safari로 되어있는 것을 변경하려고 하니 검색 결과는 ..

2020년의 웹디자인 트렌드를 6가지 키워드로 살펴보았습니다. HTML5와 CSS3가 도입되면서 스크립트가 아닌 간단한 코딩으로 다양한 소스의 구현이 원활해짐에 따라 배경, 이미지, 텍스트가 각각의 요소로써 사용자의 행동에 따라 반응하는 인터랙션이 가미된 웹사이트가 늘어나고 있습니다. 감각적인 컨셉의 디자인임에도 정지된 이미지가 아닌 몇 가지 요소에 모션이 적용되어 웹상에서 더욱 생동감있는 경험을 제공하며, 이는 사용자가 인식하는 해당 브랜드의 가치를 더욱 높여줍니다. 2020 Web design TREND 1. 풀스크린 와이드 전면페이지 2. 스크롤 인터랙션 3. 로딩 아이콘 4. 볼드/컬러 텍스트 5. 스토리텔링 6. 일러스트레이션 1. 풀스크린 와이드 전면페이지 스크롤 없는 와이드형태의 전면페이지 ..