IT정보 웹디자인 유익한 정보

▶ 컬러 참조 사이트 - 유용한 사이트 ▶ 홈페이지 제작시 참고하면 좋을 색상 배색사이트 ▶ https://webgradients.com ▶ https://2colors.colorion.co Two Color Combinations Two color combination palettes 2colors.colorion.co ▶ https://www.colorion.co/ Colorion Curated Color Palettes with Search and Tags Support www.colorion.co ▶ https://gradientbuttons.colorion.co/ Gradient buttons Gradient buttons gradientbuttons.colorion.co ▶ https://ww..

jquery Dom 구조 탐색 Traversing CSS Styling and Jquery parseInt() 및 parseFloat() 전역함수 이용 객체생성방법 1. new 생성자 사용 var obj : Array = new Object() obj.a = 10; obj.name = "홍길동"; obj.fn = function(){}; 2. 객체를 생성하면서 요소 추가 var my_array = new Object({ a:10, name: "홍길동", fn: function(){} }); 3. 중괄호 사용하여 직접 생성 var my_array ={ a:10, name: "홍길동", fn:function(){} };

★★비즈니스 데이터 탐색★★ 네이버데이터랩 https://datalab.naver.com/ 구글트랜드 https://trends.google.co.kr/trends/ 썸트랜드 (사람들의 생각이 궁금할 때) https://some.co.kr/ keywordtool.io https://keywordtool.io/ statcounter: https://gs.statcounter.com

마케팅 레시피 채널톡에서 제공하는 "마케팅 레시피" https://channel.io/ko/recipe/cafe24-crm-marketing 마케팅 레시피 - 카페24 맞춤 레시피: 원클릭으로 회원가입유도부터 재구매까지 "매출을 어떻게 더 늘릴까?" 이 고민은 하나의 답으로는 해결되지 않습니다. 고객이 사이트에 들어온 순간부터 구매까지의 고객 여정을 분류하고 각 단계(퍼널)마다의 문제를 해결해야 하죠. 카 channel.io 채널톡 단골을 만들어주는 고객메신저.. 요즘 사이트에서 자주 보이는 고객소통 메신저로 활용되고 있는거 같다. https://channel.io/ko 채널톡 - 단골을 만들어 주는 고객 메신저 기술이 좋아도, 투자를 많이 받아도, 고객이 사랑하는 비즈니스가 성장합니다. 채널톡으로 단골..

게시글에 생략부호를 만들고 싶을 때 display: inline-block; span에 가로길이(width)를 주기위해 inline-block 속성을 부여한다. width: 80%; 가로길이를 정한다. white-space: nowrap; 줄바꿈을 하지 않는다. overflow: hidden; 넘치는 글자는 보이지 않도록 한다. text-overflow: ellipsis; 생략기호를 만들어준다. html 부분 공지사항 text-overflow: ellipsis; 생략기호를 사용하여 게시글의 끝을 처리하였다. 2022.03.14 반품/환불 규정에 대해 알려드립니다. 2022.03.14 S/S 시즌 신규 의류 신상품 안내 2022.03.14 신규회원 대상 할인 이벤트 안내 2022.03.14 css 부분 u..

[css] animation, transition 퍼블리싱 할 때 속도 속성, 속성값 transition-timing-function: 에 여러가지 속성값을 줄 수 있다. div { transition-timing-function: linear; } 체감상 느낌을 표현해보면 1. ease : 빠른 느낌 ( slow fast slow) cubic-bezier(0.25,0.1,0.25,1)) 2. ease-out: 마지막이 느리다. ease 느낌 cubic-bezier(0,0,0.58,1)) 3. linear: 등속 cubic-bezier(0,0,1,1) 4. ease-in-out: 처음과 마지막이 느리다. 약간 등속느낌 cubic-bezier(0.42,0,0.58,1) 5. ease-in: 처음이 느리다...

flex, justify-content 자료 중앙에 배치시키기 높이 100 픽셀 안에서 가로 세로 중앙 수평 에 위치하게 된다. justify-content: space-around; 왼쪽 마진 , 오른쪽 마진 적당히 남기고 배열된다. .box{ display: flex; justify-content: space-around; align-items: center; height: 100px; padding: 0.5em; border: 1px solid #f00; }

1em 은 20픽셀이다. 2em 은 40픽셀이다. em, rem 상대 단위 em : 부모 요소의 글꼴 크기를 기준으로 따라간다. rem : 루트 요소의 글꼴크기(16px: 기본값)를 기준으로 따라간다. 루트요소 란 요소를 의미한다. 루트요소의 기본글꼴크기는 16px 이다. [ 여백 크기를 정할 때 em ] em 으로 내, 외부 여백 크기를 정할 때는 ( margin 이나 padding 사용할 때 ) 자기 자신의 글자 크기를 기준으로 한다. 기본적인 브라우저 기준으로 볼 때 1em 은 16px 을 기준으로 한다.

반응형 이미지 제작: 가로폭 100% 이미지 만들기 반응형 이미지 제작시 참고사항 반응형의 경우 가로쪽 스크롤이 생기면 안된다. max-width: 1200px; 를 주어 가로 사이즈의 최대값 ( max-width )을 부여해준다. 가로 100%의 이미지를 만든다. max-width: 1200px; width: 100%; .img_wrap { /* width: 1200px;*/ max-width: 1200px; width: 100%; background: #f00; margin: 0 auto; } 백그라운드 에 이미지를 넣어서 만드는 방법 가로폭은 max-wdith 로 길이를 지정해주고 높이는 상대적 % 비율로 만들어 넣어준다. 높이(height )는 padding-bottom 으로 넣어준다. 높이 계산..

Material Design [위키백과] 머티리얼 디자인이란 플랫 디자인의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식을 말한다. 2014년 구글이 안드로이드 스마트폰에 적용하면서 널리 퍼지기 시작했다. https://material.io/design/color/the-color-system.html#tools-for-picking-colors Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. ..

모바일웹 햄버거 메뉴버튼 만들기 세 줄모양 햄버거 메뉴를 만들 수 있다. span 태그 4줄을 입력하고 positon : absolute 로 세팅하고 2번째와 3번째는 같이 겹쳐 놓는다. https://codepen.io/sevenpia/pen/wvXLLMm Html 구조 html5 css3 javascript jquery css 내용들 @charset "utf-8"; * { margin: 0; padding: 0; } ul, li { list-style: none; font-size: 22px; } a { text-decoration: none; color: inherit; } img { border: 0; } body { font-family: "맑은 고딕", MalgunGothic, arial, s..