An LatentLab Anonymous Blog`s

1 minute read

👋 이번 포스팅에서 다룰 것

이번 글에서는 GitHub 블로그(Jekyll)에서 자주 사용하는 링크(Link)와 이미지(Image) 문법을 실전 예제 중심으로 정리했습니다.

💭 꾸준함은 기록에서 시작됩니다.
Markdown을 익히는 과정 또한 ‘꾸준한 성장’의 일부입니다.

🔗 링크 (Links)

링크는 블로그 글의 가독성과 연결성을 높여주는 핵심 요소입니다.
GitHub 블로그에서는 Markdown을 이용해 간단히 외부/내부 페이지나 섹션으로 연결할 수 있습니다.

✅ 기본 문법

[보여질 텍스트](https://example.com "마우스 클릭시 이동할 URL")

예시: LatentLab’s Blog

짧고 간결하게 — Markdown의 철학 그대로입니다.

참조(Reference) 스타일

링크를 여러 번 사용할 때는 참조 스타일을 쓰면 깔끔합니다.

본문:

GitHub Pages 사용법은 [LatentLab’s Blog][gh-pages]를 참고하세요.

문서 하단:

[gh-pages]: https://latentlabanonymous.github.io/

실제 적용시: GitHub Pages 사용법은 LatentLab`s Blog를 참고하세요.

🔗 내부 링크 & 앵커

  • 내부 파일로 연결: /path/to/page.md
  • 특정 섹션(앵커)으로 이동: #섹션-이름
    (공백은 하이픈으로 변환됩니다.)

예: [이미지 섹션으로 이동](#🖼-이미지-images)

🌐 새 탭에서 열기 (HTML 활용)

<a href="https://latentlabanonymous.github.io/" target="_blank" rel="noopener">블로그 열기</a>

rel="noopener"는 보안상 필수 속성입니다.

💡 링크 작성 팁

  • 외부 링크는 새 탭으로 여는 것이 일반적입니다.
  • “여기 클릭”보다는 의미 있는 링크 텍스트를 사용하세요.
    (예: [Git 설치 가이드] ✅ / [여기 클릭] ❌)

🖼 이미지 (Images)

이미지는 글의 완성도를 높이고 시각적 이해를 돕는 중요한 요소입니다.
Markdown에서는 간단한 문법으로 이미지를 삽입할 수 있습니다.

✅ 기본 문법

![대체 텍스트](./assets/images/photo.png "이미지 제목")

예시:
예시 이미지

📂 이미지 저장 위치 권장

블로그가 커질수록 이미지 관리가 중요합니다.

  • assets/images/ 또는 static/img/ 폴더를 만들어 정리
  • Jekyll에서는 다음과 같이 경로를 작성하는 것이 좋습니다:
![로고](/assets/images/logo.png "LatentLab Logo")

일관된 경로 구조는 유지보수를 쉽게 만듭니다.

⚙️ 이미지 크기 및 속성 제어 (HTML)

<img src="../../../assets/images/Jeklly_blog/markdown/2025-10-08-Practice_2/images.jpg"
     alt="AI 이미지 예시"
     width="600"
     loading="lazy" />
  • loading="lazy" : 스크롤 시 로드되어 페이지 속도 개선
  • width / height 지정 : 레이아웃 안정성 확보

🖋 캡션과 함께 쓰기

<figure>
  <img src="../../../assets/images/Jeklly_blog/markdown/2025-10-08-Practice_2/images.jpg" alt="설명" />
  <figcaption>Figure 1. AI 이미지</figcaption>
</figure>
설명
Figure 1. AI 이미지

✅ 접근성 & 퍼포먼스 정리

  • alt 텍스트는 반드시 작성 (스크린리더 접근성 개선)
  • 외부 링크에는 rel="noopener noreferrer" 적용
  • 큰 이미지는 loading="lazy" 사용
  • 내부 링크는 relative_url 필터로 관리

📌 마무리 및 다음 포스팅 예고

이번 포스팅에서는 링크와 이미지를 중심으로 Markdown 실전 활용법을 살펴봤습니다.
다음 포스팅에서는 코드 블록과 인용문(Quote)을 다룰 예정입니다.

꾸준한 학습과 기록으로 LatentLab의 블로그 빌드업을 이어가겠습니다.

💬 오늘의 명언
헨리 포드 (Henry Ford)
“If everyone is moving forward together, then success takes care of itself.” “모두가 함께 앞으로 나아간다면, 성공은 저절로 따라온다.”

Categories:

Updated:

Comments are configured with provider: utterances, but are disabled in non-production environments.

You may also enjoy