swiper demo : https://swiperjs.com/demos Swiper DemosSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.comswiper 활용하기 두번째swiper를 이용해서 여러 종류의 슬라이드를 만들고네비게이션 버튼과 페이지네이션 버튼으로 제어를 했고자동으로 넘어가는 기능을 연습했고2025.05.18 - [Swiper] - swiper? 슬라이드 라이브러리 첫걸음 화면에 보이는 슬라이드 갯수 ( Slides per view ),cssMode,슬라이드 간격 ( Space between ),무한 슬라이드 (..

swiper를 이용해서 움직이는 슬라이드를 만드는게 가능해졌다.버튼을 만들어 클릭 기능을 만들고, 자동으로 넘어가는 기능, 다양한 이펙트 종류도 알게 되었다. 이번엔 새로운 기능과 함께화면에 보여지는 디자인에 관련된 속성을 공부해보려고 한다. 주로 화면에 하나의 슬라이드만 보이는 디자인이 많이 보이지만,여러 상품 리스트 같이 화면에 2개 이상의 요소를 보여줘야 할 때가 있다. 화면에 보여지는 슬라이드 갯수를 조절하는 속성 "slides per view" 이다 1. 화면에 보이는 슬라이드 갯수 조절 Slides per view의 core에 들어가코드를 가져온다. 속성값에 숫자를 입력하게 되면한 화면에 보이는 슬라이드 갯수를 조절 할 수 있다.기본은 1이고, 만약 swiper에서가 아닌 css 에서 크기 조..

웹을 만들다 보면 슬라이드는 거의 필수적으로 사용하는거 같다.많은 이미지나 정보를 사용자에게 보여주고 싶은데반복된 이동은 사용자에게 피로함을 줄 수 있기 때문에한 페이지에서 볼 수 있는 슬라이드가 효율적이고, 인터랙티브 효과로 보는 재미도 있다. 하지만... 슬라이드를 직접 코딩하기란 쉽지 않는 일이다.가로, 세로 슬라이드, 페이드 슬라이드 다양한 슬라이드를 만들 줄 알려면html 구조, css, script도 알맞게 사용할 줄 알아야 한다. jQuery를 사용한다면 순수 javaScript로 작업하는 것 보다는 쉽겠지만!라이브러리 swiper 를 활용한다면 더 빠르고 편하게 작업 할 수 있다!! javaScript, React, Vue, WebComponents 에서 사용할 수 있고 npm, cdn ..

시멘틱 태그는 HTML5에서 도입된 태그들로, 문서의 구조를 더 명확하게 표시하기 위해 사용한다. 단순히 스타일을 적용하기 위한 것이 아니라, 문서의 의미와 구조를 더 잘 전달해 가독성을 높여 웹 페이지의 구성을 보기 쉽게 해준다 ▼div ▷상단 --> ▷움직이는 이미지 ▷본문 ▷하단 --> ▼내비게이션 링크 ▼주제별로 구분 ▼내용넣기 ▼이미지 ▼이미지 설명 ▼중요내용 ㄴ 일부 브라우저에서 호환이되지 않아 사용안함

▼svg ▷좌표점을 이용해 모양 만들기 -일러스트로 도형을 만든 후 svg로 저장 클릭 - svg code 얻기 - 필요한 정보 빼고 지우기 (viewBox) ㄴex) 붙여넣기 ▽ ㄴex) .tree{width:400px;} .tree .st0{fill:none;stroke:#231F20;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:900; stroke-dashoffset:900; animation:tree 5s infinite;} @keyframes tree{ 0%{} 100%{stroke-dashoffset:0;} }

-pc, 태블릿, tv, 모바일.. 기기 사이즈에 맞춰 홈페이지 레이아웃이 반응하도록 제작 (css를 media쿼리에 맞게 설정) ▼기기에 맞춰 css설정 ▷@media (화면의 크기에 해당하는 조건문){ css입력 } >(min-width: --px) = (최소 넓이: --px) ㄴex) @media (min-width: 801px){ } = 넓이 801px '이상'일 때 적용 >(max-width: --px) = (최대 넓이: --px) ㄴex) @media (max-width: 800px){ } =넓이 800px '이하'일 때 적용 ㅇ ';' 입력 하지 않음 ㅇmin, max 크기가 겹치지 않게 설정 ▼이미지, 비디오 비율 유지 ▷img{object-fit:cover;} -높이값을 주고 비율을 유지..