자동으로 연도 변경하여 삽입하기
자동으로 연도 변경하여 삽입하기 사이트 하단에 회사 '창립 년도 ~ 현재 년도' 까지 적어두는 부분을 많이 봤을 것이다. 기업들이 보통 많이 작성해두는데, 수동으로 작성하는 곳은 없으리라 믿는다. 캡쳐 : 삼성 홈페이지 자세히 보면 이렇게 ↓↓ 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만으로 아코디언 메뉴 만들기(details와 summary태그)
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..
HTML 특수 문자 처리하기 HTML 문서에서는 특수 문자 처리를 해주지 않으면 오류가 발생하는 경우가 있다. 예를 들어 이런 식으로 사용하면 오늘의 날씨를 확인하려면 클릭하세요 >'>' 태그를 열고 닫을 때 사용하기 때문에 구문 에러를 발생시킨다. 또한 html 내에서 여러 번 띄어쓰기를 해도 적용되지 않으니, 이러한 특수 문자에 대한 처리가 필요하다.+태그 내에서는 작성 가능 [많이 쓰는 특수기호] > & & ⓒ © 띄어쓰기 &npsp; [사용법 예제]>오늘의 날씨를 확인하려면 클릭하세요&npsp;> [더 많은 특수 기호에 대한 엔티티 테이블 참고 링크들]Character Entity Reference Chart - http://dev.w3.org/html5/html-author/ch..