Front-End (8) 썸네일형 리스트형 [css] on/off 토글 스위치 간단히 만들기 1. HTML 2. CSS/* on/off토글 */label { display: block; position: relative; width: 100px; height: 45px; background: #d3d3d3; border-radius: 60px; transition: background 0.4s; } label::after { content: ""; position: absolute; left: 2.5px; top: 50%; width: 40px; height: 40px; border-radius: 100%; background-color: #fff; transform: translateY(-50%); .. [jquery] html 동적으로 삽입하기 - load() load() 메서드를 사용해서 버튼을 클릭하면 외부 페이지(header.html)를 로드$(선택자).load(URL, [데이터], [콜백 함수]);사용방법ㅇ 선택자 : 로드한 컨텐츠를 삽입할 요소를 선택합니다.ㅇ URL : 로드할 리소스(외부 페이지 또는 파일)의 URL을 지정합니다.ㅇ 데이터 (선택 사항) : 서버로 전송할 데이터를 지정합니다. 주로 POST 요청에 사용됩니다.ㅇ 콜백 함수 (선택 사항) : 로드가 완료된 후 실행할 함수를 정의합니다. 이 함수는 로드가 성공하거나 실패했을 때 호출됩니다. 특징ㅇ 비동기적 로드 : load() 메서드는 비동기 방식으로 동작하며, 페이지의 리로드 없이 외부 리소스를 로드합니다.ㅇ 로드된 컨텐츠 삽입 : 로드한 컨텐츠는 선택한 요소 내에 자동으로 삽입됩니다... [CSS] 글씨 강조 효과 형광펜 효과 background-color: yellow; 2. text-shadow: 0px 0px 20px yellow; 첫 번째 값: 그림자의 가로 위치를 지정(X offset) 두 번째 값: 그림자의 세로 위치를 지정(Y offset) 세 번째 값: 그림자의 흐림 정도를 지정(Blur) : 값이 클수록 더 흐릿한 그림자가 생성. 네 번째 값: 그림자의 색상 3. box-shadow: 0 0 10px yellow; - Type : Outset(box 외곽) / Inset(box 내부) 첫 번째 값: 그림자의 가로 위치를 지정(X offset) 두 번째 값: 그림자의 세로 위치를 지정(Y offset) 세 번째 값: 그림자의 흐림 정도를 지정(Blur) : 값이 클수록 더 흐릿한 그림자가 생성. 네 .. 티스토리 구독 이미지 넣기 티스토리에도 구독하는 기능이 있다는 걸 알고 계셨나요? 구독하면 피드에 구독자들이 올린 글이 게시됩니다! 그럼 티스토리 구독기능 활성화 방법과 구독이미지 설정하는 방법 알아봅시다 :) 목차 1. 구독 기능 활성화 2. 구독 이미지 생성 3. 블로그 주소, 블로그 ID, 원하는 이미지 주소 구하기 4. 코드 입력 5. 서식으로 등록 6. 글에서 사용하기 구독 기능 활성화 1. 티스토리 관리자 페이지로 들어갑니다. https://블로그이름.tistory.com/manage 2. 관리자 사이드 메뉴에서 꾸미기 >> 메뉴바 / 구독 설정 들어가기 3. 메뉴바 설정과 구독 버튼 설정을 '표시합니다.'로 바꿔주기 원하는 위치로 설정 하고 미리보기 기능으로 확인하기! 구독 이미지 생성 1. 원하는 구독 이미지를 생성.. 티스토리 TOP버튼 만들기 TOP 버튼 만들기 긴 글을 읽다 보면 다시 위로 올라가야하는 일이 종종 생기는데 스크롤을 왔다갔다 하는게 불편하여 TOP버튼을 만들어 보기로 했다. 많은 글들을 봤는데 저는 여기 블로그를 참고했습니다. "https://galam.tistory.com/ " Living-T blog 착한휴대폰 리빙통신입니다. 고객의 입장에서 최적의 조건으로 상담하고 판매 하겠습니다. galam.tistory.com 버튼 이미지 다운로드 두 개의 이미지를 사용해서 마우스 오버 시 이미지가 변경되도록 했다. 아래 제가 만든 이미지를 첨부했으니 자유롭게 사용하세요 :) 다른 이미지를 사용하고 싶으면 이미지 두 개 만들고 아래 자바스크립트에 Top1과 Top2를 수정해 주세요! 다운 받았으면 압축 풀어주고 두 파일을 등록해야 합.. [JavaScript]탱크 언어 시뮬레이션 만들기 기본적인 JavaScript를 이용해서 자동차가 전진, 좌회전, 우회전하는 코드를 짰다. 탱크 언어 코드를 이용해서 자동차의 움직임을 표현해보았다. 움직임이 잘 보이게 하기 위해서 뒤에 격자 무늬를 넣었다. 1. 전진, 좌회전, 우회전 로직 만들기(javascript) 2. 탱크 언어 코드 입력 ( code = "11 11 11 01 11 11 01 11 10 11") 3. 격자 무늬 배경 넣기 (css) 4. 실행 1. 전진, 좌회전, 우회전 로직 만들기 2. 탱크 언어 코드 입력 ( code = "11 11 11 01 11 11 01 11 10 11") ; → → → ↑ (좌회전) ↑ ↑ ←(좌회전) ← ↑(우회전) ↑ 3. 격자 무늬 배경 넣기 (css) 실행 4. 실행 [JavaScript]키보드로 움직이는 자동차 만들기 기본적인 HTML, CSS, JavaScript로 자동차를 움직이게 만들고 싶어져 만들어 봤다. 물론, GPT의 도움을 받아서 만들어 보았다. 간단하게 JS로 만들 수 있다.🪄 ※ 일반적으로 웹 페이지의 좌표 시스템에서 Y 축은 아래로 갈수록 증가하는 값이라 위로 가려면 tank.y -= 50;을 해줘야 한다. 결과 [HTML] input pattern사용하기(정규표현식) 웹만들기의 기초가 되는 로그인, 회원가입에 기본적으로 사용되는 input input에 넣을 수 있는 다양한 속성중에 pattern을 이용하여 사용자가 입력할 수 있는 값을 제어할 수가 있다. 이걸 유효성 검사라고 보통 칭하며 입력한 값이 유효한 값인지 체크하는 것이다. pattern을 제어할 때 정규표현식을 사용하며 정규표현식에 대해 알아보자. [ 정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '추출', '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단 ] 1. 콤마( . ) : 어떤 문자 1개를 가리킨다. (줄바꿈문자(\n) 제외) 2. 대괄호[ ] : [ ] 안에 있는 문자 중 하나를 가리킨다. [ab.. 이전 1 다음
