HAEDDA

흐르는 형태의 배너를 만들 일이 종종 있는데CSS로 간단하게 만들 수 있어서 정리해봤다.   가로로 흐르는 배너  See the Pen flow banner - 가로 by seuliing (@seuliing) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   세로로 흐르는 배너  See the Pen CodePen Home flow banner - 세로 by seuliing (@seuliing) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   마우스를 올리면 css 애니메이션을 멈춰서일시정지 효과를 주기도 했다.

css 2024. 6. 20. 23:50

1. 버튼으로 라이트/다크모드 전환하기 더보기 우선 라이트 모드로 기본적인 css를 적용한 후, 배경색과 컬러를 적용되어 있는 태그에 다크모드 class를 추가하여 다크모드시 적용할 css를 추가 작성. 버튼 클릭시 자바스크립트(혹은 제이쿼리)로 해당 클래스를 추가/제거하는 방식으로 다크모드를 구현한다. * 버튼 아이콘 변경의 경우, 우선 버튼을 가상클래스 ::before로 만든 후, content: '해당 아이콘의 유니코드'; 로 작성. 클래스에 따라 content 안의 내용을 바꿔주면 된다! 1. 제이쿼리 $('.btn-mode').click(function(){ $('.profile').toggleClass('dark'); }) 2. javascript const profile = document...

css 2022. 8. 9. 15:08

counter-reset을 통해 체크한 1, 2, 3을 직접 타이핑 하는 것이 아니라, css에서 알아서 번호를 표기하도록 할 수 있다. 전체를 감싸는 태그에 counter-reset: 카운터이름; 각각의 아이템 혹은 before, after 가상클래스에 counter-increment: 카운터이름; 가상 클래스(::before 혹은 ::after)에 content: counter(카운터이름); 중첩 카운터 사용하기 전체를 감싸는 태그에 counter-reset: 카운터이름; 긱각의 아이템 혹은 가상클래스에 counter-increment: 카운터이름; 각각의 가상클래스에 content: counters(카운터이름, ‘.’) ‘ ’;

css 2022. 8. 7. 21:09

1. 아웃라인 텍스트 더보기 1. 텍스트 stroke 만들기 css에서 -webkit-text-stroke 라는 속성을 이용하면 외곽선을 만들 수 있다. text-color를 transparent로 하고, -webkit-text-stroke: 2px #fff로 하면 hover하지 않았을 때의 글자 모양을 만들 수 있음 2. data-text hover시 위 아래로 생겨나는 글자들은 가상 요소인 :before, :after를 사용. 가상 요소를 사용할 때, content 안에 들어갈 내용은 직접 타이핑해도 되지만, Portfolio /* CSS */ a:before { content: attr(data-text); ... } 이렇게 속성을 지정해놓고, 속성값이 입력되도록 할 수도 있다. 참고로 data-t..

css 2022. 8. 5. 04:12

input:checked / 인접 선택자 + / 형제 선택자 ~ 를 사용해서 위와 같은 slidebar를 만들 수 있다. 1. :checked는 가상 선택자로, input 태그와 함께 쓰이며, :checked를 통해 input을 눌렀을 때의 동작을 처리함. 이를 이용해 input이 checked 됐을 땐 slidebar를 노출시키고, checked 해제됐을땐 slidebar를 숨기는 방식으로 slidebar를 만들 수 있음. 1. input태그는 display:none으로 숨길거지만, label을 연결하여 label을 클릭시 input이 checked 되도록 함. 2. label 안에 span 세 개를 넣어 예시이미지와 같은 햄버거 아이콘을 만듦. 클릭시 span 하나는 숨기고 두개의 span을 회전시켜..

css 2022. 7. 28. 23:53

로 쉽게 이동시킬 수 있다. 스크롤을 부드럽게 이동시키는건 scroll-behavior라는 속성으로 쉽게 가능하다. html { scroll-behavior: smooth; }

css 2022. 7. 28. 23:52

1. object-fit object-fit을 이용하면 background-img로 넣지 않고, img 태그로도 배경 이미지로 활용할 수 있다. 부모요소 안에 이미지를 넣고, 부모요소에 witdh, height 지정. img의 사이즈는 inherit로 부모와 동일하게 맞춰준다. 그 후 object-fit: cover로 사이즈를 맞추고, 위치조정이 필요하다면 object-position을 이용하면 됨! 영상을 백그라운드로 사용할 경우에도 마찬가지. * 참고로 영상을 백그라운드로 사용할 땐 혹시라도 재생이 안 될 경우를 대비해서 대신해서 보여줄 포스터 이미지를 등록해야 한다. 2. 이미지최적화 tinypnp라는 사이트에서 이미지 최적화해줌! jpg보다 png가 더 용량 많이 줄어들고, 이미지 손상도 적음. ..

css 2022. 7. 28. 23:52

1. 도형 로딩 애니메이션-01 더보기 똑같은 모양의 span 세 개를 만든 후, 세 개의 span 모두에 동일하게 keyframe을 적용시켜 준다. ( 1단계: opacity 0, transform: scale(0.5) / 2단계 : opacity 1, transform: scale(1.2) / 3단계: 1단계와 동일 ) 그 후, 각각의 span들을 선택해서 0.2씩 차이가 나도록 animation-delay를 걸어주고, 컬러를 다르게 설정해주면 끝! .loading span { display: inline-block; width: 15px; height: 15px; background-color: gray; border-radius: 50%; animation: loading 1s 0s linear ..

css 2022. 7. 27. 00:20