오물오물 개발일기

* 생활코딩 강의 기반으로 정리된 글 입니다. * JavaScript - Boolean '===' 기호를 이용한 Boolean 연산을 통하여 true or false 결과 값을 도출할 수 있다.

* 생활 코딩 강의 토대로 정리된 글 입니다. * JavaScript - event 사용자가 특정 동작을 했을 경우 웹에서 반을을 해주기 위함 hi button을 클릭시 (onclick) alert 창으로 'hi !' 라는 문구를 띄어주었다. 이번에는 input 창에 텍스트를 입력하거나 수정하면 (onchange) alert 창으로 'change'라는 문구를 띄어주었다. 마지막으로 input창에서 방향키를 조작하니 키입력을 감지하였다며 (onkeydown) 'key down' 이라는 문구가 뜬다.

* 생활 코딩 강의 토대로 정리된 글 입니다. * JavaScript - 맛보기 JavaScript는 사용자와 상호 작용을 하여 웹페이지를 동적으로 바꿔준다. 버튼 두개를 생성하고 night 버튼 클릭시엔 배경색이 black으로 글자색은 white로 변경 되게 작성 하였다. day 버튼 클릭시엔 배경색이 다시 white로 변경되고 글자색은 black로 변경 되게 작성 하였다.

* Custom Properties 색상이나 사이즈 등을 변수로 정의하여 사용한다. Orange Apple Korea Japan China

* transition - 동작과 애니메이션시 딜레이 등등 설정이 가능하다. * 링크 참고

* background background-image : url(''); - 배경에 링크를 걸어서 상용 background-repeat : no-repeat; - 배경이미지를 반복해서 쓸지 안쓸지 background-position : center; - 이미지의 위치지정 background-size : cover; - 이미지의 크기지정

* margin, text-align, translate, text centering margin : auto; - 라인내에 한 컨텐츠만 정렬 시킬때 text-align : center; - 특성이 block가 아니라 inline의 경우에 텍스트 뿐만아니라 컨텐츠도 가운데로 정렬 가능 transform : translat(50%, 50%); - x,y 이동 가능 - 이동하거나 회전도 가능 line-height : - 폰트매트릭스를 이용하여 텍스트 수직 정렬이 가능하다. margin: auto text-align: center Text translate(50%, 50%) Text centering Text Text

* 자바 스크립트를 사용하지않고도 드롭박스 메뉴를 구현할 수 있다. details > summary^div.list Welcome ! Your Page Your Books Your Picks Sign out

* Input type ="date" 사용시 placeholder 없애기 input[type=date]::-webkit-datetime-edit-text { -webkit-appearance: none; display: none; } input[type=date]::-webkit-datetime-edit-month-field{ -webkit-appearance: none; display: none; } input[type=date]::-webkit-datetime-edit-day-field { -webkit-appearance: none; display: none; } input[type=date]::-webkit-datetime-edit-year-field { -webkit-appearance: non..

* setInterval const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime() { const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}: ${minutes < 10 ? `0${minutes} ` : minutes}: ${seconds < 10 ? `0${se..