힘내봐요 개발의 숲

웹폰트 란,웹폰트(Web Fonts)는 웹 디자인에서 더 나은 시각적 경험을 위해 필수적인 요소입니다. 기본 시스템 폰트로만 제한되어 있으면 웹사이트의 디자인 선택폭이 제한되는데, 이는 디자이너와 개발자 모두에게 제한된 경험을 제공하게 됩니다. 웹폰트는 이러한 제한을 극복하고, 웹사이트에 디자인 요소를 추가할 수 있는 강력한 도구입니다.웹폰트 최적화의 필요성하지만, 웹폰트를 사용할 때는 최적화가 필수적입니다. 왜냐하면 웹폰트는 웹페이지의 성능에 영향을 미치는 요소 중 하나이기 때문입니다. 웹폰트를 사용하면 추가적인 리소스가 필요하므로 로딩 속도가 길어져 FOIT, FOUT와 같은 문제가 발생할 수 있어 사용자에게 혼란을 줄 수 있고, 사용자 경험을 저하시킬 수 있습니다.FOIT, FOUT 란,FOIT(F..

웹 개발자라면 누구나 CSS를 사용하지만, 복잡한 CSS 코드 작성으로 어려움을 겪은 적이 한 번쯤 있을 것입니다.Tailwind CSS는 바로 이러한 문제를 해결하기 위해 등장한 CSS 프레임워크입니다. 기존 CSS와는 달리 유틸리티 클래스 기반으로 구성되어 있어, 마치 레고 블록처럼 직관적으로 CSS 코드를 작성할 수 있습니다. Tailwind CSS 란,Tailwind CSS는 Adam Wathan과 Adam Pisoni가 개발한 CSS 프레임워크로, 2017년 오픈 소스로 공개되었습니다. Tailwind CSS는 유틸리티 클래스 기반으로 구성되어 있으며, HTML 요소에 직접 클래스를 추가하여 원하는 스타일을 적용할 수 있습니다. 또한, 다양한 색상, 글꼴, 크기, 여백, 패딩 등을 위한 미리 정..

웹 프론트엔드 개발에 대한 이해도를 높이고 기초부터 숙달하기 위하여, 새로운 프로젝트를 Vanilla JS로 진행해 보기로 했다. 페이지 전환 속도를 감소하여 사용자 경험을 향상시키기 위하여, React처럼 SPA(Single Page Application)로 구현했다.꽤나 어렵고 번거로운 일이었지만, 직접 구현해보며 어떤 식으로 돌아가는지 공부해 볼 수 있었고, 프레임워크나 라이브러리를 쓰며 얼마나 편하게 작업할 수 있었던 것인지 깨달을 수 있었던 유익한 시간이었다. 구현 시 아래 목표들을 달성하기 위해 많은 고민을 하며 진행했다.페이지 이동 시 URL의 경로도 변경될 것URL의 경로가 깔끔할 것뒤로 가기가 가능할 것해당 페이지의 CSS가 적용될 것URL의 경로를 직접 수정하여도 해당 페이지로 이동될 ..

CSS 는 대부분 재미있지만, 정렬하는 부분에서 꽤 애를 먹게 되는 것 같다.예전 프로젝트 때도 정렬 때문에 CSS 하면서 힘들었던 기억이 있어서, 이번 붕어빵을 부탁해 프로젝트를 하며 기록해두려고 한다.  붕어빵을 부탁해 메인페이지를 만드는 중인데, div 들이 좌측 정렬 된 채로 가운데 정렬이 잘 안되어서 우선 배치만 해두었다. 요소들이 세로로 배치되어 있고, 이걸 세로로 가운데 정렬 해야하는 상황이다. 서치해보면서 몇몇 시도를 했는데 원하는 결과가 나오지 않았다🥲margin : auto 를 줘라 - tailwind에서는 해당 속성이 없어서 불가text-align : center 를 줘라 - 적용해도 정렬되지 않음서치하며 이것저것 하다가, flexbox 로 하는 방법을 알게 되었고, 드디어 성공! ..