웹개발 3

5분만에 배우는 크롬 개발자 도구로 웹사이트 SEO 최적화하는 방법

안녕하세요 무택입니다 :) 오늘은 5분만 투자하여 크롬 개발자 도구를 활용하여 웹사이트의 SEO를 최적화하는 방법을 배워보겠습니다. SEO(Search Engine Optimization)는 웹사이트가 검색 엔진 결과 페이지에서 높은 순위를 차지할 수 있도록 최적화하는 프로세스를 의미합니다. 이를 위해 크롬 개발자 도구는 매우 유용한 도구 중 하나입니다. 크롬 개발자 도구 소개 크롬 개발자 도구는 Chrome 브라우저의 내장 개발자 도구로, 웹 개발 및 디버깅을 위한 강력한 기능을 제공합니다. 이를 통해 웹사이트의 성능을 분석하고 문제를 해결할 수 있으며, SEO 최적화에도 도움이 됩니다. SEO최적화 방법 웹사이트 로딩 속도 최적화 먼저, 웹사이트의 로딩 속도를 최적화해야 합니다. 빠른 로딩 속도는 검..

✏️티스토리 2024.03.05

[라이브러리]Slick-slider의 dot을 커스텀할 수 있는 방법

안녕하세요 무택입니다 :) 오늘은 Slick-slider라이브러리의 dot을 커스텀할 수 있는 방법에 대해 써보려고 합니다. 이 라이브러리는 웹개발에 있어서 쓸 일이 정말 많은데 커스텀하지 않은 버전의 슬라이드도 정말 좋지만 상황에 따라 커스텀해야 할 경우도 생기더라고요. 그럴 때를 위해 써보려고 합니다. Slick-slider의 dot을 커스텀할 수 있는 방법 HTML/CSS slick 01 slick 02 slick 03 JS $('.slick_slider_div').slick({ autoplaySpeed: 2500, dots: true, slidesToShow: 1, customPaging: function (slider, i) { var thumb = $(slider.$slides[i]).data..

[html/css]var변수 활용 디자인 가이드 작성

아래 방법을 사용하면 간편하게 디자인 가이드를 수정할 수 있습니다. 처음 퍼블리싱을 접하시는 분들은 각각의 텍스트, 라인 등에 똑같은 스타일을 다 각각 스타일을 지정하는 작업을 할 수 있지만 아래처럼 변수로 스타일을 만들어놓으면 같은 형식의 디자인같은 경우 한 번에 색상 및 폰트 크기 등을 간편하게 변경하고 적용할 수 있습니다. 1.HTML 첫 번째 타이틀 첫 번째 서브 타이틀 예시용 텍스트 문단입니다. 두 번째 타이틀 두 번째 서브 타이틀 예시용 텍스트 문단입니다. 세 번째 타이틀 세 번째 서브 타이틀 예시용 텍스트 문단입니다. 2.CSS *{ pdding: 0; margin: 0; } /* 전체 설정 가이드화 */ :root{ --color-black: #131313; --color-gray: #55..