분류 전체보기159 말풍선 css html AI에게 문의하세요! 챗 지피티에게 이 이미지를 보여주고 html 과 Css 로 구현해 달라고 했을 때의 결과물?! 정말이지 GPT 덕에 빨라지는 퍼블리싱... ㅎㄷㄷ 2024. 11. 14. [고양이는첨이라] 고양이 쭙쭙이 습관. 고쳐질까? 고양이 유기견 센터에서 인계를 받을때 간단하게 아래와 같이 적혀 있었다. 서울의 고려대학 병원 근처에서 발견되었고, 태어난지 2개월 정도그곳에 적혀 있진 않았지만 데려오고 나서 발견한 것이바로 다름아닌 쭙쭙이 습관이었다. 조금 심한 편이긴 했다. 그나마 다행인건 손에만 한다는 것이다.하지 말라고 타이르기도했지만알아들을 턱이 있나.. 나중에는 그냥 자포자기 심정이 되었다.손을 내어주고 하고 싶은 만큼 하게 놔두면 하다가 잠드는 모습을 보면측은하기도 했다. 고양이의 쭙쭙이는 고칠 수 있는 방법을 찾아 보면자연스럽게 그 행동에서 멀어지게 해야한다는 조언이 대부분이었다.그래서 질릴때까지 하거라… 느낌으로 다가 그냥 나뒀더니 2년이 좀 지난 지금완전히는 아니지만 처음 왔을 때 만큼의 집착은 없어졌다.지금은 그냥 .. 2024. 11. 13. [고양이는첨이라] 처음으로 본 하악질 처음으로 이쪼그만 고양이가온몸으로 거부 하며 하악질을 해댔던 이유는옷을 입힐때였다. 입양 하고 한달쯤 지나서 중성화를 했는데, 아무리 넥 가드를 해놓으니 밥도 못먹어서 결국 옷을 사서 입히게 되었다. 근데 이 옷이 정말이지.. 입히기도 불편하고, 하지만 입혀놓지 않으면 상처를 핥아서 상처에서 피가 나게 된다. 고양이를 다루는데 미숙하고, 당장에 입혀야 한다는 생각에 억지로 입히는데, 아주 심하게 하악질을 했다. 걱정돼서 보호해줄려고 하는데, 이렇게 까지 화낼일인가. 뭐 사람으로 따지면 아파 죽겠는데 자꾸 건드리니 화가 났긴 했을 것이다. 그치만 새삼 요 작은 녀석도 제몸 하나 지키려고 이렇게나 기를 쓰는데정작 나는 그랬나 싶다 2024. 11. 12. [고양이는첨이라] 고장난급식기 2 잡았다 요놈 ㅋㅋ보니까 이렇게 진짜 어디까지 넣는 건지. 안에 건드려서 사료를 한알씩 빼먹고 있었구나. 새로운 급식기를 들여왔다. 정말 고민 많이 했는데. 첫번째는 넘어 지지 않을 구조. 그리고 이빨로 뚜껑을 열수 없게 하는 구조다행히 둘다 만족 스러운 제품을 찾았다! 어쨌거나 이번 급식기는 좀 오래 버텨줬으면 언제나 너무 사랑스럽다. 함께한지 2년 3개월 정도 지났네. 그동안 많은 일이 있었는데 지금은 이렇게 건강하게 있어줘서 너무 고마워. 2024. 11. 11. [고양이는첨이라] 고장난 급식기 처음 데려왔을 때는 사료를 직접 줬었다. 적당한 양을 매끼니마다 챙겨 줬는데, 외출할때마다 신경이 쓰여 결국 자동 급식 기계를 들였다. 고양이를 키울 때, 생각한 것중 하나는 꼭 필요한 용품을 구매하지 말자 였는데혼자 키우는 사람에게는 꼭 필요한 품목이었다. 밥 시간이 되면 내 목소리와 함께 (목 소리가 녹음 된다) 밥이 나오는 기계였는데, 어느 주말 아침에 내 목소리는 나오는데 밥이 나오지 않는것이었다. 고양이는 그런 기계와 나를 번갈아 가면서 보다가 '야옹' 소리를 내며 내게 다가온다. 어제 저녁 퇴근하고 유난히 곁에 계속 맴돈 이유가 있었다. 그때부터 안나온 것이라면 꽤나 예민할 터였다. 안그래도 2년 가까이 잘 버틴 급식기가 언젠가 명을 다하겠지 싶었다. ... 마지막 떠나기 전에 .. 2024. 11. 10. [고양이는첨이라] 고양이 입양 준비 “고양이 키울때 필요한 물건”“고양이 키우기 전 주의할 것”검색을 해봤다. 반려 동물을 키워 본적 없었다. 여러 걱정거리가 밀려왔다. 평생 고양이의 밥을 책임 져야 하고화장실도 매일 청소해 줘야 하고 사냥 놀이 등 온전히 고양이를 위해 시간을 들여야 한다. 매달 나가는 비용이 생기고집을 오래 비우지 못하게 된다. 하지만 이런 걱정거리들이 불안하고 싱숭한 마음의 진짜 이유는 아니였다. 한 생명을 끝까지 책임질 수 있을까?나 하나도 제대로 책임지지 못하는 삶 속에서, 무언가를 책임져야 한다는 것.그 무게를 실감하게 된것 그게 진짜 이유였다. 하나씩 입양 준비를 하면서 가장 필요한 준비는 그 책임과 마주하는 것이었다. 그리고 우선 데려온 뒤에 생각하자! 그렇게 입양을 위한 모든 준비를 마쳤다. 하지만 가장 .. 2024. 11. 9. [고양이는첨이라] 완벽한 (고양이) 외모 어려서부터 예쁜 사람을 좋아했다. 그래서 미스코리아 대회가 있을 땐 꼭 챙겨보곤 했다. (지금은 없어진걸로 알고 있는)후보들을 보고 '저 사람이 될 것 같다.'고 생각하면 실제로 우승하는 경우도 있었다. 이런 예쁨을 보는 안목(?)은 고양이에게도 예외 없었다. 고양이를 키우겠다는 마음먹었을 때처음 한 일은 유기묘 센터의 인스타그램 계정을 팔로우하는 것이었다. 그렇게 종종 올라오는 사진들을 보던 중, 어느날, 올라온 한 녀석의 사진이 내 마음을 뒤흔들었다.유난히 작은 얼굴에 자리 잡은 커다란 눈과멀지도 가깝지도 않은 간격.양쪽 대칭이 완벽한 털의 무늬와 색깔. 핑크빛이 감도는 코와 그레이, 화이트 컬러가 절묘하게 어우러진 털.내 눈에 더할나위 없이 사랑스럽고완벽한 회색빛 코숏이었다. 단숨에 반하고 말았.. 2024. 11. 8. [고양이는첨이라] 버킷리스트, "고양이 키우기" 버킷리스트라기엔 거창하지만,연초엔 예의상 목표나 하고 싶은 것들을 적어본다. 무료하던 어느날, 메모장 속 그것을 발견했다. 쓱 훝다가 여섯 글자에 꽂히고 말았다. '고양이 키우기' 틈틈이 고양이의 귀여운 짤을 공유하던 친구덕에 그리고 일상의 탈출구가 필요했던 차에 이 문장이 마음에 와닿았다. 이거다. 내 일상을 변화시킬 혹은 탈출 시킬. 하지만 그 짧고 귀여운 그 문장속에 오래도록 책임지고 돌보아야 한다는 긴 의미가 함께 담겨 있다는 걸, 나중에야 깨달았다. 2024. 11. 7. 작심삼주 오블완 챌린지 https://www.tistory.com/event/write-challenge-2024?t_src=tistory_notice 작심삼주 오블완 챌린지오늘 블로그 완료! 21일 동안 매일 블로그에 글 쓰고 글력을 키워보세요.www.tistory.com 짧더라도 매일 써보기 습관을 들이기 위한 챌린지. 3주. 뭐 할 수 있지 않을까. ^^^^ 2024. 11. 6. 디지털 정부서비스 UI/UX 가이드라인(코드 및 가이드 라인 제공) 디지털 정부서비스의 UI/UX 가이드라인 사이트입니다.이 사이트는 공공서비스를 디지털화하는 데 있어 필수적인 가이드라인을 명확하게 제시하고 있어 매우 유용합니다. https://uiux.egovframe.go.kr/guide/index.html KRDS디지털 정부서비스 UI/UX 가이드라인 누구나 쉽고 편리하게 이용할 수 있도록 사용자 중심의 공공 웹·앱을 구축, 운영 및 관리 하도록 지원합니다uiux.egovframe.go.kr 1. 명확한 가이드라인사이트에서는 기본적으로 지켜야 할 UI/UX 가이드라인이 명확하게 정리되어 있어, 사용자들이 쉽게 이해하고 적용할 수 있습니다. 2. 코드 제공사이트에서는 실제 코드를 확인할 수 있는 기능을 제공하여, 개발자들이 가이드라인을 실질적으로 구현할 수 있도.. 2024. 10. 28. [웹폰트 사용방법] 웹에 최적화된포맷 - woff2 웹사이트 성능을 최적화하는 방법: 가벼운 웹폰트 포맷 선택하기! 웹폰트 종류가 여러개 인데, 무엇을 선택 해야 할지 확실히 잘 모르는 경우가 있어요. 폰트 선택은 웹사이트 로딩 속도와 사용자 경험에 직접적인 영향을 미치기에 중요합니다! 예를들어 저는 pretendard 서체를 사용하려고 하는데, 홈페이지에서 제공하는 폰트의 포맷 종류가 아래와 같이 여러개 입니다. 출처 : https://cactus.tistory.com/306?category=1007051 폰트 포맷 종류.otf, .ttf: 고품질이지만 무겁고, 웹에서는 비효율적..woff, .woff2: 웹에 최적화된 경량 포맷. 특히 .woff2는 파일 크기가 작아 로딩 속도가 빠름..woff2 포맷의 이점파일 크기 작고, 압축률 높아 .. 2024. 8. 29. [css]Flex아이템 li 요소 4개씩 한 줄에 배치하기 웹 개발 시 리스트(ul, li) 요소를 사용해 메뉴나 갤러리 등을 구성할 때,Flexbox를 이용하면 손쉽게 원하는 레이아웃을 만들 수 있습니다.이번 글에서는 ul 안의 li 요소를 4개씩 한 줄에 배치하는 방법을 알아보겠습니다. 1. 기본 Flexbox 설정ul.news { display: flex; padding: 0; margin: 0; list-style: none;}이렇게 하면 li 요소들이 가로로 일렬로 배치됩니다. 2. li 요소 4개씩 한 줄에 배치하기(모바일에서는 2개씩 배치) li 요소를 4개씩 한 줄에 배치하려면, 각 li 요소의 너비를 25%로 설정합니다.이는 한 줄을 네 등분해서 li 요소들이 균등하게 배치되도록 하기 위함입니다.ul.news li { .. 2024. 8. 26. [CSS] 변수를 음수로 변환하는 방법 CSS 변수를 사용하면 여러 스타일 속성 값을 쉽게 재사용할 수 있어유지보수가 편리하고 코드의 가독성도 향상됩니다. 종종 CSS 변수 값을 음수로 변환해야 할 때가 있습니다. 예를 들어 아래 처럼 마진 값을 주었을 때, 위 아래 마진이 40px이 되어 버리죠.리액트나 next js 처럼 모듈이나 컴포넌트를 활용하는 경우, 마진 병합이 일어나지 않게 되어 해결 방법으로 같은 변수를음수로 적용하기로 했습니다. 1. CSS 변수 정의CSS 변수를 정의합니다. 공통 마진 20px 변수로 지정합니다. :root { --margin_20: 20px;} 2. calc() 함수를 사용하여 변수 값을 음수로 변환하기CSS에서 음수 값을 적용하려면 calc() 함수를 사용해야 합니다.calc() 함수는 CSS 변수.. 2024. 8. 2. 터미널이란? , 주요 사용 명령어 터미널이란? 터미널은 컴퓨터에서 사용자와 컴퓨터 시스템 간에 상호작용할 수 있는 인터페이스입니다. 주로 텍스트 명령어를 입력하여 파일 관리, 프로그램 실행, 시스템 설정 등을 수행할 수 있습니다. 터미널은 다양한 운영 체제에서 사용되며, Unix 계열 시스템(예: macOS, Linux)에서 특히 많이 사용됩니다. Windows에서는 명령 프롬프트(Command Prompt)와 PowerShell이 유사한 기능을 제공합니다. 터미널의 주요 기능과 사용 방법디렉토리 탐색과 파일 관리현재 디렉토리 확인 : `pwd` 명령어를 사용하여 현재 작업 중인 디렉토리의 경로를 확인할 수 있습니다.pwd 디렉토리 변경: `cd` 명령어를 사용하여 다른 디렉토리로 이동할 수 있습니다.cd path/to/director.. 2024. 7. 29. [Javascript, css] 스크롤 내리면 카운팅 시작 되는 소스 안녕하세요! 카운팅 숫자의 업그레이드 버전을 알아보겠습니다. 우선 구현이 어떻게 되는지 결과 부터 보시죠!스크롤을 내려 주세요! Result Html Count number 사용자 명 방문자 명 대기시간 분 대기문서 건 JavaScript function animateValue(id, start, end, duration) { var range = end - start; .. 2024. 6. 25. [CSS]마우스 호버시 아이콘 모양 변경(사이드바 보기/감추기역할) 주로 사용된 csstransform:hover 1. html 2. CSS.arrow { z-index: 999; top: 50%; left: 0px; position: fixed; transform: translateX(100px) translateY(-50%) rotate(0deg) translateZ(0px); transition: transform .3s ease-out; cursor: pointer !important;}.arrow .icon-wrap { justify-content: center; align-items: center; width: 2rem; he.. 2024. 6. 19. 자바스크립트 가이드 - 이론, 기초 공부 사이트 https://wguide.co.kr/js-variable/ W.GUIDE(더블유가이드)실무자들을 위한 가이드 및 팁 공유 커뮤니티wguide.co.kr 말끔하게 정리가 잘 되어 있습니다.자바스크립트 기초 공부 하기에 좋은 사이트 입니다. 2024. 6. 18. 랩 스튜디오, 유용한 도구툴 모음(생상코드변환, 삼각형css만들기, 폰트단위변환...) 랩 스튜디오 라는 사이트에서 제공하고 있는 유용한 도구 모음 사이트 입니다. 개발/디자인 직군에 사람들에게 유용한 툴이 잘 갖춰져 있는 듯 합니다. https://sitero.co.kr/colorcode 사이트로(SITERO)필요한 도구를 가장 편리하게 개발하여 사이트로 만들었습니다.sitero.co.kr 2024. 6. 18. [figma]피그마 단축키 이 두개만 알면 작업 속도가 훨씬! 빨라집니다. 기존에 어도비 포토샵과 일러스트를 위주로 사용하시던 분들에게,피그마에 익숙해 지려면 이 두가지 단축키를 알고 시작하면 훨씬 빨라 집니다. 1. 속성 복사 / 속성 붙여넣기 요소를 선택한 뒤 마우스 우측 버튼을 누르면 아래와 같이 선택도 가능 합니다. 복사 Ctrl + Alt + C (윈도우) / command + Alt + C (맥)기존 Ctrl + c/v 에서 Alt를 추가해 주면 됩니다! 폰트, 여백, 등 해당 요소의 스타일 속성이 복사 됩니다. 디자인 할 때 가장 많이 시간이 드는 단순 노가다의 시간을 줄여주는 키. 일러스트에 프로그램에서도 (가장 좋아하던) 속성을 복사하는 스포이드 키와 비슷하다고 보면 돼요! 2. 사이즈 조절 단축키 - K 피그마 왼쪽 상단에 move 와 sca.. 2024. 6. 17. [피그마]와이어 프레임(wire frame) 제작, 유용한 템플릿 추천 피그마로 와이어 프레임 제작 할 때 유용한 템플릿을 몇개 추천 드립니다. 피그마 템플릿 검색 방법 https://www.figma.com/community 해당 부분에 들어가서 wire frame 으로 검색하면 다양한 템플릿이 나옵니다. 검색하면 다양한 템플릿이 나오는데요, 이중 유료도 있고, 플러그인을 활용하는 것도 있습니다.요즘 템플릿도 다 디자인이 잘 되어 나와서, 본인 디자인에 맞는 스타일을 골라서 쓰면 되는데요. 저는 몇가지 기준을 잡고 템플릿을 골랐습니다ui가 명확히 드러날 수 있는 디자인(강조요소 명확)너무 디테일 하지 않은 템플릿종종, 기획단계에서 지나치게 디테일 해지는 경우가 있습니다. 디자인의 자유도를 방해할 수 있기 때문에 적당히(?) 디테일하고 심플한 디자인을 찾다가 발견한 템플.. 2024. 6. 17. 3d, 액티브 웹사이트, 무료소스,웹사이트디자인 https://tympanus.net/codrops/demos/ DemosCodrops' curated collection of 500+ demos, prototypes, animations, templates, layouts, UI styles, and experimental design concepts. Download and use freely under MIT.tympanus.net 신기한, 다양한 인터랙티브한 효과들로 구성된 웹페이지를 소개하는 페이지 입니다.무료로 소스나 코드가 제공 되는 것들도 있어서, 활용하면 좋을 듯 합니다! https://tympanus.net/Development/TextureTransition/ 2024. 6. 14. [Javascript, css] 라이트모드/다크모드 설정 day night mode 요즘 사이트들은 대부분 낮/밤 모드가 있습니다.이 부분을 구현하는 방법은 여러가지가 있는데,저는 아래와 같은 방식으로 구현해 봤어요. 다크모드 설정 방법 1. 다크모드 버튼 클릭시 dark 클래스 추가 - 스크립트로 제어 2. 다크모드 버튼 아이콘 이미지는 백그라운드 이미지로 제어 - 클릭 시 css로 아이콘 변경 가능 3. root 속성으로 작성된 css를 활용 - 다크모드에서 일괄 수정 4. 아이콘 이미지의 경우(SVG) 반전 효과 사용 : css의 filter:invert(1) 속성 활용 위의 사항들을 순서로 하여 마크업과 CSS 제작을 진행해 봅니다. 최종 view 모습 (하단에서 확인) 라이트 모드 다크모드 HTML .. 2024. 6. 14. 디자인[웹사이트디자인/반응형] 웹사이트 영감 디자인 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 4 ··· 6 다음 728x90 반응형
