오열매의 코딩 공간

npm i styled-components npm i --save-dev @types/styled-components import { createGlobalStyle, ThemeProvider } from "styled-components"; const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,..

mixin을 이용하다가 parameter를 사용하지 않아도 default 값을 설정하고 싶을 때가 있다. 그런 경우에는 기존에 올렸던 포스팅처럼 변수를 파라미터로 보내어 if elseif 문으로 처리하는 방식은 적용되지 않는다. (parameter없이 사용 불가하다는 뜻) 프로젝트를 진행하고 있는데 위 박스에 있는 코드들이 자주 반복된다. 매번 쓰는 것도 상관은 없지만, 반복되는 코드들이 거슬려서 mixin을 사용하려 한다. @mixin flex-center($jcc: center, $aic: center) { display: flex; justify-content: $jcc; align-items: $aic; } 위 코드처럼 parameter 자리에 변수 및 default값을 직접 설정할 수 있다. 해..

JavaScript 파일에서 CSS를 변경하는 방법에 대해 정리한다. event를 활용하여 실습을 진행한다. 1) CSS 적용 순서 실습을 통해 살펴본다. step 1 > element를 찾는다. const text = document.querySelector(".container__contents"); step 2 > event를 listen한다. text.addEventListener("click", handleTitleClick); step 3 > event에 반응한다. function handleTitleClick() { const currentColor = text.style.color; let newColor; if (currentColor == "blue") { newColor = "toma..

Mixins의 사용 방법 중 하나이다. 정의한 mixin에 기존 코드를 옮기는 방법이다. mixin에서의 코딩 문법과 활용하기에 적절하며, 반응형 웹을 위한 미디어 쿼리에도 활용할 수 있다. 메인 scss 파일에서 @include 와 mixin 이름 + 파라미터 를 선언하고, 그 안에 추가 속성을 넣어 선언한다. mixin 파일에는 파라미터와 추가 속성 값이 넘어가게 된다. 추가 속성 값은 mixin 파일의 @content 부분에 해당한다. 이를 if else 등에 적절히 활용하여 media query를 사용하는 코드이다. 위 media query에 사용한 변수 값을 정확하지 않으므로, 추후 포스팅에서 자세하게 쓸 예정이다. (사용 금지) 이런 방식이 있다는 정도만 소개하는 포스팅이다. 참고) https..

SCSS를 더욱 파워풀하게 쓸 수 있는 방식에 대해 소개한다. Mixins 와 Extends이다. 1) Mixins Mixins는 CSS를 '프로그래밍'하여 상황에 맞게 효과를 적용시키는 데 적합하다. 파일을 따로 분리하는 것이 좋다. 이름은 _mixins.scss로 하고 import 하면 된다. (확장자 .scss 는 생략 가능) 실습에 사용할 html 태그들이다. 상자 6개를 가지고 진행한다. 우측 상단이 _mixins.scss 이다. mixin을 사용할 땐, 메인 scss 파일에서 @include mixin명(파라미터) 로 사용한다. 좌측의 styles.scss에서 @include를 사용하여 변수를 보낸다. 함수를 사용하는 것과 같은 방식으로, 파라미터를 보내고 해당 변수에 맞는 값을 효과로 설정한..

네스팅과 변수를 선언하고 사용하는 방법에 대해 포스팅한다. 위 두 가지는 기본 사용법으로, CSS와는 아주 차별화되고 훨씬 편안한 방식들이다. 한 번 맛을 보면, 다신 CSS로 돌아갈 수 없다.(주관적 생각) 또한, SCSS로 BEM을 사용하는 방식도 위 두 가지 대상들을 통해 함께 알아본다. 1) Nesting 기존 CSS를 사용하려면, 태그나 클래스, 아이디 등을 대상으로 지정하여 '독립적'으로 속성을 선언해야 했다. Nesting은 이러한 틀을 깨버리는 아주 효율적인 방식이다. 하나의 태그 안에 다른 태그가 속해있다면, 처음 정의한 태그를 벗어나지 않고 그 안에 정의할 수 있다. 원래는 body 태그의 괄호를 닫은 뒤에 클래스명이 container인 태그에 대해 새롭게 괄호를 열어야 했다. 하지만,..

반응형 웹(Responsive Web) 사이트 제작에 도움을 주는 요소들이 있다. Grid cell에 관한 파라미터인데, 높이 또는 너비를 상황에 맞게 변화시켜준다. 주로 grid-template-columns / grid-template-rows 를 정의하는 repeat() 함수와 많이 쓰인다. 1) minmax 최소, 최대 길이를 지정한다. 예시와 함께 살펴본다. .container { height: 100vh; display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); grid-template-rows: repeat(3, 100px); gap: 20px; } minmax(100px, 1fr)로 설정했다. 이 뜻은, 각 셀을 100px ..

Flex-box와 마찬가지로, 대부분 부모 태그에서 컨트롤 한다. Flex-box도 매우 유용하지만, Grid가 더 필요한 경우도 있을 수 있다. 많이 사용하는 속성으로만 간단 요약하여 정리한다. 1) grid-template-columns / grid-template-rows 가장 중요한 속성이라고 생각한다. 그리드의 형태를 정의하는 속성 및 방식들이 여러가지 있고, 속성들 또한 다양하지만 기본적으로 이 속성을 사용하여 정의하는 것이 직관적이라고 생각한다. display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px 100px 100px; 각 행과 열에 대해 너비와 높이를 직접 지정해주는 방식이 기본 방식이다. Gr..

Flex-Box의 속성에 대해 아주 간단하게 코드를 통해서만 살펴본다. 속성들이 아주 다양하지만, 실용적인 속성 위주로만 포스팅한다. (전체 속성들을 알고 싶으면 따로 찾아봐야 한다.) 1. Flex-Box 정의) display:flex; 위 코드를 flex를 적용시킬 요소들을 감싸고 있는 부모 태그에 선언한다. 요소들이 main axis를 기준으로 한 라인에 있도록 한다. 2. flex-direction) flex-box는 main-axis와 cross-axis가 있다. flex-direction은 main-axis를 기준으로 설정한다. 위 그림의 굵은 선이 main-axis, 얇은 선이 cross-axis이다. flex-direction: row; 부모 태그에 선언한다. * row (default) ..

요소의 위치를 결정하는 position 속성은 아주 요긴하게 쓰인다. position에는 5가지 속성 값이 있다. static, fixed, relative, absolute, sticky 이다. 실습을 통해 순서대로 살펴본다. 들어가기 전에] 간단한 예제로 각 요소의 기준 및 위치 선정 방식, 속성을 그림으로 파악한다. 1 > 초기 위치 2 > 스크롤을 내린 상태 위 그림들을 기준으로 설명한다. 1) static 초기 요소의 상태. 아무런 설정을 하지 않은 상태이다. (default) 따라서 기준도 따로 없다. 2) fixed 브라우저를 기준으로 요소를 위치시킨다. 페이지의 맨 왼쪽 위의 꼭짓점(top: 0px, left: 0px)을 시작점으로 한다. 또한, 스크롤을 내리더라도 변함 없이 그 자리에 고..