티스토리 블로그 글 링크, 이미지와 함께 나란히 배열 소스

티스토리 블로그에서 작성한 글의 링크를 나란히 배열하기 위해서는 아래 예시 코드를 사용하면 글 3개의 링크를 가로로 나란히 배치할 수 있습니다.

 

 

css에서 하는 방법도 있다고 하는데

저는 서식에 저장해서 바로 사용하는 방법을 올려보겠습니다.

솔직히 어떻게 하는지 잘 모르겠더라고요.

 

이전글소스.txt

0.00MB

 

 

<div style="display: flex; justify-content: space-between; gap: 10px;">
  <a href="글1의 URL" style="text-decoration: none; color: #000;">
    <div style="padding: 10px; border: 1px solid #ddd; text-align: center;">
      <img src="글1의 이미지 URL" alt="글1 이미지" style="width: 100%; height: auto; max-width: 150px;">
      <div style="font-weight: bold; color: purple;">글 제목 1</div>
    </div>
  </a>
  <a href="글2의 URL" style="text-decoration: none; color: #000;">
    <div style="padding: 10px; border: 1px solid #ddd; text-align: center;">
      <img src="글2의 이미지 URL" alt="글2 이미지" style="width: 100%; height: auto; max-width: 150px;">
      <div style="font-weight: bold; color: purple;">글 제목 2</div>
    </div>
  </a>
  <a href="글3의 URL" style="text-decoration: none; color: #000;">
    <div style="padding: 10px; border: 1px solid #ddd; text-align: center;">
      <img src="글3의 이미지 URL" alt="글3 이미지" style="width: 100%; height: auto; max-width: 150px;">
      <div style="font-weight: bold; color: purple;">글 제목 3</div>
    </div>
  </a>
</div>

 

 

코드설명

• <img src="글1의 이미지 URL">: 여기서 src 속성에 해당 글의 대표 이미지 URL을 넣습니다.
• alt="글1 이미지": 이미지를 설명하는 텍스트를 입력합니다. 
• style="width: 100%; height: auto; max-width: 150px;": 이미지를 적절한 크기로 조절하는 스타일입니다.
• max-width를 사용해 이미지의 최대 너비를 제한할 수 있습니다.
• font-weight: bold;: 글 제목을 굵게 표시합니다.
• color: purple;: 글 제목의 색상을 설정합니다.

 

알맞게 작성을 하시면 아래와 같이 나옵니다.

노꼬메오름

애월 새별오름

그리스신화박물관

300px 입니다.