Skip to content

Instantly share code, notes, and snippets.

@ninanung
Last active February 22, 2024 00:56
Show Gist options
  • Star 29 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save ninanung/2b81a5db946c26c98c573e3662a92b62 to your computer and use it in GitHub Desktop.
Save ninanung/2b81a5db946c26c98c573e3662a92b62 to your computer and use it in GitHub Desktop.
사실은 내가 보기위한 마크다운 문법설명서 - 4. 링크와 이미지넣기

4.링크와 이미지넣기

4-1.링크

링크는 많이 사용해봐서 아실거라고 생각합니다. 현재 페이지에서 다른 페이지로 보내거나 다른 페이즈를 보여주기 위한 일종의 연결 통로입니다. 보통은 그 페이지의 이름이나 주소를 그대로 링크로 쓰는 경우가 많습니다. 마크다운은 당연히 링크에 대한 문법을 가지고 있습니다. 지금부터 하나씩 알아보겠습니다.

우선은 가장 간단한 링크 방법입니다. 단순히URL만으로 링크를 만드는 방식입니다.

https://gist.github.com/ninanung

아마 인터넷이아닌 sns라도 이 기능은 있을겁니다. 여기서 약간 문법적으로 조금 더 명시하고 싶으시면

<http://whatthell.com>
<EEEEE@namil.net>

와 같은 방식으로 사용이 가능합니다. html에서 많이 사용하는 특수문자인 ‘ < > ’로 URL이나 이메일 주소를 감싸주면 됩니다. 이것은 사용자에게는 이렇게 보이게 됩니다.

https://gist.github.com/ninanung

위에 링크를 누르 제 기스트로 제대로 들어가 지나요? 아마 그럴 것 같습니다.

두 번째 방법은 위에서 사용했던 것 보다는 약간 더 복잡해집니다.

