#36 깃(Git) - 깃허브 리드미(README) 3 : 이미지 삽입하기

안녕하세요 여러분! 에이블디입니다!

 

이번 시간에는 지난 시간에 이어 리드미에 이미지를 삽입하는 방법에 대해 알아보겠습니다!

 

마크다운에서 이미지를 삽입할 때는 맨 앞에 !를 붙인 후 [] 안에 대체 텍스트를 작성하고 () 안에 이미지 파일 경로를 지정합니다.

여기서 대체 텍스트란 이미지를 나타낼 수 없는 상황이나 화면 낭독기에서 이미지를 소리로 설명할 수 있도록 삽입하는 텍스트입니다.

이번에 실습할 이미지 삽입법은 웹에 올라와 있는 이미지 파일의 경로를 사용하여 이미지를 삽입하는 방법이므로 이미지 파일이 경로를 가지려면 웹에 올라와 있어야 합니다.

저는 에이블디 공식 홈페이지의 에이블디 로고 이미지를 불러와 보도록 하겠습니다.

아래의 이미지와 같이 작성을 해 보았습니다.

이제 결과 화면을 확인해 볼까요?

에이블디의 로고가 잘 나타나는 것을 확인할 수 있습니다!

로고가 참 예쁘죠? ㅎㅎ

 

이번엔 깃허브에 이미지를 올리고 README에 삽입하는 방법에 대해 알아보겠습니다!

 

방금 실습한 이미지 삽입 방법은 따로 웹사이트를 운영하지 않는 이상 일반적으로 사용하기 어렵기 때문에 이번에는 이미지 파일을 깃허브 리포지토리에 직접 올린 다음 그 경로를 README 파일에서 지정해보도록 하겠습니다!

 

먼저 사용자 컴퓨터에 이미지를 넣을 images 디렉터리를 만들어 주세요!

그리고 디렉터리 안에 필요한 이미지들을 넣어 주세요.

깃허브 리포지토리에 직접 이미지를 올릴 수도 있지만 커밋 관리 중인 다른 파일들과 섞이지 않도록 별도의 디렉터리를 만들어 관리하는 것이 좋습니다!

images 디렉터리는 어디에 두어도 상관없지만 계속해서 이미지를 추가해 사용할 예정이라면 로컬 리포지토리 안에 넣어두는 것이 관리하기 쉽습니다!

 

전 위의 이미지와 같이 실습 때 만들어 두었던 로컬 리포지토리 안에 만들어주었습니다!

 

그다음 이미지를 사용할 깃허브 리포지토리에 접속한 후 'Add file'을 누르면 등장하는 'Upload files'를 눌러줍니다.

'Upload files'를 눌러 나온 화면에 'Drag files here to add them to your repository'라고 적힌 영역에 조금 전에 만들어 둔 'images'디렉터리를 끌어다 놓아줍니다.

이미지 파일 올리기가 완료되면 아래의 이미지처럼 이미지 디렉터리와 파일의 경로가 나타나게 됩니다.

사용하실 이미지를 업로드하셨으면 커밋 메시지를 작성하고 'Commit changes'버튼을 눌러 커밋해 주세요!

저는 기본 커밋메시지를 그대로 사용하겠습니다!

깃허브 리포지토리에 'images' 디렉터리가 생겼네요!

이제 업로드한 이미지 파일을 README 파일에 삽입해 볼까요?

README.md 오른쪽에 있는 펜같이 생긴 아이콘을 눌러주세요!

저는 'banner.png'파일을 'images'디렉터리 폴더 안에 넣어 놓았었는데요, 해당 이미지를 리드미에 삽입하려면 아래의 이미지와 같이 작성해 주세요! [] 안에는 대체 텍스트를 작성해 주시고 () 안에 파일의 경로를 적어주시면 됩니다.

코드 형식은 다음과 같습니다.

![대체 텍스트](이미지 경로)

이제 결과 화면을 확인해 보아야겠죠?

README 수정이 끝났으면 수정한 내용을 커밋 메시지와 함께 커밋해주세요!

프리뷰로 봐도 상관없지만 저는 이번엔 커밋을 해줄게요!

 

깃허브 리포지토리에 업로드한 배너 이미지가 리드미에 잘 나오는 걸 확인할 수 있습니다!

 

이번 시간에는 리드미에 이미지를 삽입하는 방법에 대해서 알아보았습니다!

 

이제 리드미를 어느 정도 잘 작성하실 수 있겠죠? ㅎㅎ

 

그럼 여러분 다음 포스팅에서 만나요!