비주얼 스튜디오 코드 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도씩 박스를 rotate 시키고 translateY 로 거리를 떨어뜨린다. 

자바스크립트로 적용하기

●querySelector: 한개 선택할 때

●querySelectorAll: 여러개 선택할 때

 

document 안에 있는 section을 선택하겠다

frame 안에있는 article들을 선택하겠다.

●.length: 갯수를 구하는 명령어

const 갯수를 구하기 length는 list의 갯수를 세서 len이라는 변수에 넣는다.

● ` (백틱): 백틱은 중괄호안은 계산값으로 넣어주고 나머지는 명령어로 실행 

배열요소 i는 계속 변하는 값이라 변수 let 사용

i=0

i++ 는 증가(=i+i)

list의 el이라는 변수를 만든다. for문이 회전시키는 ???

첫번째는 0 

두번째는 40도 회전

세번째  2*45 > 90도회전

전체적으로 밑으로 내려야한다. article를 감싸고 있는 section에 기준점으로 위치를 변경시킨다.

화면상에 보이는 박스가 더 커야한다. on이라는 이름을 넣어준다.

.inner안에 박스 두개를 만들어서 레코드판 만들기

그림은 자바스크립트에서 넣을 예정

그림자fiter: blur 처리

 

.pic 각 .inner에 복사 붙여넣기

.pic css 편집

단위가 똑같아야지 정사각형이나온다.

background-repeat: no-repeat 이미지 반복 해제

.dot css edit

●inset 안쪽 그림자

.pic 가상요소 만들기

javascript 적용

.pic도 여러개인데 querySelectorAll 로 잡지 않는 이유는 하나만 보이는 아이이기때문에..??

.pic에 대한 백그라운드 스타일

.txt mark up

● audio : 오디오 넣기

.txt css edit