최근글
-
Information
[정보]앞으로 도움이 많이 될 사이트 목록 (2024-12-08)
https://react-svgr.com/playground/ ← SVGR (일반 SVG파일의 코드를 React 혹은 React Native용 코드로 변환해주는 사이트) https://pixabay.com/ko/← 픽사베이 (이미지 관련 저작권에 대해 정확하게 알지 못해 무료 혹은 부분 무료라는 내용을 삭제했습니다.) https://www.freepik.com← 프리픽 (이미지 관련 저작권에 대해 정확하게 알지 못해 무료 혹은 부분 무료라는 내용을 삭제했습니다.) https://www.flickr.com/← 플리커 (이미지 관련 저작권에 대해 정확하게 알지 못해 무료 혹은 부분 무료라는 내용을 삭제했습니다.) http://www.webjangi.com/ ← 웹쟁이 (무료 웹 소스 저정소) http:/..
더보기
-
CSS
[CSS] list-style 바꾸기
- list-style? 웹 퍼블리싱을 하다 보면 리스트 부분을 작성할 때 ul, ol, dl과 같은 엘리먼트를 사용하게 됩니다. 이때 각각의 태그들이 기본적으로 보여주는 list-style을 보면 다음과 같습니다. 하지만 기본 list-style들은 원형의 도트 스타일만 지원해 주고 색상 또한 li의 색상을 이어받아 사용하기 때문에 커스텀이 필요한 상황이 많이 발생합니다. - 가상요소를 통한 스타일 제가 가장 자주 쓰던 방법이면서 list-style을 다양한 크기와 모양으로 만들 수 있는 방법입니다. 먼저 변경이 필요한 해당 list-style을 none으로 지정해준 후 li 엘리먼트의 position 속성을 relative로 변경합니다. 그 후 해당 엘리먼트에 가상요소인 ::before 나 ::aft..
더보기
-
Information
[정보] 브라우저별 호환성 체크 사이트 caniuse
웹페이지 제작 중 각 브라우저별 호환성 체크가 필요할 때 사용하면 좋은 사이트입니다. 사이트 사용법은 매우 간단합니다. 해당 사이트에 들어가면 위의 사진처럼 나오는데 css속성 값을 입력하시면 (분명 다른 것도 가능할 텐데 정확한 사용법은 모르겠습니다... ㅠ) 아래의 사진처럼 각 브라우저별 버전별 호환성 여부가 표시됩니다. caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com
더보기
-
JavaScript
[JavaScript]슬릭 슬라이더 !!!!!
슬라이더 플러그인중 개인적으로는 사용하기 가장 쉬운 슬라이드인 '슬릭슬라이더' 사용법을 간단하게 소개하려합니다. (슬릭슬라이더는 라이센스 비용이 있는걸로 기억합니다... 개인 포트폴리오용으로 사용하시면 좋을듯 하네요) 1 2 3 4 5 6 7 cs 위에부분을 HTML에 복사 -> 붙여넣기! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 8 9 10 Colored by Color Scripter cs HTML부분에 추가 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 $(function(){ $('#..
더보기
