티스토리 HTML/CSS 영역, 또는 게시글 작성에 이미지 2개를 옆으로 나란히 놓고 아웃 링크를 연결하는 코드 알아보기~

 

안녕하세요! 블로그애드입니다. 오늘은 티스토리 게시글을 작성할 때 이미지 2개를 옆으로 나란히 배열시키고 아웃링크를 설정하는 코드에 대하여 알아봅니다. 네이버 블로그처럼 쉽게 이미지를 옆으로 놓고 각각 링크를 연동시키면 되지만 티스토리에서는 하나의 이미지로 인식하기 때문에 별도의 코딩을 통해서 설정해야만 합니다. 

 

 

 

 

 

 

 HTML/CSS 영역에 유연한 이미지 패러렐 아웃링크 연결시키는 법 

우선, html/css 영역에 코드를 넣어 유연하게 대처할 수 있는 코드입니다. 

 

 

[HTML 영역]

<div class="image-links">
  <a href="이동할 링크2">
    <img src="이미지명1" alt="Image 1">
  </a>
  <a href="이동할 링크2">
    <img src="이미지명2.jpg" alt="Image 2">
  </a>
</div>

<설명>

위 코드에서는 div 요소를 사용하여 이미지와 링크를 포함하는 부모 요소를 만듭니다. class 속성을 사용하여 부모 요소에 image-links라는 '클래스' 이름을 부여합니다. 이미지와 링크는 'a' 요소를 사용하여 만듭니다. href 속성에는 링크할 페이지의 URL을 지정하고, 'img' 요소의 'src' 속성에는 이미지 파일의 경로를 지정합니다. alt 속성은 이미지에 대한 대체 텍스트를 제공합니다.

---

[CSS 영역]

.image-links {
  display: flex;
}

.image-links a {
  display: block;
  flex: 1;
  margin-right: 10px;
}

.image-links img {
  max-width: 100%;
}

 

<설명>

위 코드에서는 display: flex를 사용하여 부모 요소를 유연한 박스 모델로 설정합니다. 그러면 자식 요소인 a 요소가 옆으로 나란히 배열됩니다. flex: 1을 사용하여 각 a 요소의 너비를 동일하게 설정합니다. margin-right: 10px을 사용하여 이미지 사이에 간격을 만듭니다.

img 요소에는 max-width: 100%를 설정하여 이미지의 최대 너비를 부모 요소의 너비에 맞춥니다. 이렇게 하면 이미지가 부모 요소를 넘어서지 않습니다.

---

하지만, 게시글을 작성할 때에는 CSS 영역까지 코드를 할 필요는 없죠. 따라서 순수하게 HTML 영역에만 이미지를 나란히 배열하고 각각 아웃링크를 매길수 있는 코디를 작성한다면 다음과 같습니다. 

 

 

<div>
  <a href="http://example.com/page1.html">
    <img src="image1.jpg" alt="Image 1">
  </a>
  <a href="http://example.com/page2.html">
    <img src="image2.jpg" alt="Image 2">
  </a>
</div>

이미지가 옆으로 나란히 배치되기 위해서는 display: inline-block 스타일을 a 요소에 적용할 수 있습니다. 각각의 이미지에는 width 속성을 지정하여 이미지 크기를 조절할 수 있습니다.

 

 

 

<div>
  <a href="http://example.com/page1.html" style="display: inline-block;">
    <img src="image1.jpg" alt="Image 1" style="width: 200px;">
  </a>
  <a href="http://example.com/page2.html" style="display: inline-block;">
    <img src="image2.jpg" alt="Image 2" style="width: 200px;">
  </a>
</div>

하지만, 이 방법은 CSS를 사용하지 않는 경우 유연성이 떨어지며, 레이아웃을 조정하는 데 제한이 있을 수 있습니다. 따라서 일반적으로는 CSS를 사용하여 더 나은 레이아웃을 만드는 것이 좋습니다.

---

위 내용을 참고로, 실제로 적용해 본다면 어떻게 나올까요?

 

<div>
  <a href="https://blog.naver.com/gesu13/222666347376" style="display: inline-block;">
    <img src="https://tistory4.daumcdn.net/tistory/941631/skin/images/image1.png" alt="Image 1" style="width: 200px;">
  </a>
  <a href="https://db.blueweb.co.kr/formmail/formmail.html?dataname=joyfulmind070" style="display: inline-block;">
    <img src="https://tistory4.daumcdn.net/tistory/941631/skin/images/image2.png" alt="Image 2" style="width: 200px;">
  </a>
</div>

 

 

위의 코드를 이용하여 실제로 적용해본 이미지를 2개를 나란히 배열하고 각각의 아웃링크를 연결한 html 코드입니다. 하지만!!!  위의 코드에서는 새창으로 연결하는 것이 아니라 바로 아웃링크로 연결되기 때문에 현재 화면을 유지한 채 다른 정보를 얻기에는 다소 불편한 코드입니다. 따라서, 새창으로 아웃링크를 연결하고 싶으면, 이렇게 작성해도 좋습니다. 

 

---

<div>
  <a href="https://blog.naver.com/gesu13/222666347376" target="_blank">
    <img src="https://tistory4.daumcdn.net/tistory/941631/skin/images/image1.png" alt="Image 1" style="width: 200px;">
  </a>
  <a href=" https://db.blueweb.co.kr/formmail/formmail.html?dataname=joyfulmind070 " target="_blank">
    <img src="https://tistory4.daumcdn.net/tistory/941631/skin/images/image2.png" alt="Image 2" style="width: 200px;">
  </a>
</div>

---

위 코드에서 target="_blank" 속성이 링크(a 요소)에 추가되었습니다. 이렇게 하면 링크를 클릭했을 때 해당 페이지가 새 창에서 열립니다. 이 외에도, target="_blank" 속성을 사용하여 링크를 새 탭이나 새 창으로 열리도록 할 수 있습니다.

 

만약 이미지와 링크의 간격을 조절하고자 한다면, margin 속성을 사용하여 조절할 수 있습니다. 예를 들어, 이미지와 링크 간격을 10px로 설정하고자 한다면, 다음과 같은 CSS 코드를 사용할 수 있습니다.

 

 

div a {
  display: inline-block;
  margin-right: 10px;
}


위 CSS 코드는 div 내부의 모든 a 요소에 대해, display: inline-block 스타일을 적용하고, margin-right: 10px 스타일을 사용하여 각 요소의 오른쪽에 10px 간격을 추가합니다.도움이 되셨기를 바랍니다.