안녕하세요 찐망고입니다. 디자인은 단순히 시각적인 요소를 넘어서 사용자와의 소통을 위한 도구인데요. 효과적인 디자인을 위해 스토리텔링을 활용하고, 각 디자인 요소에 의미를 부여하는 방법을 포스팅 해볼게요. 1. 디자인에 스토리 담기디자인의 각 요소에 의미를 부여하고, 사용자와의 소통을 강화하기 위해 스토리텔링을 활용하세요.스토리텔링: 디자인에 이야기를 담아내어 사용자와 감정적으로 연결됩니다. 예를 들어, 브랜드의 역사나 철학을 시각적으로 표현합니다.의미부여: 디자인 요소 하나하나에 의미를 담아 일관성을 부여합니다.화면 구성: 이벤트 배너를 클릭을 유도하기 좋은 위치에 배치하여 사용자의 행동을 유도합니다.디자이너의 고민 이해하기: 디자인을 보면서 디자이너의 고민을 이해해보세요.이 버튼을 왜 이렇게 배치했..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/kJDqx/btsHLVi7Zrx/KE24YtpkMA14g78M772oUk/img.png)
안녕하세요 찐망고 입니다.오늘은 두개의 swiper를 이용하여 탭을 만들어볼건데요. 참고 사이트는 구루미비즈입니다. AI 화상 솔루션 구루미비즈AI화상상담솔루션, AI교육, AI서비스 구축을 위한 최적의 AI화상플랫폼biz.gooroomee.com 먼저, 각각의 Swiper 코드부터 살펴볼까요?const swiper01 = new Swiper(".s01-swiper", { slidesPerView: 1.3, spaceBetween: 20, pagination: { el: ".s01-swiper .swiper-pagination", type: "progressbar", }, breakpoints: { 1281: { ..
안녕하세요찐망고 입니다. 오늘은 navi요소에서 많이 쓰는 해당 요소를 클릭했을 때만 클래스를 추가하고나머지 요소들은 클래스를 제거하는 코드를 볼 건데요..탭이랑 비슷하죠? 1. 기본코드const navMenus = document.querySelectorAll(".navi > ul > li");navMenus.forEach(navMenu => { navMenu.addEventListener("click", () => { navMenu.classList.toggle("on"); })}) 일단 위 코드는 클릭한 li요소들에게 on클래스가 추가됩니다.다시 클릭을 해야 제거되겠죠? 2. 개선된 코드const navMenus = document.querySelectorAll(".nav..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/DuNyD/btsHtSNpGZ0/hKS0hK3ci7NiIGUJQVjHH0/img.png)
안녕하세요 찐망고입니다. 오늘은 CSS에 clip-path를 이용하여 사다리꼴 이미지 형태의 선택영역을 만들어볼 건데요.이전에는 상상도 할 수 없던 디자인들이 요새는 쏟아져 나오네요. 😀 a와 b섹션이 나뉘어 있고, 각각 클릭하면 새창으로 넘어갑니다.선택영역을 사다리꼴모양과 일치하게 만들어야 하는 거죠그 이전엔 불가했던 작업이지만,아! 이미지 맵을 쓰면 되었으려나.. 하지만 이미지 맵은 반응형으로 만들 수 없어요 바로 작업해 볼까요 각 단락에 해당하는 링크를 걸어주고 * { margin: 0; padding: 0;} body { background-color: #f0f0f0;}.container { width: 100%; height: 100dvh; positi..
안녕하세요 찐망고 입니다.오늘은 `:where()`셀렉터 관련 포스팅을 해볼건데요. `:where()`와 `:is()`는 둘다 CSS4초안에 소개된 새로운 기능입니다.이전글에서 `:is()`셀렉터 관련 포스팅을 보고 오시길 추천합니다. CSS의 :is() 클래스 활용하기안녕하세요 찐망고입니다. CSS의 `:is()` 함수는 CSS의 단점이었던반복되는 셀렉터의 형태를 더 간결하게 그룹화하는 의사클래스입니다. 아래 예시를 볼까요?ul li,ol li {}:is(ul, ol) li {} 위에 있는uiweb.tistory.com `:where()` 셀렉터는 여러개의 셀렉터를 한꺼번에 그룹화 할 수 있으며, 셀렉터의 구체성을 0으로 만듭니다.셀렉터를 한꺼번에 그룹화한다 그건 `:is()`와 같죠 저번 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/B6fKR/btsHorhHHEF/8tJnkwu2xoDumIj6tXSXvK/img.png)
안녕하세요 찐망고입니다. CSS의 `:is()` 함수는 CSS의 단점이었던반복되는 셀렉터의 형태를 더 간결하게 그룹화하는 의사클래스입니다. 아래 예시를 볼까요?ul li,ol li {}:is(ul, ol) li {} 위에 있는 각각의 li요소를 선택할 때 :is() 클래스를 사용하면 묶어서 처리가 가능합니다. 다중선택에 특화된 셀렉터이죠:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { color: #BADA55;}section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article..
안녕하세요 찐망고입니다. CSS의 `:not()` 함수는 특정요소를 제외한 나머지 요소들을 선택할 수 있는 선택자입니다. 아래 예시를 볼까요? list01 list02 list03 list04.list li:not(.list02) { background-color: orange;} list02 클래스를 가진 두 번째 li요소를 제외한 나머지 li요소들에게 오렌지색 배경이 지정됩니다. 다음 예시를 보면not실렉터를 이용하여 하나의 클래스가 아닌 여러 개의 클래스를 선택할 수 있습니다.body :not(h1, h2, h3, h4, h5, h6) { color: gray;}body요소 중 제목요소들을 제외하고 컬러를 그레이로 지정합니다. not실렉터를 이용하여 특정 타입의 입..
안녕하세요 찐망고입니다. CSS의 `:has()` 함수는 특정 자식 요소를 가진 부모 요소를 선택할 수 있게 해줍니다.이것은 이전 CSS선택자에선 할 수 없는 것들을 가능하게 해주는데요. 아래 예시를 볼까요? Child1 Special Child Child2 .parent:has(.special) { background-color: yellow;} 위 코드에서 `.special` 클래스를 가진 두번째 `.parent` 요소가 선택 되어 배경색이 바뀝니다. 다음 예시도 볼까요? menu depth.. menu depth.. menu ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/YDoDv/btsGOcTDlOF/vniMqankSHKnEl2PeX3HCk/img.png)
안녕하세요 찐망고입니다. 오늘은 재미있는 게임, 꼬맨틀을 포스팅 해볼까 하는데요.이게임은 단어 유사도를 추측하여 매일 정해진 '오늘의 단어'를 맞히는 게임이에요꼬맨틀은 뉴스젤리라는 데이터시각화 전문 기업에서 만들었고,이미 753일이 넘게 매일 다양한 단어들을 맞히는 도전을 제공하고 있답니다. 엄청 오랜만에 다시 해보는데 재밌네요 ㅎㅎ 게임 방법은 간단해요.단어를 입력하면, 그 단어가 정답 단어와 얼마나 유사한지를 수치로 보여줘요유사도가 +100에 가까울 수록 단어가 정답에 가깝다는 뜻이죠.그리고 1,000위 안에 들어가면 유사도 순위도 확인할 수 있어요.단어는 명사, 동사, 형용사 등 모든 품사를 포함 할 수 있으며, 2글자 이상이어야 해요. 하지..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bpwCRr/btsGI6dLiwt/1HOV9k1FM3idpvNP9Yxgm1/img.png)
안녕하세요 찐망고입니다. 오늘은 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..
- Total
- Today
- Yesterday
- uiux
- 슬라이드플러그인
- 웹표준
- margin
- Border
- 스마트폰해상도
- 피그마플러그인
- 시멘틱마크업
- 웹디자인
- padding
- css
- 코딩교육
- 자바스크립트숫자카운트
- 반응형웹
- 크로스브라우징
- 포토샵합성
- 웹접근성
- JavaScriptTips
- CSS3
- UI디자인
- uidesign
- JavaScript
- css그리드
- Slick
- css4
- 프로그래밍기초
- boxmodel
- uxdesign
- 디자인팁
- slickAPI
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |