본문 바로가기
728x90
반응형

전체 글304

비주얼 스튜디오 코드 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.
비주얼 스튜디오 코드 76_파노라마_완성 [face4 영역 작업] html mark up -video: 경로지정해서 영상 삽입 후 뒤에 효과 명령어 넣기 controls: 시작, 정지 버튼이 활성화 muted: 음소거 , muted와 autoplay를 같이 써줘야 autoplay이가 실행이 된다. .face4 css edit video size 줄이기 width: 100% p태그와 em태그를 옆으로 나열하는 방법 1. float(left, right)로 띄워줌 단, 부모태그에 overflow: hidden 이나 clearfix 적용 2. display: inline-block >> 너비값이 있어야함 3. position 으로 위치지정 [.face5 영역 작업] html markup .face5 css edit .pic 이미지 편집 backgro.. 2023. 7. 13.
728x90

티스토리툴바