디자인과 개발 그 사이

비교예시 아래의 코드에서는 빨간색 사각형들이 오른쪽으로 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.btn { padding: 10px 20px; border: none; background-color: #f2f2f2; cursor: pointer;}.btn.act { background-color: #ff9800; color: white;}javascriptfunction toggleAct(button) { button.classList.toggle("act");}  결과 🌈클릭해보세요 :) 찜하기 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   See the Pen onclick, classList, toggle 찜버튼 만들기 b..

(자바스크립트를 시작할때 선택자를 많이 쓰는데요, 저는 요즘 제이쿼리를 많이 써서 비교해 보고자 기록 해봅니다.) 자바스크립트와 제이쿼리(jQuery)는 모두 웹 개발에서 DOM(Document Object Model) 요소를 선택하기 위해 사용하는 선택자를 지원합니다. 기본적으로 제이쿼리는 자바스크립트의 기능을 확장하여 사용하기 쉽고 간결하게 작성할 수 있도록 도와주는 라이브러리입니다. 따라서 대부분의 제이쿼리 선택자는 기본 자바스크립트의 선택자와 비슷하거나 동일합니다. 하지만 제이쿼리는 선택자를 더 간단하게 사용할 수 있는 몇 가지 추가적인 기능을 제공합니다. 다음은 자바스크립트와 제이쿼리의 선택자를 비교하는 예시입니다. 1. 요소 선택자 (Element Selector) 자바스크립트: documen..

🤚일단 웹디자인기능사 자격증은 웹페이지 제작에 관한 자격증으로 산업통상자원부가 주무부처로 관장하고 한국산업인력공단에서 주관하는 그래픽 관련 기술 시험입니다. 2025년에는 "웹디자인개발기능사"로 명칭이 변경될 예정입니다. 이 자격증은 웹페이지 제작에 필요한 기술과 능력을 검증하는 시험으로, 비전공자로서 이력서에 포함시킬 수 있는 유용한 자격증이라 생각합니다. 웹퍼블리셔로서의 실력을 증명하고 향후 취업이나 경력 발전에 도움이 될 수 있다는 생각으로 준비했습니다. 이시험은 필기를 합격한 후 실기를 볼수있습니다. ✍️필기 시험과목은 1.디자인일반 2.인터넷일반 3. 웹그래픽디자인 시험방식은 객관식 4지 택일형 60문항 (60분) 과락없이 60점 이상이면 합격입니다. / 60문제중 36문제 이상만 맞으면 합격~..

기존에 라디오버튼이랑 체크박스를 커스텀하는 방법➡️으로 이미지를 스위치 버튼으로 만들어서 사용해도 되지만이번에는 스무스하게 움직이는 방법을 기록할려고 합니다. 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 이..