minTech

scss는 module.css와 굉장히 유사하다는 말만 들어보았지 직접 사용해본적이 없다. 매번 사용해보고 싶다는 생각이 들었는데 마침 이번 프로젝트에서 CSS의 스타일 정의 방법으로 module CSS + SCSS 방식이 채택되었다!! 프로젝트에 들어가긴 전에 한 번이라도 써보고 들어가고 싶어 한번 test 해본 것을 글로 작성해보겠다! 😁 먼저 시작에 들어가기에 앞서 문득 궁금했다. scss란 무엇이고, 왜 module CSS와 SCSS를 둘이 혼합해서 사용하고, module CSS만 쓸 때와 어디가 어떻게 다른건인지? SCSS란 그럼 무엇인지 알아보잣 !!!   Sass?scss를 알아 보면서 먼저 알아야할 점이 Sass이다. Sass는 SCSS의 원조 문법? 이다.  먼저, Sass는 css의 ..

구현하려는 내용 프로젝트 내에서 사용한 스킬들을 badge 형태로 나타내려고 하였다. 전체적인 동작은 다음과 같다. 사용 stack 이름을 파라미터로 받는 StackBadge 컴포넌트가 동작한다. 컴포넌트 내에서는 stack 이름을 getBadgeColor의 인수로 넘겨준다. getBadgeColor 함수의 return 값으로 받은 배경 색을 badge의 background color로 입혀준다. 각각의 코드는 다음과 같다. // getBadgecolor.js export const getBadgeColor = (stack) => { let backgroundColor = ""; switch (stack) { case "Javascript": backgroundColor = "yellow-300"; br..

🤷‍♂️문제 발생 팀프로젝트를 하다가 배경색을 지정하기 위해, width 100vw, height 100vh 값을 지정한 container 박스를 만들고, background color를 지정해주었다. const ContainerDiv = styled.div` width: 100vw; height: 100vh; background-color: "beige" `; 처음에는 스타일이 잘 적용되었길래 넘어갔지만, 프로젝트를 진행하다가 그 내부 요소들이 뷰포트를 넘어가게 되고, 스크롤을 내리는 순간 !! 내린 부분에는 background 컬러가 적용이 안되어있는 것을 보았다. 🕵️문제 원인 height: 100vh; height의 값을 100vh로 지정해주면, 현재 보이는 창을 기준으로 100%만큼의 높이로 지..

position 코드에 내가 원하는 태그들을 차례대로 놓게 되면 위에서부터 차례대로 쌓이게 된다. 예를 들어 를 4개 배치해보았다. 배치한 결과는 다음과 같다. 4개의 div가 위에서부터 쌓여있는 모습을 볼 수 있다. (border 값은 3을 주었다.) 하지만 만약 하나를 순서대로가 아닌 다른 위치에 배치해야한다고 가정해보자. 그럼 나머지는 글의 흐름대로 위에서부터 쌓이지만, 하나는 따로 값을 지정해 따로 이동해야한다. 사용하는 것이 태그이다. 아래 그림은 두 번째 div 태그에 position 의 속성값을 absolute로 지정해준 모습이다. 첫 번째, 세 번째, 네 번째는 위에서부터 차례대로 위치해있지만, 두 번째 태그만 이를 따르지 않고, 위쪽으로 조금 이동하고, 오른쪽으로 조금 이동한 것을 볼 수..

CSS는 Cascading StyleSheet의 약자 stylesheet의 종류 Inline Style Sheet Internal Style Sheet Linking Style Sheet Cascading이란 HTML 요소들을 css를 통해 스타일링을 하나보면 하나의 요소에 여러 css 스타일이 중복되는 경우가 생길 수 있다. 이런 경우 어떤 스타일을 적용해야하는지에 대한 우선순위를 cascading이라고 한다. 그렇다면 cascading의 기준은 무엇이 있을까? 우선순위를 정하는 기준에는 다음 3가지가 있다. 중요도 코드상의 순서 선택자의 명시도 css의 선언 위치 (중요도) 1. 태그 내에서 style 속성 2. 의 3. 의 안에 @import 4. 로 연결된 css파일 5. 로 연결된 css파일 내..