코딩기록

▶HTML EventHandler - if(elName.value.length < 5) //요소. 입력내용. 글자 수 elMsg.textContent = '이름은 5글자 이상 써주세요!'; : 사용자 이름 5글자 이하일 때 경고창 뜸. ▶다른방식 매개변수 추가 IE 구버전 ▶커서 포커스 - 화면이 로드될 때 자동으로 커서가 움직임.

▶form_출석체크 - A.append(b); //부모요소A에 자식 요소를 추가 (마지막 부분) - A.prepend(b); //부모요소A에 자식 요소로를 추가 (첫번째 부분) - A.before(B); //A요소의 바로 앞에 B를 추가 - A.after(B); //A요소의 바로 뒤에 B를 추가 - A.insertbefore(B); //A요소의 바로 앞에 B를 추가 - A.insertafter(B); //A요소의 바로 뒤에 B를 추가 ▶form_약관동의 - all.onclick = function(){ terms1.checked = this.checked; terms2.checked = this.checked; } : 모든 약관 동의 - overflow: auto; : 영역 안의 글자 자동으로 스크롤 생..

▶애니메이션 배너 만들기 - 배너에 들어가는 애니메이션 이미지들 각각의 위치지정 해줌. - 애니메이션에 들어가는 세미콜론(;) 잘 확인해야함 . 작동하지 않음. - opacity 값을 주어 투명했다가 진해지는 효과를 넣어줌.

▶classList add/remove/contains - 사이트를 열었을 때 사이드바가 안보이는 상태이기 때문에 !(부정) 사용 - toggle 을 사용하지 않았을 때의 방법으로 if 사용해봄. ▶classList add/remove - 버튼이 여러개라서 querySelectorALL 사용 - function의 bb를 그대로 사용하지 못해서 변수값 let num=0 지정 ▶classList add/remove - .list img의 개수가 여러개기 때문에 querySelectorALL 사용 - .list img의 이미지를 onclick하면 클래스 active 발생 - elpopImage.src = this.src : 팝업창이 이미지 주소는 내가 클릭하는 이미지 - num = bb : 몇번째 배열의 아이..

▶attribute(속성) 검사 - .menuOn : '개인'메뉴가 항상 밑줄에 두껍게 표시될 수 있도록 함. - utilMenu 사이에 막대기는 after를 이용해 만듦.

▶attribute(속성) 검사 - ul의 세번째 li가 클래스 유무에 따라 생성되는 문구가 다름. - li의 공백도 인식되기 때문에 공백없이 늘여써줌. ▶attribute 생성, 변경 - item1 : 첫번째 li의 기존 클래스 "rrr"을 "check"로 변경 - item2 : 세번째 li #three a 안에 링크를 넣어줌. - item3 : 세번째 li에 'red'클래스 넣어줌 ▶DOM - attribute(속성) 제거 - 2번째 li에 클래스가 없어서 경고창이 뜸. - 3번째 li에 아이디 지움. ▶class toggle - elBtn1.onclick = function(){ elC01.classList.toggle('active'); } : 간단하게 사용 가능 - 버튼 누르면 팝업창 생성 ▶c..

▶푸터 - flex를 사용하지 않고 구성해봄. - 로고는 백그라운드 이미지를 이용. - float를 이용하는 것이기 때문에 가상선택자를 사용. ▶팝업창 - 팝업창의 위치를 가운데로 맞추고 배경을 투명하게 넣음. - z-index 를 이용해 팝업창이 제일 위로 올 수 있게 함. - elPopup.style.display = "none"; : 닫기버튼 활성화

▶sibling - 태그 안에 엔터도 인식해서 공백을 지워줌. - previousSibling; :하나 이전 요소 - nextSibling; :하나 이후 요소 ▶node - 로그 창으로 ul 의 자식요소 li 5개를 확인할 수 있음. ▶nodeValue - 두번째, 네번째 리스트의 텍스트를 바꿈. ▶text - display:none 상태 - textContent : 숨김 처리 한 텍스트도 가져옴 - innerText : 화면에 보이는 텍스트만 가져옴. - innerHTML : 숨김 처리 한 텍스트와 태그(em)까지 가져옴. ▶DOM 요소 추가 - A.appendChild(B) : 노드A에 자식 노드B를 삽입해서 자식 노드로 만든다. - ul의 자식노드로 newEl(추가)토마토 카프리제)를 추가. ▶DO..

▶id, class - class는 선언을 해주어야 하지만 id는 그냥 사용해도 가능. - elRed.className = 'orange' : 배열값을 찍어줘야하기 떄문에 사용불가. ▶html(tag) 선택 - 마지막 list의 'red' 배경 지움. - classList : 기존에 있던 것에 클라스를 추가 - className : 기존의 클라스를 바꿈. ▶querySelectorAll(모든 선택자 가능) - querySelector : 모든 선택자 가능. 여러개일 경우는 첫번째 것만 - querySelectorAll : 선택자를 배열의 형태로 불러와 list class ="red"의 두번째만 색깔을 바꿔줌.

▶현재 시간 나타내기 - today 값: const today = new Date(); 로컬 PC에 설정된 현재 시간, 날짜 데이터를 얻어옴. ▶올해 남은 날짜 계산하기 - 현재 날짜로부터 올해 남은 날 계산하기. getTime은 시간 계산을 1970년부터 하기 때분에 현재 시간으로 계산하는 과정이 필요함. diffDay_d는 Math.ceil을 주어 소수점이 생기지 않게 함. ▶내 생일 계산하기 - new Date(today.getFullYear(),8,30); 개월의 숫자는 -1 해야함. - Math.ceil(diffday_birth/1000/60/60/24) 축약형으로도 가능함.