STYLE SHEET

SASS - mixin

자주 만드는 UI 컴포넌트가 있다면 해당 기능을 빠르게 만들어 줄 수 있는 기능이 mixin입니다 외부파일에서 작성해서 import로 불러오겠습니다 SCSS 폴더 내에 _mixin.scss 파일 생성 보통 아래 코드를 보면 boder-radius, color, 위치값 등 자주 쓰는 값을 하나하나 쓰는게 꽤 비효율적입니다 a { display: block; width: 100px; height: 40px; border-radius: 20px; background: gray; font-size: 12px; color: #fff; display: flex; justify-content: center; align-items: center; } 공통적인 UI를 mixin을 통해 바꾸도록 합시다 JavaScript..

SASS - 변수

코드마다 하나하나 색상이 있는 값을 찾아서 컬러값에 지정해야했습니다 많이 바뀌는 코드값을 변수로 지정해서 편리하게 값을 변경할 수 있습니다 Scss에서 변수를 만들 땐 " $ " 표시를 합니다 $bgbody에 #eee라는 컬러값이 들어가 있는 셈입니다 $bgBody: #eee; 해당 변수를 body에 백그라운드에 넣을 수 있습니다 $bgBody: #eee; body { background: $bgBody; } css에서 확인해보면 #eee로 들어가있는걸 확인할 수 있습니다

SASS - nesting 기능 소개, 사용법

nesting이란, 보통 css로 코드를 작성 시 부모 클래스를 써주고 자식이나 자손 클래스명을 써주어야했습니다 코드가 많아지면 많아질수록 가독성이 떨어지고 코드를 보기 힘들어지기도 하죠 하지만 Sass에선 부모 셀렉터를 줄여주고 HTML 구조에 따라서 눈에 보기 쉽게 코드를 작성할 수 있습니다 먼저 CSS로 작성하겠습니다 @charset "UTF-8"; @import "reset"; body { background: #eee; } .wrap { width: 100%; border: 2px solid #bbb; padding: 100px; display: flex; justify-content: center; } .wrap .item { width: 300px; padding: 30px; backgrou..

SASS - import

css 보다 효율적으로 관리할 수 있는 방법에 대해 알아보겠습니다 article.item*4>h2{Sub Title}+p>lorem15^a[href="#"]{view} Sub Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione et nulla sit voluptates explicabo veniam? view Sub Title Voluptas quaerat laboriosam eos ea autem facere quae, laudantium ut explicabo doloribus facilis quis reprehenderit. view Sub Title Doloremque sunt, commodi eveniet unde con..

SASS - style.css.map

sass와 scss를 컴파일 하고 css로 변환해보면서 생긴 의문점이 있다 style.css 파일이 만들어지면서 style.css.map이 같이 생겼는데 이 파일은 어떤 역할을 할까? style.scss에서 코드 가독성 없이 이상하게 만들어도 style.css에선 정상적으로 나오는걸 확인할 수 있다 작업하고있는 파일은 style.scss인데 실제 브라우저에서 읽히고 있는 파일은 컴파일이 된 style.css이다 브라우저상에선 css 디자인이 나오지만 실제 scss가 위치한 곳을 알려주는것이 style.css.map이다

SASS, SCSS 개념소개

html css js를 공부하다보면 sass 혹은 scss라는 것을 한번 쯤 들어봤을 수 있다 SASS란 css의 전처리기이며 css를 효율적으로 관리할 수 있는 방법 중 하나이다 브라우저에서는 css외에 다른 문법은 알아들을 수 없으므로 우리가 sass로 작업을 하되 브라우저가 알아들을 수 있게 변환을 해주어야한다 아래 처럼 css 폴더 내에 빈 파일과 sass 폴더 내에 style.sass를 만들어주었다 sass > style.sass 파일에 아래처럼 문법을 작성한 상태다 이제 이 문법을 css로 변환한다 @charset "UTF-8" * margin: 0px padding: 0px terminel $ sass --watch sass/style.sass css/style.css 변환 시 자동으로 st..

CSS @Keyframes 복습

css keyframes을 이용한 마을꾸미기 해봤습니다! @import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap'); /* reset.css */ *{ margin: 0px; padding: 0px; box-sizing: border-box; } body { width: 100%; height: 100vh; overflow: hidden; animation: sky linear 20s infinite; } section { width: 1000px; height: 400px; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -500px; ..

CSS 3D - 앞 뒤 다른 모습인 카드 만들기 #2

CSS 3D 첫번째 에 이어 .world 에 마우스 hover시 애니메이션이 작동되도록 만들어본다 .world { width: 80vw; height: 80vh; background: slateblue; display: flex; align-items: center; justify-content: center; perspective: 500px; } .card { display: flex; align-items: center; justify-content: center; width: 100px; height: 150px; margin: 1em; background: tomato; border-radius: 0.5em; font-size: 1.5rem; } 카드 뒤집기 .card { transition: ..