웹/HTML-CSS-자바스크립트9 css, js 파일 HTML에 적용하기 (상세설명 + css 사용법 간략 설명) 1. 파일 구조 2. css와 js파일 html파일에 추가하기 3. css 파일 + 스타일 설명 4. js 파일 + 이벤트 추가 5. 완성시 화면 1. 파일 구조 2. css와 js파일 html파일에 추가하기 - css 파일 추가하기 1) 즉 헤드태그 사이에 아래 link태그를 삽입해 줍니다. 2) href에는 css파일이 있는 경로를 넣어주면 됩니다. - js 파일 추가하기 1) 하단 즉, body태그 사이의 제일 하단에 아래 - 작성된 예시 코드 보기 파일 경로 : ./index.html 1 2 3 3. css 파일 + 스타일 설명 파일 경로 : ./style.css #container{ /* id 가 container인 태그 스타일 설정*/ width: 500px; /*너비:500px*/ heigh.. 2023. 3. 12. CSS로 카드뒤집기 효과 만들기 - (사파리/크롬에서 사용할 수 있게 만들기) CSS로 카드뒤집기 효과 만들기 - (사파리/크롬에서 사용할 수 있게 만들기) 포스팅 1. 결과 영상 2. 코드 index.html 앞입니다. 뒤입니다. index.css .container{ width: 200px; height: 300px; margin: auto; position: relative; cursor: pointer; perspective: 100rem; } .card{ /*webkit을 사용해야지 사파리에서도 정상적으로 동작함*/ width: 200px; height: 300px; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -webkit-perspective: 0; -webkit-transiti.. 2021. 9. 27. (JavaScript) 자바스크립트 브라우저에 데이터 저장하기 - localStorage 사용법 및 예제 localStorage 사용법 및 예제 * 본 포스팅은 여러 참고 자료와 강의 수강 후 개인적인 복습을 위해 정리하였습니다. 참고 링크: 1. localStorage란? 2. localStorage 영문 자료 참고 강의: 1. 노마드코더: 초보자를 위한 바닐라자바스크립트 강의 포스팅 요약 1. localStorage로 만든 예제 결과 2. localStorage란? 3. localStorage사용법 4. 브라우저에서 localStorage 데이터 보는법 5. localStorage 예제 코드 1. localStorage로 만든 예제 결과 1) input 태그에 닉네임 입력 2) 새로고침 혹은 페이지를 나갔다가 들어와도 아래 이미지와 같이 데이터가 남아있음. 3) Remove 버튼 클릭시, 데이터가 삭제.. 2021. 8. 31. scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기 scss에서 미디어 쿼리 다루기 scss 에서 미디어 쿼리는 아래와 같이 사용합니다. @media (max-width: 767px){ /* 브라우저 사이즈 767px 이하일때*/ } @media (min-width: 768px) and (max-width: 1023px){ /* 브라우저 사이즈 768px이상, 1023px이하 일때,*/ } 하지만 코드가 길 경우 위와 같이 사용하면, 코드가 더 길어지고, 보기에 깔끔하지 않습니다. 그래서 아래와 같이 mixin을 사용하여 코드를 정리해봅시다. /*반응형 mixin으로 깔끔하게 사용하기*/ @mixin mobile{ @media (max-width: 767px){ @content; } } @mixin tablet{ @media (min-width: 768p.. 2021. 8. 15. [2021.08]자바스크립트에 미디어쿼리 사용하기+자동 새로고침 자바스크립트에 미디어쿼리 사용하기 css에 사용하는 방법과 비슷합니다. 그런데!!! 자바스크립트에서는 브라우저 사이즈 변경시 새로고침을 안해주면 적용이 안됩니다. ㅠㅠ... 그래서 브라우저 크기를 변경할 때 마다 자동으로 새로고침 해주는 스크립트까지 짜주시는게 좋습니다. 아래는 자바스크립트로 미디어쿼리문을 작성한 코드입니다. if(matchMedia("screen and (max-width: 767px)").matches){ //화면 크기가 767px이하일때 console.log("mobile"); }else if(matchMedia("screen and (max-width: 1023px)").matches){ //화면 크기가 1023px이하일때 console.log("tablet"); }else if.. 2021. 8. 9. (웹) 자바스크립트로 무한 슬라이드 만들기 (매우간단/ 상세 설명) 무한 슬라이드 만들기 포스팅 요약 1. 결과 영상 2. 코드 3. 동작 원리 4. 깃허브 코드 5. 참고 링크 (일반 슬라이드, 3d슬라이드) 결과영상 * 안되시는 분들은 댓글에서 물어보셔도 됩니다 :) * 댓글에 남긴 메일로 압축파일 보내신 후 물어보셔도 됩니다 :) 코드 main.html 〈 〉 JS/slideShow.js let slides = document.querySelector('.slides'); let slideImg = document.querySelectorAll('.slides li'); currentIdx = 0; slideCount = slideImg.length; prev = document.querySelector('.prev'); //이전 버튼 next = document... 2021. 8. 4. 이전 1 2 다음
