티스토리 본문 글 사이드에 고정 링크 넣기

티스토리 본문 글 사이드에 고정 링크 넣기

포스팅 본문 내용 우측에 이미지를 넣고 내가 원하는 사이트로 이동시키는 html코드입니다.

 

<!-- 본문 사이드 링크  -->
<a style="display:scroll;position:fixed;bottom:10px;right:10px;" href="연결할 링크 주소" target="_blank" referrerpolicy="unsafe-url">
<img src="이미지 링크주소"" width="350" height="50"> </a>
<!-- 본문 사이드 링크 -->

 

위의 코드는 HTML에서 사용되는 사이드 링크를 생성하는 코드입니다. 이 코드는 특정 링크 주소로 연결되는 이미지 링크를 만들고 있습니다.

 

style 속성 내의 내용은 해당 요소의 스타일을 지정하는 부분입니다.

• display: scroll;: 이 부분은 해당 요소를 표시할 방식을 지정합니다. 여기서는 scroll로 설정되어 있어 해당 요소가 스크롤이 가능한 상태일 때 스크롤 바를 표시합니다.
• position: fixed;: 이 부분은 해당 요소의 위치를 지정합니다. 여기서는 fixed로 설정되어 있어 화면에 고정됩니다. 스크롤이 발생해도 화면에서 이동하지 않고 고정된 위치에 남게 됩니다.
• bottom: 10px;: 이 부분은 해당 요소의 아래쪽과의 간격을 지정합니다. 여기서는 10픽셀로 설정되어 있어 화면 아래쪽으로부터 10픽셀 떨어진 위치에 표시됩니다.
• right: 10px;: 이 부분은 해당 요소의 오른쪽과의 간격을 지정합니다. 여기서는 10픽셀로 설정되어 있어 화면 오른쪽으로부터 10픽셀 떨어진 위치에 표시됩니다.

따라서, 이 부분을 통해 해당 코드는 화면의 오른쪽 하단에 스크롤이 가능하며 고정된 위치에 있는 요소를 생성하는 역할을 합니다.

• display:scroll;position:fixed;bottom:10px;right:10px;: 이 부분은 사이드 링크가 화면의 오른쪽 하단에 고정되어 스크롤과 상관없이 항상 보이도록 하는 스타일입니다.
• href="연결할 링크 주소": 이 부분은 링크가 연결될 대상의 주소를 지정합니다. 여기에 원하는 링크 주소를 넣어야 합니다.
• target="_blank": 이 부분은 링크를 새 창에서 열도록 지정하는 것입니다.
• referrerpolicy="unsafe-url": 이 부분은 referrer 정보를 전송할 때의 정책을 설정하는 것으로, "unsafe-url"로 설정되어 있습니다.
• <img src="이미지 링크주소" width="350" height="50">: 이 부분은 링크에 표시될 이미지를 지정하는 부분입니다. 여기에는 원하는 이미지의 링크 주소를 넣어야 합니다. 이미지의 크기도 지정되어 있습니다.
• <img> 요소는 HTML에서 이미지를 표시하는 데 사용됩니다. 여기서 제공된 코드에서는 이미지를 나타내는 <img> 요소를 볼 수 있습니다.
  • src="이미지 링크주소": 이 부분은 이미지 파일의 경로 또는 링크 주소를 지정합니다. 여기에 실제 이미지 파일이나 이미지에 대한 외부 링크의 주소를 넣어야 합니다.
  • width="350": 이 부분은 이미지의 너비를 지정합니다. 여기서는 350픽셀로 설정되어 있어 이미지의 너비가 350픽셀이 됩니다.
  • height="50": 이 부분은 이미지의 높이를 지정합니다. 여기서는 50픽셀로 설정되어 있어 이미지의 높이가 50픽셀이 됩니다.
  이렇게 함으로써 <img> 요소는 지정된 이미지를 해당 크기로 표시하게 됩니다. 이 코드는 주어진 이미지를 가로 350픽셀, 세로 50픽셀 크기로 표시하는 역할을 합니다.

이 코드를 사용하려면 연결할 링크 주소와 이미지 링크주소를 각각 원하는 주소로 변경하여 사용하시면 됩니다.