안녕하세요 찐망고입니다. 오늘은 position속성 중 sticky를 써볼 건데요.. position관련 CSS를 포스팅 해놓은 게 없네요? 이런;; html에서 포지션역할은 여러 가지가 있습니다. 잘 쓰면 너무 좋은 데 absolute를 남발하는 개발자들 보면 단전에서부터 화가.. 요즘은 그러신 분 안 계시죠? sticky를 아직 안 써본 분이 계시려나.. 아마 ie에선 지원을 안 해서 쓰고 싶어도 못쓰는 그런일들이 있었죠. sticky속성은 relative와 fixed가 같이 적용된다고 생각하면 되는데요. https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky W3Schools online HTML editor The W3Sch..
https://collectui.com/challenges/sign-up 안녕하세요 찐망고입니다. 이전 글에 디자인 참고 레퍼런스 사이트관련 글을 포스팅했는데요. 디자인 레퍼런스 참고사이트 1. WWIT - What Was IT 국내의 UI/UX 모바일 패턴을 수집하는 사이트 입니다. UI 키트, 아이콘, 템플릿 등 다양한 디자인 리소스를 제공합니다. 모바일APP디자인이 한눈에 보이죠? 기획이나 디자인에 레퍼 uiweb.tistory.com 오늘은 ui디자인 레퍼런스 사이트를 포스팅 해보려고 합니다. 1. Mobbin - iOS 앱 UI 사이트 https://mobbin.com/browse/ios/apps 2. UI Garage - ui플랫폼 별 분류 https://uigarage.net/ UI Gara..
안녕하세요 찐망고입니다. 요즘 버튼모양 테두리에도 그라디언트가 들어가는 디자인을 보게 되는데요. 쉽게 테두리에 그라디언트를 적용해 보겠습니다. 그라디언트는 원래 image의 영역이에요. 그래서 본디 배경색에 그라디언트를 넣는 경우에도 background-image로 적용했거든요. HTML 삽입 미리보기할 수 없는 소스 a요소의 테두리만 그라디언트로 보이기 위해 a요소 자체에 배경이미지로 그라디언트를 넣고, span요소에도 배경색을 넣고 width와 height를 2px씩 줄여서 테두리처럼 보이게 만드는 방법이 있습니다 ㅎㅎ 물론 지금은 border자체에 border-image가 적용 가능 하므로 HTML 삽입 미리보기할 수 없는 소스 그라디언트가 들어가는 게 보이죠? border-image-slice는 ..
안녕하세요 찐망고 입니다. 오늘은 웹내비게이션에 대해 알아보려 합니다. 웹사이트에 접속한 사용자가 현재 위치와 이동경로를 파악할 수 있도록 돕는 내비게이션은 매우 중요합니다. 이는 사용자가 빠르게 원하는 목적을 달성할 수 있도록 도와주죠. 내비게이션은 그 구성에 따라 여러 단계로 나누어집니다. 예를 들어 사이트는 노란색 컬러에 해당하는 1단 메뉴를 눌렀을 때 빨간색에 해당하는 2단 메뉴가 나오고 빨간색을 기준으로 파랑계열의 3단 메뉴가 나옵니다. 이처럼 3단계 내비게이션은 깊이가 있지만, 너무 많은 단계는 사용자에게 혼란을 줄 수 있어 피하는 게 좋습니다. 반응형 사이트를 설계할 때는 PC와 모바일에서 내비게이션을 어떻게 표현할지 고민해야 합니다. 때로는 한 개의 내비게이션을 공유하고, 때로는 두 개의 ..
- Total
- Today
- Yesterday
- uxdesign
- 웹접근성
- Slick
- margin
- 시멘틱마크업
- boxmodel
- 포토샵합성
- css4
- 코딩교육
- 피그마플러그인
- 스마트폰해상도
- css
- 웹디자인
- padding
- JavaScript
- 슬라이드플러그인
- Border
- 자바스크립트숫자카운트
- 크로스브라우징
- 반응형웹
- css그리드
- uidesign
- slickAPI
- 디자인팁
- 웹표준
- 프로그래밍기초
- uiux
- JavaScriptTips
- CSS3
- UI디자인
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |