본문 바로가기
728x90
반응형

분류 전체보기305

비주얼 스튜디오 코드 80_ 마우스 오버 효과_제이쿼리 html mark up reset css 지정 client: 브라우저 기준으로 잡아주는 마우스 offset: 마우스가 특정 구역에 들어가면 마우스 형태가 바뀜 page:전체 페이지 잡아줄 때 사용 screen:모니터가 기준(0,0) .info css edit ● max-width: 70vw 가장 큰 사이즈 화면에서 70vw를 사용하겠다. cursor 만들기 /* 기준점이 따로 없다 */ .cursor{ position: absolute; top: 100px; left: 100px; width: 50px; height: 50px; border: 3px solid #fff; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; /* 가장 위에 오도.. 2023. 7. 18.
비주얼 스튜디오 코드 79_뮤직 플레이어 3 section이 회전을 해야한다. section에 시간을 줘야 움직이는게 보임 넥스트 버튼을 눌렀을 때 오른쪽에 있는 씨디가 2번, 왼쪽 씨디가 8번째이다. 기준점에서 10vw만큼 떨어져있음 script 제이쿼리는 css, 자바스크립트 style n = 0 변수 지정해준다. n++는 오른쪽 으로 회전 , n--는 왼쪽회전 rotate {n * deg = 0 * 45} deg 45도씩 증감하여 회전한다. 버튼을 누르면 section이 회전한다. 함수지정 on을 갖고 있는 액티브 값을 0으로 변수 지정 0-7번까지 인덱스 번호가 돌아갈 것이다. 회전하면서 8개의 on을 제거할 것이다. index에 들어가있는 번호(선택되어있는 번호)만 on을 넣어줄 것이다. length-1을 넣어 0부터 시작하도록한다. ●함.. 2023. 7. 18.
[JAVASCRIPT]if 조건 조건문1 if 조건 { 참 } else{ 거짓 } 값 출력 > document.write() 1000은 어떤 타입인지 보기 1000은 문자이다. promt("당신의~")에서 출력값을 ""로 넣었기 때문에 let mount = prompt("당신의 하루 걷는 양은 몇보인가요?",""); 1000을 숫자로 변경하기 let Nmount = Number(mount); 문자, 숫자를 구분해서 조건을 제대로 넣어주어야한다. 문자는 문자와, 숫자는 숫자와 비교해야한다. if문 작성 조건문 2 0값일 경우에만 거짓이다. 0은 거짓이고 1은 참이다 그 외에는 다 참임 두 가지 방법이 있다. document.write(userName+"님을 만나서 반갑습니다.") document.write(`${userName}님을 만나.. 2023. 7. 18.
비주얼 스튜디오 코드 78_ 뮤직플레이어 2 .play css edit CD 돌아가는 효과넣기 .pic after 가상요소에 애니메이션을 준다. script 기존에 만들었던 el list에 스크립트를 추가한다. play라고 변수 지정 ● target: 선택된 객체, target은 오류가 있을 수 있다. ● currentTarget: 오류를 줄이기 위해서 추가된 태그. 이벤트를 갖고있는 아이가 선택되면 이벤트가 실행 간혹 선택되는 아이는 다른아인데 실행되는 아이가 다를 수 있다. 그러한 오류를 방지하기 위해 currentTarget을 사용 ●tagName: 태그 네임을 가지고 와라 ● closest : 상위 부모를 찾음 ●classList: =addclass 플레이 버튼을 누르면 시디가 돌아간다. 그림자도 같이 돌리기 pause 누를 시에 CD 멈추.. 2023. 7. 17.
[JAVACRIPT]document.write / Data Type doucument.write 로 연산자를 구할 수 있다. document.write : 윈도우에 직접 출력됨 숫자를 입력하면 30이 화면에 출력됨 console.log 확인용 confirm 컨펌용 변수 세개를 만듦 변수 세개를 출력하는 방법 변수들이 한 줄로 나열되어있다. 나열된 변수들을 행바꿈으로 변경해주기 : enter 태그는 반드시 따옴표 안에 작성해야한다, ● typeof: 문자의 타입을 알려주는 태그 boolean: 참, 거짓 string: 문자 Data Type number 1e+2 : 10의 2승 string 큰따옴표안에 있을 경우 무조건 문자로 인식함 큰따옴표 안에 외따옴표 외따옴표 안에 큰따옴표로 구분을 해주어야 오류가 안난다. 큰 따옴표안에 10이 들어가지만 문자로 인식한다. 키보드의 .. 2023. 7. 17.
비주얼 스튜디오 코드 77_ 뮤직 플레이어 뮤직플레이어 만들기 ●figure/ figcaption: 이미지와 이미지설명 태그 ●h1 은 한번만 쓰자. 가장 큰 타이틀은 로고라고 생각하고 한번만 사용 ●strong: 강조태그 ●b: bold 글씨 진하게 html mark up fontawesome 에서 bar 아이콘 넣기 css reset css edit 폰트어썸밖에 a태그로 감싸주고 class 지정 박스 만들기 section > article > .inner 8개 생성 css edit vh, vw 로 사이즈 설정시에 화면창에 따라 크기가 변하기 때문에 반응형이 따로 필요 없다 하지만 세부적인 작업과 컨트롤하기 어렵다는 단점이 있음! 정중앙에 section(box) 위치시키기 border-radius 적용, section 테두리 지우기 45도씩 박.. 2023. 7. 14.
728x90

티스토리툴바