코딩기록

▶푸터 - 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) 축약형으로도 가능함.

▶상품 이미지 - 인기상품 CSS e-SHOP 추천상품에 그대로 사용

▶배너 이미지 - PC 버전 - 모바일 버전 -배너 이미지를 반응형으로 만들기 위한 코드 ▶검색창 - 검색창 - html - 버튼 글자를 없애기 위해 indent를 줌. - 검색 이미지 배경으로 넣어주고 위치와 크기 넣어줌.

▶ 예약정보 ▶랜덤 이미지 Math :내장객체 Math.random() :0~1사이의 수(소수점 이하) 수를 랜덤으로 가져온다. Math.random()*3 :0.xxxx~2.xxxx사이의 수가 랜덤으로 나온다. Math.ceil(A) :숫자 A의 소수점 이하는 무조건 올린다.(2.xxx -> 3) Math.floor(A) :숫자 A의 소수점 이하는 무조건 버린다.(2.xxx -> 2) Math.round(A) :숫자 A의 소수점 이하는 반올림 (2.56 -> 3/ 2. 43 -> 2) * 새로고침 할 때마다 배너이미지 변경 ▶브라우저 창 계산 ㅇㅇ ▶오늘 날짜 정보