오물오물 개발일기

🙏 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..

Vanilla JS를 이용한 DropDown Menu 만들기 - 선택창이나 메뉴를 숨길시 필요한 DropDown 형식의 메뉴 - dropdown__toggle 을 클릭시 dropdown__items 에 show라는 클래스가 추가된다. .dropdown__items { max-height: 0; overflow: hidden; border: 1px solid rgba(224, 226, 231, 0.75); border-radius: 3px; transition: max-height 300ms ease-in-out; } .dropdown__items.show { max-height: 100vh; } - dropdown__btn 을 클릭 하면 dropdown__toggle에 선택 메뉴가 표시되고 dropdow..

Vanilla JS를 이용한 Tab Menu 만들기 - 자주 쓰이고 기본적인 TabMenu 만들기이며 기본 원리는 탭에 따른 내용은 display : none -> block .tab-container__item.active { border-bottom: 2px solid #369fff; } - 메뉴가 선택 될 시 active라는 클래스를 추가적으로 가지며 border-bottom에 변화를 준다. .content-container__content { display: none; } .content-container__content.target { display: block; } - 메뉴 선택시 해당하는 content에 target라는 클래스를 추가적으로 가지게 하고 display를 활용하여 표시한다. Ta..

개요 - 이용자가 웹브라우저에서 url을 통하여 웹페이지에 들어오게 된다. 이후 브라우저는 요청을 받고 해당하는 결과물을 보여주기위해 작업을 하게 된다. 이때 어떠한 과정을 거치는지를 알게 되면 이용자에게 성능이 보장된 웹페이지를 제공할 수 있을것이다. 기본 동작 과정 - 다음은 렌더링 엔진의 기본적인 동작 과정이다. * 자세히 적어보자면 Requests.response -> loading -> scripting(DOM,CSSOM) -> layout(표기계산) -> painting(그림그리기) -> composition 단계를 거치게된다. 브라우저 엔진 마다의 동작과정 - 기본 동작과정을 기반으로 각 브라우저에서 사용하는 엔진에 따라 조금 다르게 표현이 된다 - 웹킷(webkit)은 사파리, 크롬 브라우..

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;..