본문 바로가기

웹49

(웹) 밑줄치기 효과/ hover시 밑줄 쳐지는 효과 구현하기(매우 간단) 밑줄 효과 주기 오늘은 마우스를 가져다 댔을때 밑줄이 스르륵 생기는 효과를 구현해 보겠습니다. position에 대한 이해도만 있다면, 혹은 슬라이드 구현을 해본적이 있다면, 이해하기 매우 쉬울거에요 :) 포스팅 요약 1. 결과 2. 코드 3. 동작 원리 4. 깃허브 코드 다운 [Result] [Code] HTML 원하는 곳에 밑줄 효과 넣기 밑줄 효과를 어디에 넣을까? 여기에 넣읍시다. 두 번째 밑줄효과는 어디에 넣을까? 요기에 넣읍시다. 세번째 밑줄효과는? 이쪽에 넣을 겁니다. 제 블로그 코드짜는 문과녀 많이 사랑해주세요. 도움이 됐다면 하트를 꾹 눌러주세요~ CSS #menual{ width: 100%; height:650px; padding-left: 400px; margin-top: 50px; .. 2021. 7. 30.
VS Code에서 html, css, 자바스크립트 정렬 단축키/ 단축키 확장프로그램 사용법 VS Code 정렬 단축키/정렬 확장프로그램 1. VSCode 마켓플레이스 들어가기 왼쪽 카테고리에서 빨간박스로 표시한 모양을 클릭하세요! 2. Beauty검색하고 설치하기 3. VS Code껐다 킨 후, 정렬할 파일 열어서 단축키 눌러 정렬하기. Mac Os는, command+Shift+B 를 누르면 되고, Window는, control+Shift+B를 누르면 됩니다. 참고로 HTML, CSS, JS는 정렬이 되는데 SCSS는 정렬이 안됩니다. Beauty말고도 다른 정렬 확장 프로그램이 많습니다. 더 편하고, 자기한테 맞는 프로그램을 찾아서 위와 같이 다운로드후 사용하시면 됩니다. 저는 Beauty가 편하더라구요 :) 도움이 되셨다면, 아래 하트꾹 눌러주세요!! 2021. 7. 23.
(웹) 회전형 슬라이드/3D 슬라이드 만들기: swiper 사용법 (상세설명) 회전형 슬라이드 만들기 포스팅 요약 1. 최종 완성 작품 2. swiper 사용해서 3D 슬라이드 만드는법 3. 3D슬라이드 만든 전체 코드 4. 3D슬라이드 코드 다운받을 수 있는 깃허브 주소 더보기 API를 사용해서 회전형(?) 슬라이드를 만드는 법을 알려드리려고 합니다. 아마 포스팅을 다 보고 나시면, API를 사용해서 회전형 슬라이드 뿐만이 아니라 여러가지 재미있는 효과를 정말 간단하게 구현할 수 있습니다. 1. swiper사이트 접속 1. 아래 링크를 클릭하여 접속합니다. https://swiperjs.com Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hard.. 2021. 7. 19.
(웹)자바스크립트로 슬라이드 만들기(초간단) 자바스크립트로 자연스러운 슬라이드 만들기 준비물 1. 300*300px 이미지 6장 (아래 파일에 첨부함, 연습하실때 필요하신분들 쓰세요~) 2. visual studio or 다른 개발자 도구 결과물 * 잘 안되시는 분들을 위해 자바스크립트 주석을 달아놓았어요! * 주의할 점은, CSS 파일 경로와 JavaScript 파일 경로, html에서 연결하실때 주의해주세요 * 잘 안되시는 분들은 댓글에 질문 주시면 됩니다!! 제가 아는 한에서 다 알려드릴게요 :) HTML코드 index.html ⟨ ⟩ CSS코드 CSS/style.css /* 초기화 */ *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style-type: none; } /* 보여줄.. 2021. 5. 29.
(웹)DOM 테이블 추가,삭제/사용자가 원하는 만큼 테이블 추가 삭제 예제(결과화면 有) DOM을 사용한 테이블 만들기 결과화면을 보신다음, 혼자서 코드를 작성한 후, 제 코드를 보시는걸 권장 드립니다. * 결과 화면 1. 버튼안의 value는 초기화로 바뀜 2. 행과 열의 value에 따라 테이블 생성 1. 버튼안의 value는 작성으로 바뀜 2. 행과 열의 value는 1로 바뀜 3. 테이블 삭제 * 코드 및 설명 행 열 2021. 5. 11.
(웹)자바스크립트 - 실시간 시계 (초간단) 현재 시각 *결과 화면 2021. 5. 8.

티스토리툴바