babydevelopbabydevelop

뮤직 플레이어가 나오는 사이트를 제작해봤습니다! 처음에 사이트에 들어올때 등록되어있는 노래중 랜덤으로 한곡 시작하게되고 한곡 반복듣기, 랜덤 듣기, 리스트 순서대로 듣기를 구현 하였고 리스트를 누르면 노래 리스트가 나오며 노래 리스트에서 노래를 선택하면 선택한 노래가 틀어지도록 구현하였습니다. 맨아래 참조사이트가 있습니다. 모든소스를 볼수있으니 참조사이트에서 확인하셔도 됩니다! HTML 과 CSS 소스입니다. expand_more Now Playing more_horiz 0:00 0:00 repeat skip_previous play_arrow skip_next queue_music queue_music Music List close Script 입니다. 참조사이트 Music Player expand_m..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = sliderBtn.querySelector(".prev"); const sliderBtnNext = sliderBtn.querySelector(".nex..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = sliderBtn.querySelector(".prev"); const sliderBtnNext = sliderBtn.querySelector(".nex..

테이블 합치기 JOIN 사용하기 SELECT 필드명 FROM 테이블명 엘리어스 JOIN 연결할 테이블명 엘리어스 (ON)조건문; SELECT m.youName, m.youEmail, r.youCont, r.regTime FROM myMember m JOIN myReview r ON(m.memberID = r.memberID); CREATE TABLE myMember ( memberID int(10) unsigned auto_increment, youEmail varchar(40) NOT NULL, youName varchar(20) NOT NULL, youPass varchar(20) NOT NULL, youBirth int(20) NOT NULL, youAge int(20) NOT NULL, youPh..

테이블 데이터 데이터 입력하기 INSERT INTO 테이블 이름(필드명) VALUES(데이터); INSERT INTO myMember(youEmail, youName, youPass, youBirth, youAge, youPhone, regTime) VALUES('ik6623@naver.com','박종호','1234qwer','19950909','28','01040976623','10293857'); INSERT INTO myMember(youEmail, youName, youPass, youBirth, youAge, youPhone, regTime) VALUES('webstoryboy@naver.com','황상연','12dfsdecv','19920405','33','01039858583','578365..

CSS 그리드 레이아웃(Grid Layout) 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. 그리드(grid) 속성들! grid grid의 속성들을 한번에 일괄적용 할 수 있는 속성입니다. grid-area grid-area 속..

필드 추가하기 ALTER TABLE 테이블 명 ADD 추가할 필드명 AFTER 필드명 위치; ALTER TABLE myMember ADD youGender enum('m','w','x') default 'x' comment "남성은 m, 여성은 w" AFTER youBirth; Query OK, 0 rows affected (0.05 sec) mysql> desc myMember; +----------+------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +----------+------------------+------+-----+---------+---------..

DOCTYPE html> layout3 *{ margin: 0; padding: 0; } #wrap { width: 1200px; margin: 0 auto; background-color: #E3F2FD; } #header { width: 1200px; height: 100px; background-color: #B3E5FC; } #nav { width: 1200px; height: 100px; background-color: #81D4FA; } #contents { width: 1200px; display: flex; } #contents .aside { width: 400px; height: 780px; background-color: #90CAF9; } #contents .content { wid..