분류 전체보기137 디자인[웹사이트디자인/반응형] 웹사이트 영감 디자인 https://www.intercom.com/?ref=lapaninja Intercom: The complete AI-first customer service solutionIntercom is the complete AI-first customer service solution, giving exceptional experiences for support teams with AI agent, AI copilot, tickets, phone & morewww.intercom.com 2024. 4. 24. [웹사이트디자인/반응형] Atoms - 어토믹해빗[아주작은습관의 힘 어플] https://atoms.jamesclear.com/?ref=lapaninja Atoms. The official Atomic Habits app Tiny changes, remarkable results! Atoms is the definitive habit app inspired by the groundbreaking principles of James Clear's best-selling book Atomic Habits. atoms.jamesclear.com 2024. 4. 22. [figma]피그마 단축키 - 수평뒤집기, 수직 뒤집기 위처럼 화살표는 방향만 바뀌는 경우가 많은데, 그럴때마다 다시 아이콘을 찾을 필요 없이 단축키로 수직/수평 뒤집기를 해주면 됩니다. 피그마 실무 진행시 알아두면 좋을 단축키 피그마, 수평 뒤집기 수직 뒤집기 간단 하지만 알아두면 너무 유용한 피그마 단축키중 하나 입니다. 👍👍👍 2024. 3. 17. [figma]피그마 아이콘 쉽게 사용 방법- 플러그인 활용 피그마 아이콘 쉽게 사용하기 UI UX 디자인을 할때, 가장 필요한 요소중에 하나가 아이콘 입니다. 필요한 아이콘을 빨리 찾는 것만으로도 시간이 많이 단축 되는데요! 이때 필요한 플러그인인 구글 머터리얼 아이콘 플러그인을 사용을 추천 드려요! 설치 방법 이렇게 하시면 팝업창이 뜨면서, 바로 사용이 가능해 집니다! 구글 머터리얼 아이콘 플러그인 사용법 아래와 같이 검색을 통해서 찾아주시면 금방 찾을 수 있습니다. 두께 변경 하기 다른 아이콘으로 변경 다양한 옵션들을 통해 편하게 쓰고 싶은 아이콘을 사용해 보세요! 감사합니다 :-) 2024. 3. 17. [jQuery]셀렉트박스+제이쿼리, 셀렉트 선택 시 내용 보여지게 셀렉트 박스에서 선택 시 해당 내용으로 이동하게 하는 제이쿼리 소스 입니다. 별도 페이지 생성이 필요 없으며 id 값으로 해당 내용을 감추거나 보여줍니다. 적용 이미지 위 디자인과 같이 책보는 느낌처럼 활용도 가능한 소스 입니다. 탭과 유사한 기능이라고 보시면 됩니다. HTML 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text Chapter 2 : Select another text Chapter 3 : Selet third text box 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text.. 2024. 2. 22. [jQuery] mouseenter , mouseleave 마우스 호버 효과 - 마우스 엔터 마우스 호버효과처럼 보이지만 조금 다른 mouseenter/mouseleave 효과 입니다. 마우스가 특정 요소 위에 들어오거나 벗어날 때만 반응하므로 드롭다운 버튼이나 툴팁 등의 UI에서 주로 사용됩니다. 주로 사용되는 부분 드롭다운 버튼 인풋 박스 HTML KR KR EN CN CSS #Lang > * { display: inline-block; vertical-align: middle; } #Lang .lang_list { position: relative; width: 50px; text-align: center; font-size: 14px; } #Lang .lang_list > a { display: block; width: 100%; height: 40px; line-height:2.5; f.. 2024. 1. 31. 브랜딩 컬러와 UI/UX의 활용 비법 색상 심리학을 잘 이용한 브랜드브랜드 컬러를 잘 정해서 좋은 디자인으로 보여지는 사례 5가지 Coca-Cola (빨간색) 빨간색은 강렬하고 활기찬 이미지를 전달하며, Coca-Cola는 브랜드 메시지와 함께 빨간색을 효과적으로 활용하여 전 세계적으로 인식됩니다. Apple (은은한 회색과 흰색) Apple은 심플하고 현대적인 이미지를 위해 은은한 회색과 흰색을 사용하며, 이 컬러 조합은 고급스러움과 혁신을 강조합니다. Facebook (파란색과 흰색) 파란색은 신뢰와 안정성을 상징하며, Facebook은 이 컬러를 활용하여 글로벌 소통 및 연결을 나타냅니다. Nike (주로 검정과 주황색) 검정은 고급스러움과 강인한 이미지를 전달하고, 주황색은 활기찬 에너지를 표현합니다. Nike는 이 두 가지 컬러를 .. 2024. 1. 18. 중국어 문장부호 알고 디자인/코딩 하기 안녕하세요! 오늘은 중국어 문장 부호에 대해서 필요한 만큼만(디자이너/퍼블리싱) 알아보겠습니다. 종종 다국어 홈페이지를 제작 하게 되는데, 그중 중국어를 만나 작업하게 될 경우 유의해야할 부분이 바로 문장 부호 입니다. 특히나, 중국어의 경우, 문장 부호에 따라 여백이 유난히 넓어 디자인에 영향을 주기도 합니다. 百度空间，让世界发现你阅读、下载、分享文档 위의 두 기호가 서로 다른 역할을 합니다. 둘다 쉼표 이지만, 역할을 달라요. 1. 반점 쉼표와 유사 합니다. 짧은 쉼을 나타냅니다. 가장 일반적인 것으로서 문장 중에서 가장 많이 쓰입니다.2. 모점반점보다는 짧은 쉼표라고 볼수 있습니다. 단어를 열거할때 쓰입니다. 모점은 쉼표와 비슷하게 생겼는데, 쉼표와 반대 방향으로 되어 있죠. 저처럼 중국어를 (일도).. 2023. 12. 12. [디자인] 로고 무료 제작, 고퀄 사이트 , 즐겨찾기 로고는 아무래도 많은 시행착오를 겪어야 하는 디자인 중에 하나입니다. 여러가지 디자인 시안을 통해 아이디어를 엿볼 수 있는 좋은 사이트를 발견 했습니다. 원본을 얻으려면 비용을 추가해야 하지만, 아이디어를 참고 하기엔 좋은 듯 합니다! :-) 1. 브랜드 이름과 슬로건 적기 2. 브랜드 키워드 적기 3. 컬러 스타일 선택 두두그. 로고를 만들어 주고 있습니다. 결과물을 보는 화면이 좋습니다. 큼직하게 보여 주니, 실제로 적용했을 때 어떤 느낌일지 예상해 볼 수 있어요!! 10개 이상의 결과물을 보여주는데, 하단에 idea 아이콘을 클릭하면 같은 디자인에 다양한 컬러 버전을 보여 줍니다. 로고를 만들어 주는 사이트는 많지만, 여기는 생각보다 고퀄의 이미지를 생성해 줘서 놀랍더라구요. 다양한 아이디어를 엿볼.. 2023. 12. 8. 디자인 꿀팁! 포토샵과 xd 일러스트에서 아이콘을 폰트 처럼 사용하기 디자인을 하다가 가장 유용한것중에 하나가 바로 아이콘을 바로바로 사용하는 것입니다. 그중 가장 유용한게 바로 폰트처럼 아이콘 사용하는 것인데요! 구글 아이콘도 폰트처럼 사용 가능하다는 것을 발견 했어요! 사용법 1. 아래 사이트에서 사용할 아이콘을 골라줍니다. Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com 2. 아이콘의 텍스트를 적어주세요. 3.폰트를 "Material Icons" 으로 변경해 줍니다. 그럼 텍스트로 .. 2023. 12. 1. [javaScript] 클릭 시 클래스 명 변경 되는 자바스크립트 클릭시 자동으로 아이콘의 클래스 명이 변경되게 하는 소스 입니다. 아이디 저장 과 같은 기능뿐 아니라, 클래스 명이 토글 형태로 변경 되어야 하는 부분에 사용할때 가능 합니다. *방법 : 폰트 아이콘의 클래스명을 제어해서 아이콘 모양을 변경해줍니다! html 아이디 저장 css .login_save{ margin:3em } .login_save i{ font-size: 26px; padding-right:3px; cursor:pointer; font-weight:400; color:#999; letter-spacing: -1px; } .login_save i.xi-check-circle{ color:#000 } JavaScript const logo = document.getElementById("sta.. 2023. 11. 29. [js/css] 스크롤바 커스텀 디자인 mCustomScrollba, 스타일 플러그인 mCustomScrollbar는 사용이 간편해서 많이 사용되는 커스텀 스크롤바 중 하나 입니다. 사용하다 보니 자꾸 손이가는 플러그인중 하나라서 사용법과, 자료를 함께 공유하고자 합니다.🙆 특징 다양한 디자인이 있다. 컨텐츠에 가로값에 영향을 주지 않는다. 가로스크롤 생성이 가능하다 사용방법 css / js 소스를 불러온다 사용할 div에 클래스를 추가해준다 스크립트를 작성해 준다 1. 소스불러오기 2. class 추가 하기 ............. 3. 스크립트 작성 이 스크롤바의 최대 장점인 다양한 디자인 적용입니다. 아래 사이트에 들어가시면 여러가지 디자인을 확인할 수 있습니다. https://manos.malihu.gr/repository/custom-scrollbar/demo/examples/s.. 2023. 11. 24. [css]구글 아이콘 웹폰트 사용방법 저는 웹 퍼블리싱을 할때 주로 웹폰트아이콘을 사용합니다. 아이콘 이미지 보다도 사용성이 무척 좋기 때문인데요. 사용방법 구글 웹아이콘(바로가기 url) 로 들어가서 사용하고자 하는 아이콘 선택 fillter 옵션에서 - fill / weight / 등 옵션 선택하기 경로 및 복사 하기 **별도로 저장해서 이미지로도 사용이 가능합니다. 1. 아이콘 선택 (원하는 스타일로 맞춤) 2. 스타일 링크 복사 3. 스타일 css 복사 4. html로 적용 home check_box toggle_off download_for_offline result 라인스타일(line icon) 꽉찬스타일(fill) https://fonts.google.com/icons?icon.set=Material+Symbols 다음엔 폰트 .. 2023. 11. 23. [css] 말줄임 표시 방법 , 1줄 or 2줄 일때 말줄임표는 정말 자주 쓰입니다. 스크립트로 처리하기도 하지만 Css로도 처리가 가능합니다. 사용된 css - white-space:nowrap; 자동줄바꿈방지 - overflow-x:hidden; 넘어가는 것 안보이게 - text-overflow:ellipsis; 넘어서 안보이는 텍스트 ... 표시 *주의 : width값 지정 필요 html 텍스트가 길어지면 말줄임표가 자동으로 생깁니다. 텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다. css body{ color:#555; } .wrap{ display: flex; align-items: center; height: 200px; justify-content: c.. 2023. 11. 22. [css] white-space 여백 공백 처리 속성(pre, pre-wrap,pre-line) , br 태그 먹을까? html에 내용을 넣을때, white-space 속성을 사용하는 경우가 있습니다. 여백과 공백을 다루는 white-sapce 속성에 대해서 조금더 자세히 알아봤어요! 줄바꿈 부분이 각 속성마다 다르기에 문득,, br 태그를 통해 줄바꿈이 가능한지 궁금 했습니다. 공백과 들여쓰기 줄바꿈 normal 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 nowrap 공백 여러개가 있어도 1개만 적용 줄바꿈 없음 pre 공백 있는 그대로 표시 줄바꿈 없음 pre-wrap 공백 있는 그대로 표시 자동 줄바꿈 pre-line 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 break-spaces 공백 있는 그대로 표시 자동 줄바꿈 pre / pre-wrap / pre-line 속성을 각각 비교해 보기로 했습니다. - 같은.. 2023. 11. 21. [css]형광펜효과- 가상클래스활용 형광펜 효과는 텍스트를 강조하기 좋은 스타일 이예요. 가상클래스를 활용해서 간단하게 원하는 곳에 형광펜 효과를 줄 수 있습니다. 사용된 CSS - 형광펜 효과 : 가상클래스 : before - 서체 변경 : 웹폰트 - 그래디언트 컬러 배경 : background:linear-gradient (to right, yellow 0%, lightblue 100%) - 여백 활용 : white-space : pre-line html 정호승 / 수선화에게 울지마라 외로우니까 사람이다 살아간다는 것은 외로움을 견디는 일이다 공연히 오지 않는 전화를 기다리지 마라 눈이 오면 눈길을 걷고 비가 오면 빗길을 걸어가라 갈대 숲에서 가슴 검은 도요새도 너를 보고 있다 가끔은 하느님도 외로워서 눈물을 흘리신다 새들이 나뭇가지에.. 2023. 11. 20. [Css] 배경 blur 버튼 만들기 (애플 공식 홈 st. 글래스모피즘버튼 ) 버튼 뒤쪽에 blur 효과가 적용되어 버튼을 좀더 도드라져 보이게 합니다. 공식 애플 웹사이트를 방문했다가 위와같은 스타일의 버튼이 적용되어 있는 것을 보고 만들어 봤어요! 사실 이 스타일은 글래스모피즘 이라고 불립니다. 사용되는 css backdrop-filter 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다. 요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야 합니다. 적용 방법 backdrop-filter: blur(2px); 버튼으로 만들기 결과 css .btn_blur { backdrop-filter: blur(4px); background-color: rgb(66 66 69/70%); border-radius:.. 2023. 11. 13. 모바일에서 input 태그, number 숫자 자판(키패드) - 안드로이드/아이폰 모바일 퍼블리싱 - 인풋 타입에서 숫자 자판 나오게 하기 input type 으로 숫자, number을 지정할 때 일반 자판이 아닌 숫자 자판을 나오게 하려면 아래와 같이 지정해 주면 됩니다. 안드로이드 아이폰, IOS 위처럼 적게 입력하면 Android OR IOS 모두 숫자키패드가 나옵니다. 참고 : https://stackoverflow.com/questions/25425181/iphone-ios-presenting-html-5-keyboard-for-postal-codes 2023. 10. 16. 캐스트 퍼즐이란? (데블스 플랜 감옥퀴즈) 요즘 넷플릭스에서 한창 재밌게 보고 있는 데블스 플랜입니다. 데블스 플랜에서 가장 낮은 점수 두명이 감옥을 가게 되는데, 감옥에 들어갈때 캐스트 퍼즐이 하나씩 놓여 있습니다. 진짜, 집요하게 붙들고 이리저리 맞추다 보면 어느샌가 맞춰 지는 이게 뭔지 궁금해서 찾아보다가 구매까지..ㅎㅎ 캐스트 퍼즐이란? 캐스트퍼즐은 일본의 하나야마사에서 만드는 퍼즐 브랜드라고 하네요. https://hanayama-toys.com/ HUZZLE (CAST PUZZLE) Disassemble and Reassemble Puzzle 직역하면, 모으고 해체하는 퍼즐 저는 이 아이를 구매해 봤어요! 캐스트 링. 구매는 쿠팡을 통했습니다. 현재 가격대는 만원에서 만 오천원 사이인데,, 캐스트퍼즐 / 하나야마 퍼즐 등으로 검색 하면.. 2023. 10. 6. [디자인]색의 비율과 균형 , 강조 색상의 사용 60–30–10 규칙균형잡힌 색상을 구성하기 위한 조화로운 비율60% → 중성색 (흑/백) 30% → 보조색 10% → 강조색(악센트) 주로 실내 인테리어를 할때 많이 사용 하는 비율로 강조 색상을 10%비율로 설정 하는 것이다. 웹에서 강조색(CTA버튼) 웹에서는 5~10% 정도로 사용 해도 충분하기도 하다. CTA 버튼에 주로 사용 하여 사용자의 시선을 유도 한다. *CTA란? 마케팅에서 사용되는 용어입니다. CTA는 제품이나 서비스를 고객에게 판매하기 위해 사용되며, 보통 웹사이트나 광고 등에서 볼 수 있습니다. CTA는 고객에게 어떤 행동을 취하도록 유도하는 문구나 버튼입니다. 강조색에 인터랙션 추가마우스 호버시 → 밝게 마우스 포커스 시(클릭) → 진하게 강조색 사용 범위버튼, CTA 버튼, 링.. 2023. 9. 7. 앱/웹 디자인 Color (중요도에 따라) 모바일이나 웹 등 디자인시 가장 중요하다고 할 수 있는 부분이 바로 컬러 입니다. 의미에 따른 컬러 사용으로 다양한 정보를 제공 할 수 있기 때문입니다. 웹 앱 UI 디자인시 컬러의 의미와 사용법을 알아봤습니다. UI 디자인에서 컬러는? 상호작용 표현( 버튼, 체크박스, 컨트롤박스, 링크, 슬라이더) 의미 전달 (경고, 금지, 오류, 안전,긍정) 상태 전달 (활성/비활성, 컨트롤상태) 위계 순서 (중요도 순서) 강조 브랜드 컬러로서 - 브랜드를 나타내는 고유색 - 브랜드 통일감 - 사용자에게 동일한 경험과 메세지 전달 컬러의 구성 Primary color - 주색 Secondary color- 보조색(액션색상,강조색) 흑백 액션 색상(상호작용) 색상의 사용 버튼, CTA 버튼, 링크, 컨트롤, 토글, 스.. 2023. 9. 6. [디자인]앱 추천 참고 사이트- 레퍼런스 모음 사이트 (국내/해외) 국내 앱 디자인 레퍼런스 소개 https://wwit.design/ 아래와 같이 다양한 카테고리 혹은 페이지 별로 시안을 확인 할 수 있다 해외 앱 소개 https://mobbin.com/browse/ios/apps?sort=publishedAt 2023. 8. 3. 구글 애널리틱스, 재방문 수 확인 (DAU/WAU) 월간/일일 사용자 수 구글 애널리틱스 - 사용자 재방문률 확인 확인 경로 : 보고서 > 참여도 > 참여 > 개요 > 사용자 재방문마케팅 및 사이트 운영을 위해서 구글 애널리틱스를 사용하는 경우 점차 늘고 있어요. 사용자 재방문률은 매우 중요한 지표중에 하나 이고, 위의 구글 애널리틱스 메뉴를 통해 확인이 가능합니다. DAU / WAU / MAUDAU : 일일 활성 사용자 수: 지난 24시간 동안의 활성 사용자 수 WAU : 주간 활성 사용자 수 : 지난 7일 동안의 활성 사용자 수 MAU : 월간 활성 사용자 수 : 지난 30일 동안의 활성 사용자 수 그래프 상 표기 기준WAU / MAU = 주간활성사용자수 / 월간 활성 사용자자수 = 월간 사용자대비 주간 사용자수 DAU / WAU = 일일활성사용자수 / 주간 활성 사용자자.. 2023. 8. 3. CSS 애니메이션 타이밍 효과 비교 (linear, ease, ease-in, ease-in-out) 주 사용 요소 animation-timing-function, 대표적인 설정값 linear : 일정한 속도로 진행 ease : 천천히 시작되고 속도가 줄어들면서 끝난 ease-in : 천천히 시작 ease-out : 빠르게 시작 ease-in-out: 빠르게 시작되어 평균속도 유지 Result 각 버튼을 클릭하면 속도확인 가능합니다. Html 기본값 linear ease ease-in ease-out ease-in-out Css div{ margin:50px auto; display:block; vertical-align: top; width:100px; height:100px; background:#202228; border-radius:6px; text-align:center; line-height:.. 2023. 8. 2. 베이글, 통호밀과 밀가루의 칼로리 비교. 통호밀과 밀가루의 차이 통호밀(Whole Wheat): 밀의 모든 부분을 사용한 형태로 영양가가 풍부하고 건강에 좋습니다. 밀가루(All-Purpose Flour): 밀의 일부만 사용한 가루로 영양소가 적지만 베이킹 등 다용도로 사용됩니다. 1. 통호밀(Whole Wheat): 통호밀은 밀의 추출과정을 거치지 않은 형태로 사용되는 호밀(whole wheat) 곡물입니다. 밀의 겉껍질, 견과, 견과 내의 엔도스퍼먼트까지 모두 함께 사용됩니다. 이렇게 모든 부분을 포함하는 것으로 영양가가 풍부하며 식이섬유, 비타민, 미네랄, 단백질 등이 풍부하게 함유되어 있습니다. 2. 밀가루(All-Purpose Flour): 밀가루는 밀을 분쇄한 가루로, 주로 백미만을 사용하여 견과나 견과 내의 부분을 제거한 형태입니다.. 2023. 8. 2. [Css 활용] 말풍선 위 아래로 움직이는 효과, 키프레임 주 사용 CSS - animation - keyframe + animation-timing-function + flex - 정가운데 배치 Html Css .wrap { height:100vh; display:flex; align-items:center; justify-content:center; } .moving { animation: move 0.7s ease-in 0s infinite alternate; margin-top: 0; width:80px } @keyframes move { 0% {margin-top: 0px;} 100% {margin-top: 10px;} } Result *result 클릭해 주세요. 2023. 8. 1. [셔터스톡 기고자]디자인/사진 업로드 하기 안녕하세요! 저는 UI UX 디자이너로도 일을 하고 있습니다. 연습삼아 제작한 작업물들을 버리기 아쉬워서 셔터스톡에 업로드 했습니다. 테스트 삼아 직접 직은 사진도 몇개 올려 놨었죠. 총 7개 이미지를 업로드 해두었는데, 약 10번정도의 다운로드가 이루어 졌어요! 총 수익은 약 50달러정도 됩니다. (정말 소소 하지만 그래도 누군가 다운로드 받았다는 알람이 오면 기부니가 좋습니다) 그래서 틈틈이 디자인 자료를 업로드 해야 겠다 싶어 업로드과정과 함께 이 글을 쓰게 되었습니다. 셔터스톡에 내 디자인 업로드 하기 셔터스톡에 내 이미지 업로드 방법 순서 1. 셔터스톡 기고자(shutterstock contributor) 에 가입한다. 2. 디자인(일러스트)을 가이드*에 맞게 작업한다. 3. 업로드 한다. 하지.. 2023. 7. 16. [웹 디자인/퍼블리싱] 디자인시 PC 화면 사이즈 정하기(+미디어쿼리 분기점) 웹디자인/ 퍼블리싱 디자인 할 때 화면 크기를 어느정도로 잡아야 할지 정확히 잘 모를때가 있다. 가로값 기본은 1980이라면 높이값의 경우 모니터 사이즈인 1080이 아닌 약 1053 으로 해야 한다(상단URL 부분등 제외) 디자인 작업할때 자주 쓰는 해상도와 높이값 1. 1920 x 1080일명 FHD(Full High Definition)라고 불리는 해상도24인치 데스크탑, 보편적인 모니터 크기의 해상도XD 나 figma 에서 작업시 뷰포트는 1053px💡 브라우저의 상단 부분의 URL 과, 북마크 등의 높이값을 빼고 작업을 한다. viewport는 약, 1053px 정도로 설정 2. 1536 x 864FHD 노트북의 해상도1920 x 1080에 125% 배율을 적용한 해상도노트북 폰트 사이즈 기본 .. 2023. 7. 6. [포토샵활용]gif 이미지 흰 테두리 없애기- 매트 설정 포토샵 에서 gif 내보내기배경이 있는 경우는 상관 없으나 투명 배경으로 내보낼때 주변에 흰테두리가 생기는 경우가 있습니다 이렇게 투명도가 전혀 먹지 않는 상태로 내보내 지게됩니다. 이때 몇가지 설정을 수정하여 내보내면 조금은(?) 나은 상태의 gif 투명 이미지를 만들 수 있습니다 기본설정 이렇게 미리 gif 이미지를 만들어 두었습니다. 웹용으로 저장 하기를 들어가서 설정을 확인 하면 투명디더 없음 / 매트 (흰샛배경) 으로 설정된 것을 볼수 있어요! 설정 수정 투명디더 없음 -> 확산 투명디더 매트 -> 없음 (양% 조절) 이렇게 두개를 설정해 주시고 저장을 눌러 주시면 됩니다. 결과는 이렇습니당 ㅠ 사실 투명도를 포함하는 완벽함 gif 만들기는 쉽지 않아요. 가능한 배경 색을 포함하는 gif 를 디.. 2023. 7. 5. css background 속성 / 단축 속성 / 주의점 css 상에서 백그라운드로 이미지를 넣을 때 주로 꽉찬 배경 이미지를 넣고자 할때 쓰인다. 자주쓰지만 또 자주 헷갈리는 속성중에 하나. 속성명이 길기 때문에 단축 속성으로 적어 주는게 좋다. 특히 단축 속성엔 유의해야할 몇가지를 잘 알아두면 좋을 듯 하다! 1. css background 속성 종류 background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment 2. Css 단축 속성 background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cli.. 2023. 6. 26. 이전 1 2 3 4 5 다음 728x90 반응형
