그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 재밌는 테스트를 발견해서 한 번 가져와봤어요. 바로 UX/UI 레벨 테스트입니다😀 저도 웹디자인을 하는 사람이다 보니 안 해볼 수가 없는 테스트였는데요. 생각보다 난이도는 간단해서 재미로 보기에 좋은 테스트인 것 같아요. UX/UI 레벨 테스트 저는 여러 가지 테스트 사이트를 들어가 봤는데 이 사이트가 좋은 건 정답이 왜 정답인지 설명해 주는 부분이 있어서 이해하기 좋더라구요. UX/UI 테스트 페이지라 UX/UI를 신경 써서 만든 게 보이고, 이렇게 문제페이지에서 정답을 고르면 정답이 나오고 왜 정답인지 설명까지 해주더라구요. 그 점이 아주 좋았어요. 저의 결과는 9/10점이었습니다. 아쉽게도 하나가 틀렸는데요. 다른 문제들은 대부분 쉬웠는데 하나가 헷갈리더라구요. 바..

안녕하세요 무택입니다 :) 이번에 새로운 취미를 시작해보려 합니다. 바로 블렌더! 디자이너로써 블렌더를 이용한 아이콘이나 캐릭터 등 디자인 소스를 많이 접해왔는데 항상 '나도 직접 만들어 보고 싶다' 생각만 하다가 이번에 콜로소 11월 블랙프라이데이 프로모션에 이끌려서 강의를 신청하게 되었습니다. 무작정 강의를 신청한 건 아니고 먼저 유튜브에서 블렌더 강의를 보고 따라 해 보면서 저한테 블렌더가 맞는지 몇 번 해보고 앞으로 조금 더 배워보고 싶어서 강의를 신청하게 되었습니다. 더군다나 운이 좋게도 블랙프라이데이 기간이기도 해서 좋은 가격에 강의를 신청한 것 같습니다. 제가 신청한 강의는 바로 이 강의입니다. 디자이너분의 작업물을 살펴봤을 때 너무 잘하시는 것 같고 포용포용한 디자인이 너무 마음에 들어서 ..

안녕하세요 무택입니다 :) 오늘은 디자이너로써, 타이틀에 사용하면 좋을 폰트를 들고 왔습니다. 요즘은 간단한 디자인은 디자이너가 아니더라도 많은 분들이 직접 하시기 때문에 실무로 디자인을 하지 않으시는 분들을 위해 간단한 개념 설명도 드리면서 예시를 들어보겠습니다. 아래 폰트들은 당연히 업로드일 기준(23.11.30) 상업적 무료폰트이며 특별한 경우를 제외하면 사용에 문제가 없으니 아래에서 확인해 보세요😀 상업적 무료? 요즘은 저작권이 굉장히 중요한 시대입니다. 근데 무료, 상업적 무료의 차이는 뭘까요? 상업적 무료 폰트는 말 그대로 해당 폰트의 저작권이 '상업적으로 사용해도 되는 폰트'입니다. 그러면 그냥 무료 폰트는 뭔지 감이 잘 안 오실 텐데, 폰트의 경우 드물긴 한데 일반적으로 무료라고 하면 '출..

안녕하세요 무택입니다 :) 아래에서 바로 내용 확인해 보세요😀 1. 빨간 줄이 그어진 텍스트에서 오른쪽 마우스 클릭 2. 맞춤법 검사 비활성화 클릭 - *활성화 하고 싶다면 다시 텍스트에서 마우스 우클릭 - 맞춤법 검사 활성화 클릭 도움이 되었다면 아래 하트 한번 눌러주세요!

2024.9.5 수정 / 식당 폐업했습니다ㅜ 안녕하세요 무택입니다 :)오늘은 최근에 새로 오픈한(23.11.22 기준) 쌀국수 맛집 퍼부어에 다녀온 후기를 남겨볼게요. 호기심에 가본 식당인데 생각보다 너무 맛있어서 다음에 또 가볼 예정인데 아니나 다를까 더현대에도 입점해 있는 식당이더라구요. 아래에서 자세한 내용 확인해 보세요😊  위치위치는 서울대벤처타운역 2번 출구 정면 방향, 신성초등학교 바로 옆에 위치해 있어요. 건물 모퉁이에 위치해 있는데 간판도 큼지막해서 바로 보일 듯한 비주얼입니다.   메뉴메뉴는 사골소고기쌀국수 + 짜조를 먹었어요.쌀국수는 이름 그대로 소고기 베이스 육수라 일반 쌀국수 맛보다 진한 육수 맛이 제대로 느껴지는 쌀국수였어요. 저는 메뉴 사진을 보고 국물이 너무 맛있어 보이길래 ..

