Coding Feature.

- properties 문자열.length 문자열의 크기. ​ ​ - method 문자열.toUpperCase() 문자열을 모두 대문자로. ​ 문자열.indexOf('o') o 문자가 있는 위치 반환. ​ 문자열.trim() 문자열 내 공백을 없애준다. ​ "1" + "1" "11"이 된다. ​ 변수명 앞에 var 적는 습관 중요. ​ document.querySelector('#target') id가 target인 태그를 선택. ​ 조건문은 if(..===..){ } else{ } '===' 비교 연산자. ​ .. document.querySelector('#night_day').value -> id가 night_day인 태그의 value 값 반환, 여기서는 night. ​ ​ 리팩토링. 중복 제거 통..

night 버튼, 클릭 시 자바스크립트 실행. ​ document.querySelector('body') -> 이 문서 내에서 body tag를 선택. 즉 화면 전체. ​ document.querySelector('body').style.backgroundColor='black'; -> body tag 내 style 속성 값인 배경색을 검정색으로. ​ 즉 버튼을 눌러 자바 스크립트를 실행해서 css 속성을 변경한다. ​ ​ 자바스크립트는 HTML 위에서 동작하는 언어. ​ JS를 추가하려면 태그 이용. ​ ​ ​ 클릭 시 경고문 hi가 나온다. -> 이벤트. type="text" -> 텍스트 박스. onchange=".." -> 값이 변경될 시 이벤트 발생. onkeydown=".." -> 키를 눌렀을 ..

- 단순히 디자인을 위해 사용되는 태그. 묶을때 편리. block level - div와 비슷, 단 inline level ​ #grid{ display:grid; grid-template-columns: 150px 1fr; } 왼쪽 오른쪽으로 그리드를 나누고 왼쪽을 150px 너비, 오른쪽을 나머지로 설정. ​ xfr yfr -> x:y 비율로 나눈다. ​ caniuse.com HTML, CSS 지원되는 곳 알려주는 매우 유용한 사이트. ​ #grid ol{ .. } grid가 id로 있는 태그가 부모인 자식 태그를 가리킨다. ​ #grid #article { .. }도 가능하기는 하다.

​ h1과 같은 태그는 화면 전체를 사용, block element. a와 같은 태그는 자신의 크기만큼을 사용, inline element. ​ h1에 display:inline를 추가하면 자신의 크기만큼만 사용하도록 만들 수 있다. a에 display:block을 추가하면 화면 전체를 사용하도록 만들 수 있다. ​ display:none은 태그 내용을 감춘다. ​ h1, a{ ... } 여기에서 ','를 사용해서 선택자 여러 개를 동시에 사용할 수 있다. 또한 h1{ border-width:5px; border-color:red; border-style: solid; } 대신 h1{ border:5px solid red; } 로 단축이 가능하다. ​ 컨텐츠와 박스 사이의 여백 padding: 20px;..