카운트다운 타이머 1. 남은 시간을 계산하는 함수 var countdown = function (due) { var now = new Date(); var rest = due.getTime() - now.getTime(); var sec = Math.floor(rest / 1000 % 60); var min = Math.floor(rest / 1000 / 60) % 60; var hours = Math.floor(rest / 1000 / 60 / 60) % 24; var days = Math.floor(rest / 1000 / 60 / 60 / 24); var count = [days, hours, min, sec]; return count; } var goal = new Date(); goal.setH..

breakpoint 1025 ~ : PC 768 - 1024 : 태블릿 (가로) 481 - 767 : 태블릿 (세로), 대형 모바일 320 - 480 : 모바일 작업 유의점 일반적으로 웹페이지 먼저, 그리고 쿼리단을 내려가면서 작업한다. 용량 최적화를 위해 하나의 이미지로 전체 쿼리단에서 작업하는게 좋다. background-image 도 100%를 주고 width 값으로 조정이 가능하다. 역동적인 배경 삽입 background-image로 삽입하고 background-size로 사이즈 조절 가상선택자로 배경 삽입 후 transform 등으로 조절 - 참고 : www.sitepoint.com/css3-transform-background-image/ html img 태그로 삽입 후 position z-i..

transition의 필수 조건 - CSS 속성 지정 - 효과 유지 시간 transition:all 1s; 지금까지의 작업은 대체로 hover 했을 때 transition을 사용하였는데, 이를 응용하여 해당 페이지에 들어가면(도달하면) transition 효과가 나타나도록 할 수 있다. hover 하지 않고 바로 효과가 나오는 것에 대해 이해가 조금 힘들었는데, 다음 그림을 참고하였다. 일반적으로 hover로 transition을 사용할때는 다음과 같다. div{ width:100px; height:100px; background-color:red; transition: all 1s; } div:hover{ background-color:blue; } 자동으로 transition 효과가 나타나게 하려면 ..

이벤트 document.getElementById('form').onsubmit=function(){ console.log('clicked'); } 이벤트에 대입하는 함수의 () 안에는 매개변수가 없고, {} 안에 return 명령어도 없음. => 매개변수와 반환 값이 없는 함수도 존재한다. * onsubmit 이벤트는 전송버튼이 아닌 부모요소 form 에서 발생한다 입력 내용 가져오기 document.getElementById('form').onsubmit=function(){ var search = document.getElementById('form').word1.value; document.getElementById('output').textContent=search+' 검색중...'; retur..

background : color image repeat position / size attachment 실무에서 가장 많이 쓰이는 아래의 네가지 속성을 background-image: url(../img/img.jpg); background-repeat:no-repeat; background-position:center top; background-size: 100%; 한 줄로 축약하면 이렇게 된다. background: url(../img/img.jpg) no-repeat center top / 100%; position과 size 는 일부 값의 단위를 공유하므로 꼭 슬래시로 구분해야 하고, size만 사용할 경우(축약형에서)에도 position 값을 꼭 명시해주어야 한다. 참고사이트: lifea.c..

flex 속성 justify-content : flex-start, flex-end, center, space-between, space-around 요소 가로 정렬 * space-between : 요소 사이에 동일한 간격 * space-around : 요소 주위에 간격 align-items : flex-start, flex-end, center, space-between, space-around, stretch 컨테이너 안에서 요소 세로정렬 지정 align-content 여러 줄들의 간격 지정, 한 줄인 경우 해당x align-self 지정한 요소에만 적용 (ex. 이미 전체 요소에 align-items가 사용된 경우) flex-direction : row, row-reverse, column, col..