sass란 무엇일까요?완벽한 언어란 없습니다. 계속해서 수정해나가면서 점점 괜찮아지는 수 밖에 없죠. css란 언어도 그렇습니다. 웹페이지를 꾸밀 때 당연히 사용해야할 언어이지만 한계가 많은 언어입니다. 여러 선택자를 통해 효과를 주다보면 금방 코드의 양이 늘어나고 코드의 양이 늘어나면 그에 따라서 또 복잡해집니다. 이에 여러가지 해결책들이 생겼고, sass도 그 해결책 중의 하나라고 생각하시면 됩니다. sass는 기초 언어에 힘과 우아함을 더해주는 css의 확장이다. 위의 말에도 나와 있듯이 css에서의 한계점들을 sass는 여러가지 기능들을 추가해서 해결하려고 하죠.리액트 프로젝트에 sass를 설정해봅시다.예전에는 yarn eject 명령어를 통해서 웹팩 설정을 해줬어야 하지만 이제는 간단하게 sas..
css module이란?css은 모듈은 css를 전역적이지 않고 지역적으로 사용할 수 있게 만들어 줍니다. 가령 클래스 이름이 "App_app__1JlHe" 와 비슷한 형태로 되어 있는 것들을 본 적이 있으신가요? 이런 이름으로 되어 있는 것이 css module이 적용되어 있는 것입니다. App은 파일의 이름이고, app은 클래스네임, 그리고 1JlHe은 랜덤으로 생성된 해쉬입니다. 이처럼 지역적으로 바꿔주면서 이름도 절대 안겹치도록 바꿔주기 때문에 많이 사용합니다. 간단히 말하면 css 파일에 .big이라는 값이 들어가 있더라도 파일이 다르면 둘은 다른 값이 됩니다. 리액트에 적용시키기리액트가 업그레이드 되면서 css 모듈을 적용시키는 방법이 장난아니게 쉬워졌습니다. css 파일 이름과 확장자 사이에..
css reset을 사용하는 이유각 브라우저마다 기본적으로 태그가 갖고 있는 디자인은 다릅니다. 단순히 표현하자면 각자가 예쁘다고 느끼는 것이 다르기 때문에 똑같아야 하는 것들만 똑같고, 마진 같이 자율적으로 값을 줄 수 있는 것은 브라우저에서 예쁘다고 느낀 것만큼 준 것입니다. 그런 기본적인 값들이 다르기 때문에 css reset을 통해서 스타일을 없앤 후에 값을 주었던 것이죠.css의 all 속성엘리먼트에 적용된 값들을 초기화할 수 있게 만들어 주는 것이 all 속성입니다. 줄 수 있는 값은 initial, inherit, unset이 있습니다. 아래와 같이 여러 태그들이 있다고 가정해보세요. 이 태그들은 기본적인 스타일들을 갖고 있습니다. 이제 이 태그들에 기본 스타일을 없애보도록 하겠습니다. al..
직접 한번 만들어보면서 css grid를 연습해봅시다.실제로 만들어보면 앞에서 다뤘던 것을 금방 익힐수 있습니다. 페이지 보러가기 간단한 싱글 페이지입니다. 링크에 접속하시면 똑같은 화면을 볼 수 있습니다.예제를 만들 때 도움이 되는 사이트이용하시는 곳이 있다면 상관없지만 해당 사이트를 만들 때 아이콘 등을 어디를 이용할 지 모르겠다면 아래의 사이트를 이용하시면 됩니다. iconmonstr 바로 가기 저는 svg에서 embed를 통해 직접 삽입을 하는 편입니다. 이미지의 경우 저는 핀터레스트를 통해서 이미지를 찾고 이미지의 링크를 div태그의 배경에 삽입했습니다. 또한 css 리셋 등은 검색하면 바로 나오지만 아래에 링크를 첨부합니다. css reset 바로 가기분석해보기예제용으로 만든 것이기 때문에 모..