주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

void 0 이란? 라이브러리 코드를 학습하던 중에 이런 코드를 발견했다. if(params === void 0){ } void 0이 뭐지? 검색해 본 결과 void는 javascript의 연산자이고 항상 undefined를 반환한다고 한다.void 0, void 'hello' 등 전부다 undefined를 한다. 그럼 왜? undefined를 안쓰고?if(params === undefined){ } 첫번째로는 undefined는 항상 undefined가 아닐 수도 있다는 얘기다.var undefined = 'hello'; console.log(undefined);// hello 그리구 짧아서 브라우저로 전송되는 바이트 수를 줄일 수 있고 관용적이라고 한다. MDN링크https://developer.mo..

html 기본 구조 필요할 때, 자꾸 검색해서 찾아야 해서 간단한 구조 작성해둔다. 타이틀 본문 해당 문서 언어 설정 렌더링 모드 설정 (최신 렌더링 모드로 강제) 뷰포트 설정(모바일 접속 시 모바일 맞춤)

클릭 -> 스크롤 이동을 구현해보도록 하겠다. scrollintoview()를 사용하면 간단하다. HTML 클릭하세요 box1 box2 box3 box4 box5 box6 box7 박스1입니다. 박스2입니다. 박스3입니다. 박스4입니다. 박스5입니다. 박스6입니다. 박스7입니다. 클릭하여 이동할 수 있게 버튼을 만들어준다. CSS body,div{ margin:0; padding:0; } div{ display: flex; align-items: center; justify-content: center; } .box1{ background-color:red; } .box2{ background-color:orange; } .box3{ background-color:yellow; } .box4{ backg..

자동으로 연도 변경하여 삽입하기 사이트 하단에 회사 '창립 년도 ~ 현재 년도' 까지 적어두는 부분을 많이 봤을 것이다. 기업들이 보통 많이 작성해두는데, 수동으로 작성하는 곳은 없으리라 믿는다. 캡쳐 : 삼성 홈페이지 자세히 보면 이렇게 ↓↓ HTML 2010~자동 값을 넣으려는 곳 id 값을 주었다. JS const _date = new Date();const _year = _date.getFullYear();const thisYear = document.getElementById('thisYear'); thisYear.innerText = _year;id 값으로 변수를 만들어 그 안에 innerText해서 get한 값을 넣었다. new Date(); 가 궁금하면 MDN을 참고하자! https://d..

html만으로 아코디언 메뉴 만들기 HTML5에 새로 추가된 details, summary 태그만으로 아코디언 메뉴를 제작할 수 있다. 아코디언 메뉴란? 한번쯤은 다들 사용해봤을 것이다. 상단 메뉴가 있고 하단 메뉴는 최초에 숨겨져 있는 상태. 상단 메뉴를 클릭하면 하단 메뉴가 짜잔! 하고 보여지는 메뉴를 아코디언 메뉴라고 한다. 왜? 아코디언이냐고하면 이미지 보면된다. 하여튼 details와 summary를 사용해서 만들어보자. HTML summary가 없으면 타이틀이 '세부정보' html만으로도 가능합니다. 클릭하세요 02 아직 크롬, 파이어폭스만 가능합니다. 태그가 없으면 타이틀이 '세부정보'로 보여진다. CSS section { max-width: 500px;}details { background..

마우스 휠로 전체 페이지 영역 넘기기 지난번 마우스 휠로 input 넘버 값 up, down 작업을 했었다.응용해서 작업 하나 더 했는데 올린다. HTML박스1입니다.박스2입니다.박스3입니다.박스4입니다.박스5입니다.박스6입니다.박스7입니다.박스 7개 생성.몇 개를 생성해도 상관없다.하지만 구분을 위해 class로 css 추가했기 때문에 구분을 위한다면 똑같이 추가할 것. CSSbody,div{ margin:0; padding:0;}div{ display: flex; align-items: center; justify-content: center;}.box1{background-color:red;}.box2{background-color:orange;}.box3{background-color:yellow..