안녕하세요 무택입니다 :) 오늘은 투명도 있는 영상을 웹에서 보여줄 때 어떻게 보여줄 수 있는지 알아보도록 하겠습니다. 결론부터 말씀드리면 WebM이란 포맷을 사용하면 되는데 아래에서 자세한 내용을 살펴봅시다👍 투명도 있는 동영상을 찾아보려 했으나 찾을 수가 없어 실제 적용 예시는 제외하게 되었습니다😢 그래도 아래 내용을 따라 하면 적용할 수 있으니 잘 살펴봐주세요 개념설명 WebM은 동영상 포맷입니다. MP4, MOV, AVI 같은 포맷 중에 하나인 셈이죠. 이 포맷은 구글에서 지원하고 개발한 오픈소스 포맷입니다.(킹갓구글) 이 포맷은 이미지에서 투명도를 활용하려면 PNG를 쓰듯 동영상에서 투명도를 활용하려면 WebM을 쓴다고 생각하면 됩니다. 장점은 압축률이 좋아서 파일의 크기가 작습니다. 웹 환경에..

안녕하세요 무택입니다 :) 오늘은 퍼블리싱을 하다가 생길 수 있는 오류 중 하나인 이상한 간격이 생겼을 때 없애는 방법에 대해 써보도록 하겠습니다. 분명 `margin`이나 `padding`이 들어간 게 없는데 이상한 간격이 생겨서 어떻게 해도 사라지지 않을 때가 있습니다. 그럴 때 어떻게 해결할 수 있는지 아래에서 확인해 보세요🙂 같이 보면 좋을 비슷한 오류 글 [HTML/CSS] P태그 안에 DIV를 넣지 마세요! [HTML/CSS]border의 픽셀이 깨지는 오류 해결 Codepen See the Pen Untitled by TytanLee (@TytanLee) on CodePen. 왜 생길까? 이 간격이 생기는 이유는 위에 보이는 공백 때문에 생기게 됩니다. 정확히 설명하면 저런 공백이 있는 상태..

어떤 오류인지? `border-left`를 넣은 `div`가 여러 개 있었는데 소수점 값이 없음에도 불구하고 `border` 픽셀이 자꾸 깨지는 오류가 있었다. 왜 발생했는지? `position, display, margin`등 다 조절해 봤는데도 해결이 안 되었는데 `transform: translate`기능을 끄니 해결되었다. 영역을 가운데로 맞추기 위해 `top:50%, left:50%`값을 주고 `transform: translate(-50%, -50%)`를 사용했는데 퍼센트를 사용하니 값이 정수로 떨어지지 않고 소수점으로 들어간 탓이었다. 다음부터는 % 단위 사용에 있어서 주의하자

안녕하세요 무택입니다 :) 오늘은 알고 가면 좋을 기법인 Image sprites 기법에 대해 써보려고 합니다. 모르시는 분이라면 생소한 이름일 텐데 아래에서 자세한 내용을 만나보시죠. 스프라이트 기법이란? 여러 개의 아이콘이나 이미지를 하나의 이미지로 합쳐서 업로드한 뒤, 각각 필요한 곳에 맞게 이미지의 위치를 조정해서 맞추는 기법입니다. 왜 사용하는지? 기존 방식이라면 아이콘마다 각각의 이미지가 있기 때문에 용량이 적은 파일들이라 하더라도 사이트에 들어오면 이미지들을 각각 다운받게 됩니다. 하지만 이미지 스프라이트 기법을 사용하면 하나의 이미지만 다운받으면 되기 때문에 이미지의 다운속도가 향상됩니다. 또한 용량 관리 차원에서도 미세하게나마 도움이 될 수 있습니다. 결과적으로 웹 최적화에 좋은 기능이기..

HTML/CSS Codepen See the Pen [HTML/CSS]Neon 애니메이션 by TytanLee (@TytanLee) on CodePen. 원본 : 깜보랜딩페이지