[링크는 젤다의전설 주인공 이름](http://zeldahagoshipda.com)

이렇게 사용하면
링크는 젤다의전설 주인공 이름
요롷게 보이게 됩니다. 참고로 위에걸 누르셔도 또 제 기스트로 들어가집니다.

[링크에 사용할 이름](URL)  

이런 방식으로 사용하면 됩니다. 여것도 역시 복잡하지 않습니다. 그럼 여기서 아주 조금만 더 귀찮은 것을 해보겠습니다.

이 방식은 참조링크라고 부르는 방식입니다. 이걸 넣을까 말까 고민을 많이 했습니다. 왜냐하면 깃허브에는 없는 방식이거든요. 다만 다른 마크다운을 사용하는 웹서비스에는 있다고 합니다. 그러니 일단은 이런게 있구나 하고 보시면 좋겠습니다.
우선 어째서 참조냐? 하는 생각이 드실겁니다. 물론 코드를 보여드리겠지만 설명을 하자면 우리가 변수를 정의하듯이 단어를 정의할 겁니다. 그리고 정의한 그 단어를 참조하려 링크를 만들어 보도록 하겠습니다.

[링크드리스트는 어려워][링크]

[링크]: http://linkedlist.com “링크이름”

이게 뭔가 싶으실 수 있습니다. 우선 첫 문장의 첫 괄호는 위에서 배운 방식처럼 [ ]괄호 안에 링크에 사용할 문장이나 단어를 넣습니다. 그리고 중요한 것은 [링크]입니다. 두번째 문장에서 저는 [링크]를 정의했습니다. URL링크를 할당했고 “ ”안에 링크의 이름에 해당하는 것을 넣었습니다. 그리고 이렇게 정의된 것을 위의 링크문법에 적용한 것입니다. 조금 이해가 가셨나요? 우리가 다른 언어를 사용할때 변수에 값을 넣고 그 값 대신에 변수를 사용하는 것과 비슷하다고 생각하면 됩니다. URL을 string타입변수로 선언하고 그것을 사용한 것이죠.
아쉽게도 실제 모습은 보여드릴 수가 없습니다. 왜냐하면 저렇게 적더라도 깃허브에서는 코드와 같게 보일 뿐이거든요. 사실 이 마지막 참조링크방식은 단순히 링크로 사용하기에는 조금 귀찮은 감이 있습니다. 하나의 URL을 어지간히 여러번 사용할 게 아니라면 사용할 필요는 없거든요.
링크는 여기까지 입니다.


4-2.이미지넣기

이미지를 넣는 것은 게시판같은 웹 서비스에서 많이 볼 수 있는 기능입니다. 흔히들 말하는 짤을 올리거나 설명에 필요한 그림이나 그래프를 넣을 수도 있죠. 마크다운도 그 기능을 문법으로 구현합니다. 링크의 방식과 상당히 유사하니 쉽게 이해하실 겁니다.

첫번째 방식은 가장 간단한 방식입니다.

![텍스트](이미지파일경로.jpg)
![텍스트](이미지파일URL)

어디서 많이 보던 느낌이죠? 네, 맞습니다. 링크에서 설명했던 두 번째 방식과 비슷합니다. 아뇨, 사실 ‘ ! ’빼고는 완전히 똑같죠. 위에서 [텍스트]라고 되어있는 부분은 이미지를 대체하는 단어나 문장입니다. 음, 뭐라고 할까요 이미지가 들어갈 자리를 잡아준다고 할 수 있겠네요. 참고로

![텍스트](이미지파일경로.jpg “이미지이름”) 
![텍스트](이미지파일URL “이미지이름”)

방식으로도 사용 가능합니다. 무슨 차이인가 하면 실제 글에서 이미지 파일에 마우스를 올렸을 때 커서 옆에 나오는 텍스트를 설정하는 겁니다. 옵션이기 때문에 없어도 무방합니다. 이미지는 이렇게 올라옵니다

텍스트

텍스트

이미지는 같지만 마우스 커서를 올려보시면 차이를 알 수 있습니다.

두 번째 방법은 위에서 설명한 참조 방식인데 음 코드를 보여드리긴 하겠지만 설명은 하지 않겠습니다. 깃허브에는 맞지 않는 방식이니까요.

![텍스트][참조]

[참조]: URL이나 이미지경로 “이미지제목”

이런 방식입니다.

마지막은 링크와 이미지를 합친 문법입니다. 이미지를 링크로 사용하는 거죠. 사용법은 간단합니다.

[![텍스트](이미지URL이나 경로)](링크URL)

방식으로 사용합니다. 결국 링크문법에 사용할 문장 부분에 이미지에 해당하는 부분을 넣어버린 것 뿐이죠.

[           이   부   분   에   넣   음          ](링크URL)

![텍스트](이미지URL이나 이미지파일경로)

위에 길게 늘여높은 괄호 안에 위에서 배웠던 이미지를 넣는 문법 전체를 넣어버리는 것입니다. 어떤가요? 이렇게 하면 조금 이해가 쉬우신가요. 실제로 URL을 전부 넣어서 예를 들면 이렇습니다.

[![텍스트](http://cfile24.uf.tistory.com/image/2444873B57E257821FA2AE)](https://unity3d.com/kr)

이것은 위에서 썼던 유니티 이미지를 유니티 페이지로 들어가게 만든 코드입니다. 이것을 실제로 사용하면

텍스트

처럼 나오게 됩니다. 이미지를 눌러보시면 유니티 페이지로 이동이 되나요? 네, 된다면 다행입니다.
여기까지가 링크와 이미지넣기에 대한 부분이었습니다.

1장. 제목과 호라이즌
2장. 리스트와 인용
3장. 개행과 문자강조
4장. 링크와 이미지넣기
5장. 블럭과 테이블
기스트목록

@b3nn9
Copy link

b3nn9 commented Aug 9, 2018

감사합니다.
혹시 링크걸 때, 링크에 괄호가 있을 떄는 어떻게 해야할까요?
예를 들어 ../교안(2차).pdf 와 같이

@jysaa5
Copy link

jysaa5 commented Feb 16, 2020

Readme 작성할 때, 도움이 되었어요. 감사합니다.

@suengjae-baek
Copy link

감사합니다!

@saint-hong
Copy link

감사합니다~!!

Copy link

ghost commented Feb 3, 2021

감사합니다~

@MinwooP
Copy link

MinwooP commented Jun 23, 2021

감사합니다 ㅎㅎㅎ

@pdy1207
Copy link

pdy1207 commented Nov 7, 2022

감사합니다!

@river-zero
Copy link

덕분에 쉽게 이미지 첨부하였습니다. 고맙습니다😊

Copy link

ghost commented Aug 19, 2023

자세한 설명 감사합니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment