코로 넘어져도 헤딩만 하면 그만

VS Code를 다룰 때 유용하게 쓸만 한 확장 프로그램을 하나 더 추천 받았다. 그 이름하야 'Post Css Sorting'. 사진 참조. 말그대로, CSS 태그들 설정을 보기 좋게 후처리로 정렬해주는 확장 프로그램인 듯하다. 1. 일단 위 확장 프로그램을 검색해서 내려받는다! 2. 설정 -> 확장-> 위 프로그램에 들어가 postcss-sorting documentation 에서 아래 부분을 긁어온다. order: [ 'custom-properties', 'dollar-variables', 'declarations', 'at-rules', 'rules', ], 'properties-order': 'alphabetical', 3. 설정창에서 해당 프로그램을 검색, settings.json에서 편집을 ..

제목처럼 오늘 해본 것은 제법 간단하다. 바로 슬라이더 넣기! 슬라이더가 뭐냐면 사진이 여러 장 있을 때 옆으로 스르륵 넘기면서 볼 수 있게 하는 그거다. 바로 그거. Swiper js https://swiperjs.com/는 라이브러리로, 누군가 고맙게 미리 짜둔 코드를 우리가 가져다가 슬라이더로 쓸 수 있는 곳이다. 물론 유료 슬라이더들도 있지만 기본적인 형태의 슬라이더를 무료로 유용하게 제공한다. 이걸 직접 js로 다 짤 수도 있겠으나 그러면 그거 갖고 네■버에(ㅋㅋ)취직해도 된다고 하더라... 하여튼. 만들기까진 세월아, 네월아 걸리는 시간을 단축시켜주는! 고마운 슬라이더를 적용하는 법을 한번 정리해보겠다. 1. 먼저 홈페이지에 회원가입을 하고 나서 Get Started를 클릭한다.(사실 여기에 ..

오늘은 SCSS를 다루는 법을 맛보기처럼 배워봤다. CSS를 좀더 편하게 작성하게 하는 SCSS를 사용하기 위해, 맨 먼저 VSC에 확장 프로그램으로 Live Sass Compiler을 깔아야 한다. 'Glenn Marks'가 배포하는 파일로 설치할 수 있다. 보라색 눈 모양이 있는 프로그램을 설치하면 된다. 다만 여기서 끝이 아니다. 보다 편리하게 쓰기 위해서는 설정을 조금 더 만져줘야 한다. 어차피 확장 프로그램은 한번 설치해서 죽 쓰게 될 것이니 처음부터 설정을 잘 해두는 게 중요하겠다. SCSS는 .scss 파일이지만, 이 파일은 HTML에서는 읽히지 않는다. 따라서 .scss 파일로 작성한 뒤에 반드시 .css 파일로 컴퓨터가 처리할 수 있게 바꿔주는 작업(컴파일 Compile)이 필요하다. 바..

웹에 기본 폰트가 아닌 새로운 폰트를 적용하는 방법으로는 여러가지가 있다. 1. 웹 폰트는 주로 WOFF 파일을 쓴다. 즉, 우리가 보통 여러 용도로 다운받아 쓰는 폰트들은 OTF나 TTF파일이기 때문에, 이 파일을 올리면 제대로 적용되지 않는 오류가 발생한다. 검색해보면 TTF파일을 WOFF파일로 바꿔주는 사이트들도 존재한다. 그러나 가끔 변환 중에 파일이 깨지기도 하고 저작권을 일일이 알아봐야 해서 조금 곤란하다(폰트는 유독 저작권에 민감하니, 조심.). 프로젝트에서 반드시 써야 하는 특별한 폰트가 있지 않는 한 피해야 할 방식이라고... 2. 그래서, 이럴 때에 알아둬야 하는 페이지가 두 개 있다. 구글에서 제공하는 구글 폰트 https://fonts.google.com/ , 그리고 한국 폰트가 굉..

Vs Code의 확장 기능 중에서도 정렬을 보기 좋게 정돈해주는 Prettier이 있다. 학원 컴퓨터에는 잘 설치를 했는데, 집에 와서 혼자 해보니 이상하게 정렬이 되지 않아 곤란을 겪고 있었다. Vs Code 창에서 우측 하단에 Prettier이 체크 표시로 뜬다면, 그것은 해당 확장 프로그램이 제대로 작동 중이라는 뜻이다. 따라서 이때는 다른 방법을 시도해야 원하는대로 기능이 알맞게 적용되는 것을 볼 수 있다. 1. 우선 Vs Code의 파일>기본설정>설정에 들어가 'Format on Save'를 입력하고, 해당 칸에 체크가 되어 있는지 확인한다. 2. 이후 같은 창에서 'Default formatter'를 검색해서 Prettier로 지정해주어야 한다. 처음 Vs Code를 깔았다면 null 없음으로..