css

전 프로젝트를 진행하면서 최소한의 css 초기화 코드만 작성했었는데 브라우저에 따라서 다르게 보이는 현상이 발생하여 css 초기화 코드의 필요성을 느꼈다 그래서 가장 많이쓰고 유명한 에릭마이어의 reset code를 적용해봤다.https://meyerweb.

중복되는 css 를 클래스로 선언하여 기본 css 를 입히고 활용하고싶었고 모듈화를 하여 중복되는 코드를 줄이고싶었고 유지보수를 편하게 하고싶었다.보다 쉽게 CSS문법을 사용할 수 있게 해 주는 전처리기로 재활용성, 가독성을 높여 유지 보수를 쉽게 해줍니다.SASS에서

이제 scss 를 알아보았으니 next.js 프로젝트에 적용시켜보자패키지매니저를 이용하여 설치한다.prependData에는 들어갈 scss파일은, 모든 파일에서 사용할수있으므로 colors정의나 mixin 등을 넣어준다.assets 아래에 styles파일을 두었으므로

css inner border 인풋안에 보더를 주고싶었는데 위에 보더를 주다보니 아웃라인에 생기게 되었다.그래서 안쪽에 스타일링을 할려고 찾아보았더니 이런식으로 box-shadow를 활용하여 쓰는것을 알게되었다.

animation 속성도 transition 과 유사하게 단일속성과 속기형으로 작성할 수 있습니다.animation 은 위에서 언급했듯이 animation-\* 속성과 애니메이션의 중간상태를 정의할 수 있는 @keyframes 으로 구성되어 있습니다.animation-

button 태그로 감싸버리면 감싸진 요소가 보이지않기때문에 검색을 하던 중 백그라운드 컬러를 투명으로 설정해주면 된다고 하였기에 설정하여 안에 있는 요소가 잘보이게되었다.

이런식으로 넘치는 타이틀을 ...으로 처리하였다.