안녕하세요. 자바스크립트 예제 포스팅입니다. 마우스 커서로 특정 요소를 클릭하면 스크롤이 정해진 위치로 이동하는 동작을 구현해보았고요. HTML, CSS, JavaScript 순서로 하나씩 코드를 살펴보겠습니다. 코드가 무척 간단하므로 이해하기 어렵지 않으실 것 같지만, DOM에 대한 이해가 부족하신 분들에게는 다소 어렵게 느껴지실 수 있습니다(직접 해보지 않고 코드만 읽어 볼 경우에도 어렵게 느껴집니다, 꼭 직접 해보세요!). 해당 코드에 대한 설명은 제 유튜브에서 동영상으로도 만나보실 수 있으니 참고해주세요. 감사합니다. => https://youtu.be/r3G0U5fva1c HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 HTML 문서 1번2번3번 1 2 3 0..
안녕하세요. 이번 포스팅에서는 정말 친숙하면서도 왠지 어색한 '그 존재', DOM에 대해서 소개해보려고 합니다. DOM을 친숙하면서도 어색한 존재라고 표현한 이유가 있습니다. 웹퍼블리싱이나 프론트엔드 코딩을 하는 사람들에게 DOM은 단어(약어이긴 하나) 자체만 봤을 땐 무척 친숙한 단어이지만, 누군가가 '도대체 그게 뭔데?'라고 물어보았을 때 'DOM이라는 건...!'하고 자신있게, 또 깔끔하게 답할 수 있는 경우가 그리 많지는 않은 것 같거든요. 머릿속에는 그게 뭔지, 어떤 개념인지에 대한 그림이 왠지 대충 그려지는 것 같은데, 막상 말로 표현하려니 어려운 느낌이랄까? 저역시 마찬가지고요 ㅎㅎ 그래서 이번 기회에 글로써 정리를 해두려고 하니, 필요하신 분들은 참고해보시면 좋을 것 같습니다. 내용 중 일..
안녕하세요. 이번 포스팅에서는 postion 속성 사용 시 상하좌우 오프셋을 지정하는 데 사용하는 top, bottom, left, right 속성에 대한 이야기를 살짝 해보겠습니다. position 은 요소의 배치 방법을 정의하는 속성입니다. relative, absolute 등의 속성값을 이용해 배치 방법을 결정하면, top bottom left right 속성값들이 오프셋을 정의하여 요소의 위치를 결정합니다. 가령 다음과 같이 코드를 작성하면 요소는 원래 있어야 할 곳보다 윗면(top)에서 100px 만큼, 왼쪽면(left)에서 200px 만큼 떨어져 다음과 같이 자리를 잡게 됩니다. 이 경우 left 속성이 왼쪽면에서 얼마만큼 떨어져야 할지를 정의해주고 있는 것인데, 만약 right와 left 위..