어리둥절 분석가 그리고 개발자

✔️ 필요성 Next.js 프로젝트에서 CSS module인 sass/scss를 사용해보겠다 ✔️ 방법 npm i sass next.config.js를 아래와 같이 수정해준다 //next.config.js const path = require('path') module.exports = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], }, } 루트프로젝트에 있는 styles 폴더 내의 global.css와 Home.module.css 이름을 global.scss와 Home.module.scss로 바꾸고 해당 파일을 import 해주는 곳에서도 이름을 바꾼다 원하는 CSS를 입력한 뒤 사용한다 /* Home.module.scss */ .t..

✔️ 요소 다음에 꾸밈요소 추가하기 가끔씩 특정 요소 다음에 무조건 밑줄이 나오는 등 분리요소 등을 매번 추가하고 싶을 때가 있다. ::after와 ::before를 통해 요소(태그) 앞뒤로 꾸밈 요소를 추가할 수 있다. footer-text라는 className을 가진 요소의 마지막 뒤에는 항상 gray 색상의 bar가 등장한다 .footer-text { position: relative; display: inline-block; margin-right: 17px; margin-bottom: 4px; text-decoration: none; font-size: 14px; line-height: 20px; &::after { content: ''; display: block; position: absol..

✔️ 인접형제 선택자란? 인접형제 선택자란 CSS 선택자(Selector) 중에서 같은 부모 아래에 있는 태그 두개가 인접해서 나타날 때 두번째 태그를 선택하기 위한 CSS 선택자이다. 즉, E + F 라고 하면 E 다음에 바로 나오는 F 요소를 의미한다 더 자세한 CSS 선택자(Selector)에 대한 글은 아래에! CSS: 선택자(Selector) 이해 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우 www.nextree.co.kr ✔️ SCSS에서 & SCSS에서 &은 무조건 위의 부모 요소를 의미한다 ✔️ & + & .a-file { ove..