본문 바로가기

분류 전체보기158

[HTML] <a> tag a 태그 태그는 하이퍼링크를 걸어주는 태그다. 속성 href: 클릭시 이동 할 링크 target: 링크를 여는 방법 _self: 링크를 현재 페이지에서 오픈. (기본값) _blank: 링크를 새로운 창 새로운 페이지에서 오픈. _parent: 링크를 현재 프레임의 부모 프레임에서 오픈. _top: 링크를 윈도우페이지에서 오픈. (최상위 페이지) 프레임이름: 직접 프레임이름을 명시하고, 명시한 프레임 이름이 있는 곳에서 오픈. 사용방법 링크 열기 a태그의 href를 사용하고 싶지 않을때, href속성을 사용하지 않고 onClick() 이벤트를 사용하거나, 디자인적으로 사용하기 위함이다. 그럴때 유용히 쓰는 방법이 href= "" 값에 특정 값을 넣어주는 방법이다. 01. # 해시(hash) # 해시(has.. 2022. 11. 25.
[library] Swiper.js 편하게 슬라이드 캐러셀 구현하기 Swiper https://swiperjs.com 유명하고 더 편한 터치 반응형 슬라이더들도 많지만 (slick 등등..) 제이쿼리를 쓰지 않고 바닐라JS만을 가지고 사용이 가능하며, 무료로 사용이 가능하기에 프로젝트에 자주 이용 하고 있는 슬라이더 라이브러리다. React, Svelte, Vue, Angular 에서도 사용이 가능하다. 사용 방법 NPM 으로 설치하기 $ npm install swiper // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/css'; const swiper = new Swiper(...); CDN에서 사용하기 //CSS 파일 추가 //JS 파일 추가 기본적으로 설정해.. 2022. 11. 25.
[정규식] 정규표현식 모음사이트 https://ihateregex.io/ 2022. 11. 25.
[BOX-SHADOW] 그림자효과가 어려울때 https://getcssscan.com/css-box-shadow-examples css로 박스쉐도우 주기 까다롭거나 이쁘게주는 방법을 모르겠을때, 가끔씩 이용하는 사이트이다. .text{ box-shadow: rgba(100,100,111,0.2) 0 7px 29px 0px; } 원하는 효과 스타일의 그림자가 표현된 박스를 클릭하면 값이 복사가 되는데, [ctrl+v] 를 하면 box-shadow 값을 가지고 올 수 있는 것을 볼 수 있다. 2022. 11. 25.
[HTML 디자인 및 마크업] 더미이미지 사이트 https://placeholder.com/ 웹페이지 제작에 사용되는 더미 이미지로 이미지들을 표기 하는게 아닌 box에 규격 및 색상등 간단하게 표기 할 수 있다. 사용 방법은 간단하다. https://via.placeholder.com/ 해당 URL 뒤에 / 사이즈 / 색상코드.(png jpg) / 글씨색상 순서로 입력 해주면 된다. image test 2022. 11. 25.
728x90