오물오물 개발일기

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

Media Query - 반응형 웹 (responsive web) 만들기 위해서는 꼭 필요하다. 👈👈 - head안에 를 선언한다. - 분기별 사이즈는 상황에따라 다르다. @media screen and (min-width | max-width : 사이즈){ /* css */ } 💡 반응형 웹 (responsive web) ? - 현재는 여러 디바이스, 디스플레이 사이즈가 있기때문에 사이즈에 따라 맞춰 화면을 보여주는 웹

Flex box - 요소들을 정렬하기 가장 편한 방법 - 정렬을 하기위한 요소의 부모요소에게 선언을 합니다. .flexbox { display : flex; /* flex | inline-flex */ } flex-direction - 가로, 세로 정렬 방향을 정하는 property - main-axis와 cross-axis의 방향이 따라 가게됩니다. - flex-direction : row -> 가로 방향으로 정렬 - flex-direction : row-reverse -> 가로 반대 방향으로 정렬 - flex-direction : column -> 세로 방향으로 정렬 - flex-direction : column-reverse -> 세로 반대 방향으로 정렬 .flexbox { display : fle..