구조분해할당을 잘 쓰면 코드를 간략하게 한다. const {body} = document; // const body = document.body; // 이러면 앞에 document 를 붙이지 않아도되는 간략이 가능함, 속성과 변수 명 이름이 같아야한다. 위 내용과 같다. const body = document.body; 를 선언하면 예를 들면 document.body.append('태그명') 이런식으로 사용할걸 body.append('태그명') 으로 간략하게 사용가능 해진다. 근데 이게 왜 구조분해할당이라 하냐? const obj = { a: 1, b: 2 }; const a = obj.a; const b = obj.b; 예시로 이런 식으로 obj.a, 와 obj,b 의 프로퍼티를 대입하는 변수가 있다고..
reduce로 합계 구하기 [1, 2, 3, 4].reduce((a, c) => (a + c)); // a: 1, c: 2 // a: 3, c: 3 // a: 6 c: 4 // a: 10 // 결과는 10 .reduce((a, c) => (a + c)); 여기서 a는 callback 함수의 반환 누적 값이고, c는 현재 값이다. 예를 들어 .reduce((a, c) => (a + c), 1); 이런식으로 하면, 초기값을 줄 수 있고, 1을 입력한 상태다. 그럼 이런 식으로 진행이 된다. 1(초기값) + c: 1 a:2 + c:2 a:4 + c:3 a:7 + c:4 return a : 11 이전보다 초기값 1을 더 추가적으로 입력한 상태가 되므로 이 결과가 나온다. reduce로 배열을 객체 리터럴로 변환..
최상단에 있는 이 메뉴와, 페이 버튼을 만들 겁니다. 먼저 네이버 공홈(공식 홈 페이지)에서 해당 요소에 대한 정보를 가져 옵니다. 버튼으로 구성 되어있고, 46*46, padding 10px 이란걸 알 수 있습니다. width 와 heigt 사이즈는 여기서 확인하면 편하구요. button 태그의 부모. div 태그로 되어 있는 경우는 요소 선택이 어렵습니다. 그러니 개발자 도구에서 소스 를 보고 직접 div를 눌러주면 해당 div 요소의 정보를 볼 수 있게 됩니다. 왜냐면 해당 버튼의 위치를 지정해줘야 하기에 해당 값을 알아야 합니다. position 은 absolute top, left 값을 확인할 수 있네요. * 제가 직접 복붙해서 해본 바로는 공식 홈과 제가 소스를 붙여 해본 것과는 픽셀 단위로 ..
네이버 메인에 이런 버튼과 로고가 있을 것이다. 당연히 이 버튼들도 만들어야 한다. 그치만, 이 버튼 디자인을 내가 직접 해서 뽑아낼 건 아니지 않은가? 그래서 이 버튼 이미지들을 내려 받을 수 있는 방법이 있다! 네이버 웹 페이지에서 F12 키(크롬 기준)를 눌러 개발자도구 창을 띄운다. 대개 개발자 도구 때문이더라도, 크롬을 추천합니다. 여기서 요소 선택이라는걸 사용할건데 Ctrl + Shift + C 키로도 사용이 가능하다. 이걸 클릭 후 요소를 선택하면 해당 요소의 소스 부분을 볼 수 있다! 먼저 요소 선택 버튼을 클릭 후. 웹툰 버튼의 이미지 부분을 클릭했다! (이미지 소스를 추출할 거기 때문에) 요소를 클릭하면 개발자 도구 창이 해당 요소 관련 소스로 변한걸 볼 수 있다. 여기서 이 링크에 마..
2023.8.31 기준 네이버 화면이다. 위 사진. 이건 내가 따라 만들어본 네이버 상단 화면이다. 화면 구성은 따라해보려 했고, 기능 구현은 하지 않았다. 픽셀 정도의 차이는 있을 수 있으나, 최대한 따라 하려 했따. 가로 1400px 기준. 네이버를 따라 하는 강의를 먼저 보았지만, 현재 네이버와는 예전 네이버의 기준으로 하기에, 그걸 참고 하여 현재의 네이버를 만들어 봤다. 소스코드를 올린다. 이미지 소스 링크에 대해선, 해당 네이버 출처로 문제가 있을 거 같아 첨부하지 않았다. 하지만 추출 하는 법에 대해선 바로 다음 글 순서에 올려두었다. 네이버 검색창 검색 메일 카페 블로그 쇼핑 뉴스 증권 부동산 지도 웹툰
네이버 메인을 그대로 HTML, CSS로 따라 만들 예정이다. 먼저 2023.8.22 기준 네이버 메인이다. 개발자는 실제로, 코드를 입력하는 시간보다 아이디어 구상하는 것에 시간을 더 많이 할애한다고 한다. 그래서 반드시 계획을 세우고 나서 하는 것이 중요하다고 한다. 계획을 하자면 네이버 메인을 여러 구역으로 나뉘었던 것을 표시 해주었다. 1666px display 기준 가로 파란 블록부분 1280*261 이다. 가볍게 만들어 놓은 div 태그. 그 안에 header-center 의 style 속성에 width는 1280px로 메인과 똑같이 설정했다.
document.querySelector('input').addEventListener('input', (event) => { console.log('글자 입력', event.target.value); // event.target.value로 사용자가 입력한 값을 받을 수 있다. }); const onClick = function () { console.log('버튼 클릭'); } document.querySelector('button').addEventListener('click', onClick); // onClick 함수를 이름만 가져오는데, 이름 후 ()를 넣지않는다. 사용자가 입력한 값이 콘솔 로그에 찍혀서 출력되는 걸 확인할 수 있다.