hchan-frm 님의 블로그

SwiperSwiper는 모바일 및 데스크톱 환경에서 반응형 슬라이드쇼와 스와이퍼 기능을 쉽게 구현할 수 있게 해주는 오픈소스 라이브러리이다.Swiper는 터치 및 마우스 이벤트, 다양한 애니메이션 효과, 무한 루프, 자동 재생, 페이지네이션, 네비게이션 등 다양한 옵션을 제공하며, 접근성 기능도 내장되어 있다. Swiper를 사용할려면 CDN을 사용하거나 NPM으로 설치해야 한다.Swiper의 CDN 주소 사용법은 다음과 같다. Swiper 사용const mySwiper = new Swiper('.swiper', { // 옵션});Swiper 객체를 만드려면 첫 번째 인자에 선택자를 이용해서 element를 선택해야 한다. 두 번째 인자로 옵션을 지정해주어야 하는데, 옵션의 종류는 다음과 같다. (a..

css에 편리성을 더해주는 scss에 대해 알게 되었다.이번 글에서는 scss에 대해 공부한 내용을 적을 것이다.scss를 설명하기에 앞서 sass에 대해 알아야 한다. SassSass(Syntactically Awesome Style Sheets)는 직역하면 '문법적으로 멋진 스타일 시트'로 기존의 CSS보다 더 강력하고 멋진 문법 구조를 가진 스타일 시트이다.따라서 Sass는 CSS의 불편한 점들을 해결하고 변수, 중첩, 믹스인, 함수 등 다양한 기능들을 제공하는 스타일 시트이다. 전처리기 언어인 sass는 두 가지 문법(파일 형식)을 지원한다.sass와 scss이다.sass는 들여 쓰기 기반으로 중괄호나 세미콜론 없이 작성하며, 확장자는 .sass이다.scss는 sass 3 버전에서 새롭게 도입된 ..

jQuery란jQuery(제이쿼리)는 오픈소스 자바스크립트 라이브러리 중 하나이다.이 라이브러리는 HTML 문서의 요소를 쉽고 직관적으로 선택하고 조작할 수 있게 해준다. 간편한 요소 선택 및 조작: CSS 선택자와 유사한 문법으로 HTML 요소를 쉽게 선택하고, 속성, 스타일, 내용 등을 변경할 수 있다.이벤트 처리: 클릭, 마우스 오버 등 다양한 사용자 이벤트를 간단하게 처리할 수 있다.애니메이션 및 효과: 요소의 숨김/보이기, 페이드 인/아웃 등 다양한 애니메이션 효과를 쉽게 적용할 수 있다AJAX 통신: 서버와 비동기적으로 데이터를 주고받을 수 있어, 페이지 전체를 새로고침하지 않고도 웹 페이지의 일부를 동적으로 변경할 수 있다.폼 조작: 폼의 데이터 유효성 검사, 데이터 전송 등 폼 관련 작업을..

Web 공부 중 Attribute와 Property가 헷갈려서 조사해보았다. AttributeAttribute(속성)는 HTML에서 정의된 속성이다.요소의 추가적인 정보들을 적을 때 사용한다. 위의 id, class와 같이 태그명과 함께 적는 내용들이 Attribute이다.이 외에도 type, value 등 다양한 Attribute들이 있다. PropertyProperty는 영어사전을 찾아보면 재산이라는 뜻이 있지만 더 자세히 들어가 영영사전의 설명을 보면 '누군가가 소유한 것'이라는 뜻이다.css는 javascript에서 객체 속성을 저장할 때와 유사하게 스타일을 구성한다. ('key: vlaue' 형태)// JavaScript의 객체let car = { color: "red", // 객체 속성 ..

선택자(Selector)는 CSS 규칙을 적용할 요소를 선택한다.웹에서 HTML을 구성하고, 구성한 요소들을 꾸미는 과정에서 CSS를 이용하게 되는데, 이때 특정 요소(태그)를 특정지어서 속성을 바꾸기 위해 선택자를 사용한다. Selector의 종류는 5가지이다.Simple SelectorCombinator SelectorPseudo-class SelectorPseudo-element SelectorAttribute Selector Simple SelectorSimple Selector는 이름, id, class룰 기반으로 요소를 선택한다. - Element 이름 기반HTML에는 div, p 등과 같은 태그들이 있다.이러한 태그의 이름을 기반으로 요소를 선택할 수 있다.p { text-align: ce..