분류 전체보기165 리액트 네이티브, <br> 태그 줄바꿈 하기 리액트 네이티브에서는 HTML의 태그를 직접 사용할 수 없습니다.대신 다음과 같은 방법들로 줄바꿈을 구현할 수 있습니다: 개행 문자 사용 {`2024.06.21 13:00 \n ~ 2024.06.21 14:00`} 여러 Text 컴포넌트 사용 2024.06.21 13:00 {"\n"}~ 2024.06.21 14:00 줄바꿈이 필요한 부분을 분리 2024.06.21 13:00 {"\n"} ~ 2024.06.21 14:00 이 중 첫 번째나 두 번째 방법이 가장 간단하고 일반적으로 사용됩니다.\n은 줄바꿈 문자로, 텍스트를 새 줄로 나눕니다. 2025. 2. 4. [피그마] 프레임을 늘리면 콘텐츠가 왜곡 및 변형 된다면? 한 방에 해결하는 방법! 피그마(Figma)를 사용하다 보면 프레임 크기를 조정했을 때 콘텐츠가 이상하게 늘어나거나 비율이 틀어지는 경험을 해본 적 있나요? 특히 벡터 파일이나 그룹화된 요소를 다룰 때 이런 문제가 자주 발생하곤 합니다. 저도 이 문제로 한참을 헤맸지만, 사실 해결 방법은 아주 간단했습니다. 1. 왜 이런 일이 생길까? 문제의 핵심은 Constraints(제약 조건) 설정에 있습니다. 피그마는 각 요소가 부모 프레임에 대해 어떻게 반응할지를 결정하는 Constraints 옵션을 제공합니다. 기본적으로 "Scale"로 설정된 경우 프레임 크기를 조정하면 내부 콘텐츠도 비율에 따라 늘어나거나 줄어들게 됩니다. 2. 문제 상황 예시프레임 크기를 늘렸더니 벡터 아이콘이 늘어나서 뭉개짐.텍스트 박스가 프레임과 함께 비율이.. 2025. 1. 13. [포토샵활용] 레이어 마스크 바로가기키 설정으로 작업 속도 높이는 법 이렇게 귀여운 아이콘이 있습니다.하지만 배경이 흰색이라 사용하기가 애매 합니다. 포토샵에서 레이어 마스크를 사용 하면 손쉽게 투명 배경을 만들 수 있습니다! 근데 이런 아이콘이 100개. 흰색 배경을 제거 해야 한다면? 포토샵 바로가기키 설정으로 작업 속도를 높일 수 있습니다. 포토샵 레이어 마스크란?레이어 마스크는 이미지 수정 시 특정 부분을 숨기거나 나타낼 수 있는 도구입니다.디자인 작업에서 자주 사용됩니다.흰색 배경 없애기 1. 매직 툴로 흰영역 선택 흰색 배경 없애기 2. 선택 영역 확대(옵션) 선택 영역에 이런 부분이 없다면 안하셔도 됩니다. 아래처럼 픽셀이 애매한 부분을 저는 덜어내겠습니다. 확인을 누르면 아래 처럼 2픽셀 안으로 들어간 것을 확인 할 수 있습니다. 흰색 배경 없애기 .. 2024. 12. 17. [why] 글래스모피즘(Glassmorphism)이 세련된 느낌을 주는 이유. 글래스모피즘은 최신 디자인 트렌드를 반영하는 스타일로,이미지의 분위기를 더 세련되게 만들어 줍니다. 글래스모피즘(Glassmorphism)이 모던하고 세련된 느낌을 주는 이유는 다음과 같은 디자인 특징들에 기반하고 있습니다: 투명성과 흐림 효과 (Frosted Glass Effect)글래스모피즘의 핵심은 반투명한 배경과 흐릿한 효과입니다.이는 마치 유리나 Frosted Glass처럼 보이는 효과로, 배경이 자연스럽게 흐려지면서 콘텐츠가 강조됩니다.이런 효과는 미니멀하고 세련된 느낌을 주기 때문에 복잡한 디자인 요소들을 단순화하고, 그 자체로도 아름다워 보입니다. 입체적인 느낌 (Depth and Layers)글래스모피즘은 시각적으로 깊이감을 만들어 줍니다.반투명한 레이어들이 배경을 비추고 있는 형.. 2024. 11. 29. 아이러브 이미지- 이미지 압축 사이트 이미지 압축 사이트 웹 작업을 하다보면 꼭 필요한 작업중의 하나가 바로 이미지 최적화 입니다.포토샵으로 줄여도 한계가 있고, 특히 png (투명 이미지)의 경우 이미지 파일을 줄이는게 쉽지 않은데이럴때 이런 사이트의 도움을 받으면 유용 합니다!. 테스트로 2.48MB 의 무시무시한 용량의 이미지가 있습니다.요즘은 용량이 절반이상 줄었는데,가장 중요한건 퀄리티 이겠죠. 용량 줄이기 전 사진 용량 : 2.48 용량 축소 후 사진 용량 : 964kb 육안으로 보기에 별 차이가 없어 보입니다! 알아두면 유용한 사이트 입니다. 사진 출처 - unsplash https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%EC%B9%B4%EB%A9%94%EB%9D%BC%EC%9.. 2024. 11. 25. 서울아트북페어 2024 Seoul Art Book Fair_북서울미술관 2022년 북페어 방문 후 두번째! 지난 주말, 기대하던 서울 아트 북페어 2024(Seoul Art Book Fair 2024)에 다녀왔습니다.이번 북페어는 서울 중심부의 세련된 공간에서 열려, 다양한 독립 출판물과 아트 북, 그리고 창작자들을 만날 수 있는 귀한 시간이었어요. ㅎㅎ 나오는길에 마주한 토이 아트도 흥미로웠습니다! ㅎㅎㅎ 부스 배치가 깔끔하게 정리되어 있어서 돌아다니기 편했어요.각 부스마다 작품의 개성이 뚜렷했고, 방문객이 책을 편히 둘러볼 수 있는 공간이 마련된 점이 좋았습니다.전시장의 분위기 역시 창의적인 에너지가 넘쳐서 영감을 받기 좋은 환경이었어요. 다만 사람이 너무 많아서 ㅠㅠ 천천히 구경하기는 쉽지 않았어요!그래도 다양한 아이디어와 창의력을 엿볼 수 있었떤 전시였습니다! 2024. 11. 24. 아무튼 클래식 요즘 종종 찾아 읽고 있는 아무튼 시리즈. 아무튼, 클래식“그 속의 작은 길들을 천천히 걸으면서 내가 겪은 순간들을 꽤 소중히 여겨왔다”음악 기자로 일하면서 가장 즐거웠던 건 역시 예술 가들을 만나는 일이었다. 녹음기를 들이밀면서 자, 저는 당신 이야기를 글로 써서 세상에 널리 전할 겁니다 하는 기자 앞에서 말을 고르지 않는 사람은 없다. 전부라고는 할 수 없어도 일하면서 만난 예술가 대부분이 자신의 삶과 일에 대한 곧은 태도를 분명 하게 전달할 줄 알았다. 조리 있게 논리적으로 말하는 데는 서툴더라도 사회 속에서 살아가는 예술가가 지닐 만한 삶의 뭉툭한 부분과 뾰족한 부분을 구분 하고 인정할 줄 알았다. 자신감과 자만, 겸손함과 졸렬함을 헷갈리지 않는 성숙한 사람들이었다.음악은 실체가 없다. 그림이나 .. 2024. 11. 23. 보편의 단어 - 이기주 불과 물그렇다면 사랑이라는 보편적인 감정은 어느 쪽에 속한다 고 봐야 할까? 물인가, 불인가. 아니면 물도 불도 아닌그 무엇인가.사랑은 물의 감정인 동시에 불의 감정이 아닌가 하는 생 각이 든다. 신기하게도 사랑은 때론 우리의 마음을 한없 이 부드럽고 섬세하게 만들면서도, 때론 더없이 뜨겁고 단순하게 만들기도 하지 않나.단언하건대 사랑은 무엇이든 쌓을 수 있고 무엇이든 무 너뜨릴 수 있는 유일한 감정이다.운동전의 양면이 시간상의 차이를 두지 않고 같은 때에 눈앞에 펼쳐질 순 없지 않나. 그러나 현실에선 행운과 불운이 동시에 다가오는 순간이 얼마든지 있다. 좋은 운수에 그렇지 않은 요소가 묻어 있거나 불행 속에 행복의 씨앗이 심겨 있는 경우는 그야말로 비일비재하다.행운과 불운은 대립적인 것이 아니라 삶의 .. 2024. 11. 22. 빨강 머리 앤이 하는 말. 앞으로 알아낼 것이 많다는 건 참 좋은 일 같아요. 만약 이것저것 다 알고 있다면 무슨 재미가 있겠어요! 그럼 상상할 일도 없잖아요!”꿈을 이룬 다는 것의 진짜 의미, 꿈과 현실 그중 무엇을 선택할 것인가. .... 우리가 무엇인가를 선택할 때 망설이는 이유는 그 결정으로 지불해야 하는 몫이 있기 때문이다. 하지만 우리는 살면서 수업이 선택해야 한다. 그 선택의 결과가 지금의 우리이며, 그것은 누구도 대신할 수 없는 내 몫이다.꼭 꿈을 직업으로만 이뤄야 하는 걸까? 사람들은 말한다. ‘가슴뛰는 일을 해라!’ 멋진 말이다. 하지만 누구나 가슴 뛰는 일을 직업으로 가질 수 있는 걸까? 자신의 꿈을 직업으로 이룬 사람은 많지 않다. 꿈을 직업으로 이루었다고 꼭 행복해지는 것도 아니다...... 직업은 적어도 .. 2024. 11. 21. 튜브. 손원평 장편소설 아몬드 보다 먼저 본 튜브. 이 책을 보고 아몬드를 챙겨봤다. 뻔하다고 생각한 결말을 가뿐하게 넘겨준 작가의 재치. 책갈피 그죠, 해보는 거죠. 그리고 그다음에요? 있잖아, 진석아. 난 그동안 뭘 할 때마다 늘 목표를 생각했거든. 근데 그 목표들이 순수하지가 않았어. A는 B를 위한 행동이고 B는 C를 위한 행동이었을 뿐이었으니까. 그랬거든? 근데 그게 다 부질없게 느껴지더라, 최종 목표가 무너지면 중간에 했던 A부터 Z가 전부 무의미해 지더라고. 그래서 이제 그렇게 거창한 목표 같은 걸 안 세우기로 했어. 행동에 목표를 없애는 거지. 행동 자체가 목표인 거야. 미래를 생각 안 한다는 거예요? 언젠가는 다시 생각할지도 모르지. 하지만 일단은 아니야. 네 말대로 지금은 미래 같은 거 생각 안 해. 충분히 .. 2024. 11. 20. 침묵이라는 무기 우리는 말의 홍수에서 살고 있다. “잘 알면 세 마디로 족하다. 잘 모르니 서른 마디가 필요한 법이다.”라는 말이 있다. “입을 다물 수가 없어서 말을 할 때가 많다.” - 암브로시우스, 교회학자 세상에는 쓸데없는 말이 넘쳐나고 있다. 방송마다 똑같은 뉴스를 반복하고, 스마트폰은 쉬지 않고 울려대며, 버스에서는 쉴 새 없이 라디오가 돌아간다. 웅변은 은이요, 침묵은 금이다”라는 격언이 있다. 입 밖으로 내지 않은 것이 입 밖으로 낸 것보다 더 많은 뜻을 전달할 수 있다. 입 밖으로 내지 않은 것이 입 밖으로 낸 것보다 더 많은 뜻을 전달할 수 있음을 이해하지 못한다. 우리는 감정이 상하면 즉시, 반사적으로, 생각 없이 대꾸하고, 언쟁은 점점 심해진다. “말이 많은 사람은 할 말이 적은 겁니다. 제가 진짜.. 2024. 11. 19. 셀렉트 - 단 하나의 선택지. 단하나의 선택지가 되어라.타이포 그래피는 모든 디자인의 시작입니다. 디자인의 기본 언어에는 크게 세 가지가 있는데 바로 타이포그래피와 컬러, 그리고 매터리얼 입니다.자신만의 감각을 키우는 효과적인 방법멋진 카페나 갤러리, 편집숍에 갈때 그냥 구경만 하고 오는 것이 아니라 BGM, 조명, 메뉴판, 집기레이아웃부터 마감재 하나하나 섬세하게 살펴보는 습관을 가지는 것입니다.가장 개인적인 것이 가장 트렌디한 것이다.트렌드는 싫지만 트렌디하고 싶어.트렌드에서 남보다 뒤처지고 소외되는 것을 두려워하는 현상을 포모증후군 이라고 합니다. 포모는 fear of missing out의 머리글자 입니다.트렌드란 남과 다르게 보이고 싶은'고유성의 욕망'과 대세를 따르고 싶은'추종의 욕망' 사이에 있다.Designing is .. 2024. 11. 18. 그림이 들리고 음악이 보이는 순간. 노엘라 난 '사랑'이 좋다. 사랑은 행복, 희열, 환희, 애틋함, 애절함, 외로움, 그리움, 화, 질투… 많은 감정을 내게 선사해준다. 내 안의 이런 감정들은 심장이 뛰는 소리와 함께 내가 살아 있음을 느끼게 한다. 사랑에는 많은 모습이 있다. 단 한 번에 마음을 사로잡는 사랑이 있는가 하면 두세 번을 보아도 좀처럼 알 수 없는 사랑도 있다. 알수록 빠져드는 사랑이 있는가 하면 잘 알지 못해도 끌리는 사랑이 있다. 첫눈에 사랑임을 알아차릴 수 있는가 하면 나도 모르는 새 사랑으로 변하기도 한다. 그림과 음악도 이런 다양한 사랑의 모습과 감정으로 내게 다가왔다. 우리는 살아가면서 수많은 명화와 음악을 접한다. 어떤 작품은 단번에 나의 눈과 마음을 사로잡는가 하면 어떤 작품은 머리로도, 가슴으로도 느끼기 어려울 때.. 2024. 11. 17. 마음의 수수께끼를 풀어드립니다. "합리적 결정을 하려면, 당신이 태생적으로 비합리적 존재라는 것부터 인정하라." 댄 애리얼리Dan Ariely 사람은 자신이 소유한 물건에 더 큰 가치를 부여한다사람은 동일한 물건이더라도 일단 무언가를 소유하게 되면 그 것을 갖기 전보다 더 가치 있는 것으로 평가해서 떠나보내고 싶어 하지 않는다. 미국 행동경제학의 일인자이자 2017년 노 벨 경제학상을 받은 리처드 탈러Richard Thaler는 이렇게 사람들이 자신의 소유물을 과대평가하는 현상을 '소유 효과 endowment effecti라고 불렀다. 한계는 몸이 아니라 마음이 정한다평소에 쉽게 내뱉는 "이제 예전 같지 않아, "이제 나이가 들어 서라는 말이 우리를 더 늙게 만드는지도 모른다. 혹시 이런 말 올 입버릇처럼 한다면 우선 이 말을 쓰지 말.. 2024. 11. 15. 챗 GPT 에게 퍼블리싱 시켜보기(말풍선 css html) AI에게 문의하세요! 챗 지피티에게 이 이미지를 보여주고 html 과 Css 로 구현해 달라고 했을 때의 결과물?!정말이지 GPT 덕에 빨라지는 퍼블리싱... ㅎㄷㄷ 2024. 11. 14. 디지털 정부서비스 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. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
