오물오물 개발일기

🙏 Sass(Syntactically Awesome Style Sheets)? Sass는 CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성과 가독성을 높여줍니다. 💡 CSS pre-processor(CSS 전처리기) ? CSS를 확장하는 스크립팅 언어로서, 컴파일러를 통하여 브라우저에서 사용 할 수 있는 일반 CSS 문법 형태로 변환합니다. Sass, Less, PostCSS, Stylus etc... 1. 💾 셋팅하기 Sass를 사용하기위해 node-sass를 설치합니다. yarn add node-sass 이후 Sass를 사용하기위해 css파일의 확장자명을 .scss를 사용하여 생성합니다. 💡 .sass 와 .scss Sass가 처음 릴리즈 되었을때는 .sa..

Selector - type(tag), class, id 등을 선택하여 css, js 작업등을 할 수 있습니다. Type(tag) Selector - 원하는 tag를 선택하는 방법 Selector Type, Class, ID Selector h1 { color:red; } Class Selector - class는 복수의 명을 지정할 수 있습니다. - class 선언시에는 띄어쓰기로 구분합니다. - Selector 사용시 .name 형식으로 선택합니다. Selector Type, Class, ID Selector h1 { color: brown; } .red { color: red; } .blue { color: blue; } ID Selector - 한가지의 ID만을 쓸 수 있으며 다른 요소와 중복이 ..

Visibility - 요소 표현에대한 유뮤를 나타냅니다. - visible | hidden .visibility { visibility : hidden; /* default visibility : visible; */ } 💡 visiblity:hidden; & display : none; ? -> visibility : hidden은 안보이지 그위치에 존재하나 display : none; 는 위치에도 존재하지 않으며 디스플레이에서 사라지게 된다.

Transform - 요소를 움직이거나, 회전, 기울기 등 여러 작업을 할때 사용합니다. - translate | rotate | scale - translate -> 요소를 움직일때 사용한다. .transform { transform : translate(10px, 30px); /* translate(x,y) -> translateX(), translateY() */ } * https://developer.mozilla.org/ko/docs/Web/CSS/transform transform CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. developer.mozilla.org

Opacity - 요소에 투명도를 지정할때 사용합니다. - 0 ~ 1 (낮을수록 투명도 ↑) * opacity : 0; 인 투명상태가 되어도 content는 눈에 보이지않을뿐 그자리를 유지하고있다.

Box Shadow - 요소에 그림자 효과를 적용시 사용 - h-offset, v-offset, blur, spread, color - x, y, 흐린정도, 그림자사이즈, 색상 .box-shadow { box-shadow : 20px 20px 60px #489dcf, -20px -20px 60px #62d5ff; /* 4개 그림자사이즈 생략 3개 그림자사이즈, 흐린정도 생략 */ } https://neumorphism.io/#55b9f3 Neumorphism/Soft UI CSS shadow generator CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discove..

Animation - click, mouseover 등의 event 없이 동작하는 애니메이션 - transition 보다 더 디테일하게 작업할 수 있다. .animation { animation : animation-name 1s ease-in-out 500ms alternate infinite; /* name | duration | timing-function | delay | direction | iteration-count */ } @keyframes animation-name { from { /* */ } to { /* */ } } /* detail */ @keyframes animation-name { 0% { /* */ } 33% { /* */ } 100%{ /* */ } } https://d..

Transition - click, mouseover 등의 event발생시 적용됩니다. - 요소에 애니메이션을 줘서 자연스럽게 변화할 수 있게 해줍니다. - property, duration, [timing-function], [delay] - property -> 변화가 일어날 속성 - duration -> 지속시간, transition이 일어나는 시간 (ms, s) .box { font-size : 24px; background-color : red; transition : font-size 2.5s; /* 폰트가 변할때만 */ transition : font-size 2.5s, backgorund-color 1s; /* 둘 다변화 시키는데 따로따로 줄때 */ transition : all 2.5s;..

🎨 background-color - 배경에 색상을 바꿀때 사용합니다. - hex | rgb | rgba 로 색상이 표현됩니다. .box{ background-color : #0066ff; } 🖼 background-image - url()을 사용하여 경로를 지정합니다. - 본인의 로컬 경로를 넣거나 웹상의 인터넷 주소를 넣습니다. .box{ background-image : url('./assets/image/image.jpg'); } 🎭 background-repeat - 이미지 반복사용을 지정 가능합니다. - repeat | no-repeat - 반복 | 반복하지않음 .box{ background-image : url('./assets/image/image.jpg'); background-repea..

Web Font - 직접 폰트를 다운받거나 가져와서 쓰는 방법이 있다. - link, @import 등을 사용한다. web font 이 폰트는 noto sans kr 입니다. body { font-family: "Noto Sans KR", sans-serif; } 💡 로컬에있는 폰트 사용하기 - 폴더에 폰트 파일을 넣는다. - font-face로 원하는 폰트를 설정해준다. - src property의 경우 아래 링크에서 가져와서 사용한다. https://css-tricks.com/snippets/css/using-font-face/ Using @font-face | CSS-Tricks The @font-face rule allows custom fonts to be loaded on a webpage. ..