디자인과 개발 그 사이

CSS 박스 쉐도우는 요소 주위에 그림자 효과를 추가하는 데 사용되는 속성입니다. box-shadow 속성은 다음과 같은 형식으로 정의됩니다. box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color; 1. horizontal-offset: 그림자의 수평 위치를 지정합니다. 음수 값은 그림자가 요소의 왼쪽에 표시되도록 하고, 양수 값은 오른쪽에 표시되도록 합니다. 2. vertical-offset: 그림자의 수직 위치를 지정합니다. 음수 값은 그림자가 요소의 위쪽에 표시되도록 하고, 양수 값은 아래쪽에 표시되도록 합니다. 3. blur-radius: 그림자의 흐림 반경을 지정합니다. 값이 클수록 흐림이 강해집니다. 0으로 ..

비교하기 animation-fill-mode 속성을 사용하여 none, forwards, backwards, both 네 가지 값으로 애니메이션의 시작 전과 종료 후 요소의 스타일을 설정하는 예시를 보여드리겠습니다. html none forwards backwards both css .box { width: 100px; height: 100px; margin: 20px; background-color: green; animation-duration: 2s; animation-iteration-count: 1; } .none { animation-name: move-none; animation-fill-mode: none; } .forwards { animation-name: move-forwards; a..

비교예시 animation-direction 속성을 사용하여 normal, reverse, alternate, alternate-reverse 네 가지 값으로 애니메이션의 재생 방향을 설정하는 예시를 보여드리겠습니다. html normal reverse alternate alternate-reverse css .box { width: 100px; height: 100px; margin: 20px; background-color: blue; animation-duration: 2s; animation-iteration-count: infinite; animation-fill-mode: forwards; } .normal { animation-name: move-normal; animation-directi..

비교예시 아래의 코드에서는 빨간색 사각형들이 오른쪽으로 200px 이동하는 애니메이션을 사용하여 ease, linear, ease-in, ease-out, ease-in-out 다섯 가지 animation-timing-function 값으로 비교하고 있습니다. html ease linear ease-in ease-out ease-in-out css .box { width: 100px; height: 100px; margin: 20px; background-color: red; animation-duration: 2s; animation-iteration-count: infinite; animation-fill-mode: forwards; } .ease { animation-name: move-ease; ..

CSS 애니메이션은 웹 페이지에서 요소들을 부드럽게 움직이거나 변화시키는 기술을 말합니다. 이를 통해 웹 페이지를 더 흥미롭고 시각적으로 매력적으로 만들 수 있습니다. CSS 애니메이션은 특정 상태와 속성을 정의하고, 애니메이션의 지속 시간과 반복 등을 설정하여 구현합니다. CSS 애니메이션 주요 속성 1. @keyframes: 애니메이션의 키프레임(시작과 끝 지점)을 정의하는 규칙입니다. 키프레임은 애니메이션 동작의 각 단계를 의미합니다. 2. animation-name: @keyframes 규칙의 이름을 지정합니다. 이 이름을 요소의 animation 속성에 할당하여 키프레임 애니메이션을 적용합니다. 3. animation-duration: 애니메이션의 지속 시간을 설정합니다. 초 단위로 지정하며, ..

기존에 라디오버튼이랑 체크박스를 커스텀하는 방법➡️으로 이미지를 스위치 버튼으로 만들어서 사용해도 되지만이번에는 스무스하게 움직이는 방법을 기록할려고 합니다. html css .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; ..

🤚일단기본 스타일에 체크될때의 색상만 변경하는 방법이 있습니다. (기본값은 blue 입니다.)아예 커스텀 제작으로만 사용해서 저도 얼마전에 알았습니다. cssinput { accent-color: #000;} See the Pen Untitled by 김보라 (@etbeatbh-the-bashful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스  1. 체크박스 스타일 변경 (이미지사용)- 이미지 준비 (기본,체크된,기본비활성화,체크된비활성화) html 체크박스 ..

display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열되지요. 이 때 요소와 요소 사이에 여백이 생깁니다. 이를 해결하는 방법을 기록하겠습니다. 공백이 생기는 이유: HTML에서는 줄 바꿈(개행)은 공백으로 해석되어, 인라인 요소들 사이에 줄 바꿈이 존재하면 공백으로 처리됩니다. HTML 작성에 줄 바꿈이 있다면 이 줄 바꿈은 공백으로 취급되어 렌더링 시에 간격이 생깁니다. html 줄 바꿈(개행)은 공백으로 해석 새우깡 감자깡 먹태깡 html 줄 바꿈(개행)없이 한줄로 나열 새우깡감자깡먹태깡 하지만 줄바꿈없이 작업하면 가독성이 떨어지고 작성하다 보면 나도 모르게 줄바꿈을 할 수 있잖아요? 그렇기 때문에 이를 보안할 방법을 찾아봤습니다. 방법1: margin 이..