Frontend/CSS

TailwindCSS란? HTML을 벗어나지 않고도 최신 웹사이트를 빠르게 구축할 수 있습니다 Tailwind CSS는 사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크이다. 유틸리티 클래스를 사용하여 레이아웃, 색상, 간격, 타이포그래피, 그림자 등 을 제어하여 HTML을 벗어나거나 사용자 정의 CSS를 한 줄도 작성하지 않고 완전한 사용자 정의 구성요소 디자인을 만들 수 있다. Tailwindcss 설치하기 설치하는 방법은 프레임워크 별로 달라서 공식 문서를 참고하는게 가장 좋다. 1. 패티지 설치 npm install -D tailwindcss 2.tailwind.config.js 파일 생성 npx tailwindcss init 3. tailwind.confi..

css의 꽃!! animation을 정리해보쟈!!! 📌animation animation은 transition과 비슷하게 다수의 스타일을 전환하는 애니메이션을 적용한다. animation: doyi_bg 4.5s cubic-bezier(0.645, 0.045, 0.355, 1) 4s 1; 단축형식 : name | duration | timing-function | delay | iteration-count | direction name 은 필수 값이다. 순서들은 크게 상관 없으나, duration 과 delay 순서는 맞춰야 한다. @keyframes doyi_bg { 0% { opacity: 0; } 60% { opacity: 0; } 70% { opacity: 1; } } transition과 다른점..

이번에 새로 만들어진 animation효과이다! scoll내리면 나오는 효과 주고 싶어서 gsap랑 이것 저것 찾아보던 중 animation-timeline을 발견했다! 너무너무 간편하게 사용할 수 있다! 📌animation-timeline : scroll() animation-timeline:scroll(root block); () 안에는 기준이 되는 스크롤바를 적어주면 된다. 오른쪽 nearest -> 가장 가까운 부모 self -> 나 자신 root -> viewpoint 왼쪽 block - 세로 inline - 가로 📌animation-timeline : view() animation-timeline:view(root block); view()는 브라우저 전체 기준이 아닌 현재 보여지는 화면이 기..

background-image: linear-gradient() 이용하기 배경색 똑같이 2개로 나누어 지정하기 (그라데이션 효과) background-image: linear-gradient(to right, red, yellow); 요런 효과가 있었다니!! 이쁘다. 배경색 똑같이 2개로 나누어 지정하기 (그라데이션 효과x) background-image: linear-gradient(to right, red 50%, yellow 50%); 방향은 left, right, top, bottom 다 사용가능하다. % 또한 다양하게 적용이 가능하다 !

📌css - input 태그 안에 이미지 넣기 이런 식으로 input 태그 안에 img를 넣고 싶을 떈?? #login_box li:nth-child(1)>input{ background: url(../src/all_image/login_icon.png) no-repeat 5px center; background-size: 27px; padding-left: 40px; } css 에서 background속성에 url()적용하면 된다. img와 text사이에 여백을 주고 싶으면 padding - left에 값주기 input 안에 img를 넣은 것이기 때문에 padding값으로 여백을 줘야한다!! 그 외에 이미지 크기 background-size: 30px; 이미지 잘리지 않는 선에서 제일 크게 - cont..

포토샵등 이미지 편집 도구를 이용하지 않고 css를 사용해서 이미지에 시각효과를 추가할 수 있다. filter란? filter속성은 요소에 대한 시각효과를 나타낸다. filter 함수 blur(px) 이미지에 흐림효과를 적용한다. 값이 클수록 흐림 효과 ↑ brightness(%) 이미지에 밝기를 조정한다. 100%가 기본값, 100%보다 크면 밝기를 제공하고 0%보면 완전히 검게 처리한다. contrast(%) 흐림효과 이미지의 대비를 조정한다. 100%가 기본값, 100%보다 크면 더 많은 대비를 제공한다. drop-shadow(x, y, blur(색상)) 이미지의 그림자 효과를 지정한다. grayscale(%) 이미지를 회색조로 변환한다. 0%가 기본값, 100%는 이미지를 완전히 회색 처리한다. ..

:nth-child(N)= 부모안에 모든 요소 중 N번째 요소 /* 3, 6, 9, 12 번째(3의배수) 배경변경 */ li:nth-child(3n){ background: red; } /* 10번째 부터 이후 모든 리스트 컬러변경 */ li:nth-child(n+10) { color: blue; } /* 1번째 부터 5번째 까지 배경변경 */ li:nth-child(-n+5) { background: green; } /* 15번째 부터 20번째 까지 배경변경 */ li:nth-child(n+15):nth-child(-n+20) { background: hotpink; } /* 끝에서 부터 3번째 */ li:nth-last-child(3) { background: gold; } /* 홀수 */ li:nt..

📌css-box shadow box-shadow를 만들면 요소를 감싸는 그림자를 만들 수 있다. 그림자 만들어진 것을 확인할 수 있다. 그렇다면 box 안쪽에 그림자를 주려면 어떻게 해야할까? box-shadow 속성 맨 앞에 inset을 붙여주면 된다. 그렇다면 그림자 여러개를 겹쳐서 사용하는 것은 어떻게 할까? , 로 계속해서 그림자를 추가하면 된다. 안쪽그림자와 바깥쪽 그림자를 잘 활용하면 멋진 동그라미를 만들어볼 수 있다. box-shadow를 활용해 animation을 적용시킨 모습이다. 정말 이쁘다 ㅠㅠ https://html-css-js.com/css/generator/box-shadow/ Box Shadow CSS Generator Set the properties of your box s..