깃허브 웹사이트 만들기(3) 깃허브 웹사이트에 gif 파일 올리기

1) 깃허브 웹사이트 확인 및 gif 파일 생성 

1) 웹사이트 중앙에 위치한 사람 로고를 gif 파일로 변경하고자 한다.

 

2) 바탕화면에 레포지토리와 연동된 git 폴더 접속 > img 폴더 접속  

 

3) img 폴더 안에 업로드 하고자 하는 gif 파일을 넣어준다.

 

2) Visual Studio Code를 활용한 코드 추가  

- Visual Studio Code를 활용하여 img 폴더에 업로드한 gif 파일이 정상적으로 나타날 수 있도록 코드를 작성한다.

- gif 파일에 대한 설정은 빨간색 표시친 부분이다. 

Visual Studio Code

 

 

<header>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <img class="img-responsive" src="img/profile.gif" alt="profile-pic" />
        <div class="intro-text">
          <span class="name">{{ site.title }}</span>
          <hr class="star-light" />
          <span class="skills">{{ site.skills }}</span>
        </div>
      </div>
    </div>
  </div>
</header>

 

3) gif 해상도 조정 및 업로드 확인 

1) gif 해상도 조정하기

- 아래 링크에 접속하여 gif 파일의 해상도를 원하는 해상도로 조정해준다.

- 해상도를 재설정한 파일을 바탕화면 git 폴더 > img에 붙여넣기 해준다. 

https://ezgif.com/

Animated GIF editor and GIF maker

 

 

2) 웹페이지 gif 업로드 확인

- 웹페이지에 gif가 정상적으로 업로드 되었는지 확인한다.