HTML 4

[html/css] 마우스 갖다대면 빼꼼 내미는 div. Animation.

# HTML 준비중 준비중 준비중 # CSS .menu-columns{ position: fixed; left: -75px; } 살짝 감추고 있다가 마우스를 대면 나타나는 효과와 스크롤 내려도 같이 이동하게 하기 위해 position:fixed를 사용합니다. .menu-columns__ul__item{ width: 120px; height: 50px; border-radius: 5px; background-color: white; /* -- item마다 아래 간격주기 -- */ margin-bottom: 15px; /* -- 마우스가 올라가면 커서 모양이 바뀜 -- */ cursor: pointer; /* -- span text 중앙 정렬 -- */ text-align: center; line-heigh..

JS와 친구들 2021.12.25

[html/js] 클릭하면 지정한 위치로 이동하기

전에 생활코딩에서 js 강의 듣다가 알게 된 기능입니다. (계속 신경 쓰이게 한 기능 2) 클릭하면 id를 지정한 문단으로 이동합니다. 목록을 누르면 해당 문단으로 이동하는 기능 구현에 유용할 것 같아서 게시글에 다룹니다. # HTML where? #은 id를 뜻합니다. * 아래 긴 글 주의 * Hacks Blog Read more at hacks.mozilla.org WebAssembly and Back Again: Fine-Grained Sandboxing in Firefox 95 In Firefox 95, we're shipping a novel sandboxing technology called RLBox — developed in collaboration with researchers at th..

JS와 친구들 2021.12.08

[HTML] HTML을 무시해서는 안되는 이유 중에서 몇가지들

* HTML을 잘 짜면 좋은 이유라고도 할 수 있을 것 같습니다. HTML은 템플릿도 잘 구성되어있고 또 그 뿐만 아니라 부트스트랩도 있어서 그런지 공부할 때 거의 HTML은 그리 중요치 않다는 얘기를 많이 들었었습니다. 그래서 태그만 잘하고 구성 알고 적절하게 id, class를 지정하는 것이 끝이라 생각했었는데. 알고 보니 HTML을 어떻게 짜냐에 따라 CSS, JS 구현의 간편함과 코드 효율이 달라집니다. - 기본적인 것들이라서 아시는 분들도 이미 느끼는 분들도 있을 거라 생각합니다. - # HTML 태그 제일 먼저 HTML 태그입니다. 태그명을 바로 보자마자 용도를 알 수 있게 짓는 것도 중요합니다. 그리고 지금 다룰 이 부분도 중요하다고 생각하는데. 가장 기본적이기도 하면서 CSS 적용할 때 중..

JS와 친구들 2021.11.16

[js] D-day까지 남은 시간 구하기 / 밀리초(milliseconds), setInterval();

전에 다룬 D-day 게시글을 이어서 디데이까지 남은 시간을 구해봅니다.. 우선 이 전에 inenerText 할 요소를 const로 선언도했었고, function도 생성했었습니다. 그대로 이어서 진행하겠습니다. 일단 같은 function 안에 시(House), 분(Minutes), 초(Seconds)를 아래와 같이 지정해줍니다. const house = Math.floor((timeTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeTime % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeTime % (1000 * 60))/1000); ..

Java script 2021.09.14