[티스토리] 스크롤 이동시 버튼(글씨)을/를 고정시켜보자.

 

 

저도 티스토리를 최근에 시작을 해서 모르는게 정말 많습니다. 최근들어 HTML & CSS를 배울까 생각도 하고있습니다. 아니 배워야합니다. 마음 같아서는 학원을 다니고 싶지만 시간이 없는 관계로 교제를 하나 구입해서 차근차근 배워볼까 합니다.

제가 얻은 정보는 바로바로 습득을 하고 포스팅을 해버립니다. 여러분에게 정보를 제공하면서, 저는 메모장 역활로 대신 하고있는 셈입니다.

이번글은 스크롤을 움직여도 이미지는 고정되게끔 하는 방법을 알려드릴까 합니다.

 

일단 기본 태그를 알아봅시다. '적용 할 때에는 "</body>" 위에다 입력하시면 됩니다.'

 

<a style="display:scroll; position:fixed; margin-left: 620px; bottom: 5px; left: 50%;" href="#">맨 위로</a>

 

위 HTML소스를 설명하면 "스크롤이 움직여도 화면에 고정시킨다. 왼쪽에서 50% 떨어진 위치에서 620px만큼 떨어지고, 아래에서 5px만큼 떨어진 위치에 배치된 버튼을 누르면 맨 위로 이동"

 

여기서 수정을 할 부분은 "bottom"과 "margin-left"입니다. 각자 블로그에 맞게 수정을 하시면 되겠죠?

 

위 소스를 적용하게 되면 오른쪽에 배치됩니다. 왼쪽에 적용을 원하면 "left"와 margin-left"를 "right", "margin-right"로 수정하면 반대로 이동합니다.

저기서 응용을 하게되면 글 대신에 이미지를 넣을 수 있고, 인테리어용으로 그림을 하나 넣어서 블로그를 꾸미실 수 있겠네요.

 

<a style="display:scroll; position:fixed; margin-left: 620px; bottom: 5px; left: 50%;" href="#"><img src="이미지 경로"></a>