디자인 정보

box-shadow: h-shadow, v-shadow, blur, spread, color | inset | initial | inherit ; h-shadow 가로방향의 그림자 위치(position). 음수는 좌측, 양수는 우측방향. v-shadow 세로방향의 그림자 위치(position). 음수는 위쪽, 양수는 아랫쪽. blur (optional) 흐릿한 효과(blur)의 길이. spread (optional) 그림자를 확장하는 크기(size). 이 값이 클수록 원본 그림자보다 설정값만큼 그림자가 커지며, 음수도 사용가능. color 그림자의 색상. inset (optional) 이 속성을 설정하면, 그림자가 테두리의 안쪽으로 생성됨. initial 현재 설정을 전체 HTML문서 내의 box-sha..

글자 hover 시 글자아래로 라인이 그려지는 hover effect 유용한 정보라 codepen에서 보고 스크랩할겸 가져왔다. 그냥 가져와도 되는거 맞나..? #1 See the Pen Border bottom hover effect by jihun Sim (@simjihun) on CodePen. #2 See the Pen PooerOj by CreativeStudio (@creativestudiocss) on CodePen.

이미지 스프라이트 image sprite 웹사이트의 로딩시간을 줄이기 위해 하나의 이미지 파일에 여러개의 이미지가 포함되어 있는 것을 말한다. 주로 웹페이지들 곳곳에 들어가는 작은 아이콘들을 모아 하나의 이미지 스프라이트로 만들고 css의 background-position으로 가로 세로 위치를 지정해 사용한다. https://spritegen.website-performance.org/ CSS Sprite Generator, Editor, and Code --> --> --> CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combine..

https://fonts.google.com/ 사이트 접속 후 사용하고자 하는 웹폰트를 검색해 +버튼을 클릭해서 추가해준다. (여러가지 사용가능) 소스를 제공해주니 그대로 복사 붙여넣기만 하면 사용가능하다. https://fonts.google.com/ 불러오는 중입니다...

애플의 스큐어모티즘-플랫-구글의 머터리얼 디자인을 지나 뉴모티즘이 떠오르고 있다. 이는 드리블의 알렉산더 플루토라는 유저로부터 출발했다고 한다. 플랫디자인처럼 색상을 사용하여 구분하기 보다는 그림자를 활용하여 주목성을 띄게 한다. 관련링크 https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6 https://www.wishket.com/news-center/detail/404/ 고맙게도 어떤 웹개발자가 뉴모피즘 생성기를 만들어 두었다. https://neumorphism.io/#55b9f3 Neumorphism/Soft UI CSS shadow generator CSS code generator that will help with colors, ..

본고딕 웹폰트 사용하기 @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 위 inport url에 있는 주소를 통해 들어가 보면 포맷이 format('woff2');로 선언되어 있는 것을 알 수 있다. 하지만 이러면 익스플로러에선 사용할 수가 없어서 아래의 내용을 추가해줘야 한다 @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v..

Online image map editor 이미지맵의 좌표를 쉽게 딸 수 있다.http://maschek.hu/imagemap/imgmap/ 1. 파일선택 버튼 클릭해서 사용하고자 하는 이미지 선택 2. 바로 옆 업로드 버튼을 클릭하면 Uploading. Please wait...- upload another↓Uploaded Untitled-4.jpg- upload another이렇게 처음엔 업로딩중이라고 기다리라고 뜨다가 문구가 바뀐다. 파일명이 나오면 업로드 완료. 3. 마지막으로 accept 을 클릭하면 이미지 등록완료되면서 아래 빈칸에 내가 등록한 이미지가 뜬다.4. 원하는 이미지맵 모양 선택해서 이미지 드래그하면 이미지맵 좌표가 나온다.