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

현재 작업 중인 프로젝트에서는 Next14와 module css를 조합하여 쓰고 있다. Next는 tailwind와 잘 맞다고 하기에 중간에 마이그레이션하려 했는데 생각보다 진척이 늦어져서, 일단 기능 구현을 우선으로 두고 있다. 다만 CSS 변수의 자동 완성이 되지 않는 문제가 가장 해결이 시급해졌다. 📍문제는 무엇?가령 CSS 변수들을 styles 폴더 내부 foundations 폴더에 하단과 같이 css 파일로 저장했다고 치자./*colors.css*/:root { --transparent: transparent; --current: currentColor; --inherit: inherit; --c-white: #ffffff; --c-gray-300: #d7dce5; --c-black..

.pattern { margin: 100px; text-align: center; font-size: 90px; font-family: "Fredoka"; font-weight: 900; } SCSS, CSS로 글씨에 패턴을 입히는 것도 가능하다. 우선 굵은 글씨로 적어둔 뒤 Scss를 연다. 위 코드는 현재 설정이다. 1) 이제 color:transparent; -webkit-text-fill-color: transparent; 를 해준다. 2) 패턴으로 넣고 싶은 이미지를 찾거나 만들어 지정된 이미지 폴더에 미리 저장해둔다. 3) background: url();에 주소로 찾아둔 사진을 링크로 연결해 넣어준다. 4) background-clip: text; 로 바꿔주면 패턴이 텍스트 내부로 들어가는 ..

초창기에는 통용되는 기기들의 넓이가 몇 개로 규격화 되어 있었지만, 지금은 수많은 액정과 모니터가 쏟아져 나오고 있기 때문에 일일이 지정하기가 불가하다. 따라서 '반응형 웹'을 만들 필요성 또한 커졌다. 화면의 크기에 따라 내부 구성요소가 변화하는 반응형 웹은 미디어 쿼리를 적용하여 만들 수 있다. @media media-type and (media-feature-rule) { /* CSS rules go here */ } 이것이 가장 기초적인 미디어 쿼리의 구조다. 'media-type'에는 all, print, tv 등의 '기기 타입'을 지정할 수 있는데 보통 all로 두는 듯 하다. and는 영어로 써야 하고 그 뒤의 ()에 max-width: 1280px 같이 원하는 조건을 삽입한다. min-wi..

오늘은 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/ , 그리고 한국 폰트가 굉..