GitHub | 나만의 홈페이지 제작 후 GitHub 업데이트하기

안녕하세요!

 

오늘은 제작하고 수정을 통해 만들어낸 홈페이지를 GitHub에 업데이트를 해보았습니다.⭐👻

 

https://gonida1010.github.io/MyWebSite/

GonHome

---

1. 수정

 

1-1 HTML 수정

<li>
  <a href="#contact-section"
    ><img
      src="./images/dog_black2.jpg"
      alt="연락처"
      class="menu__img"
    />
    <h3 class="logo-container__title">연락처</h3>
  </a>
</li>
<li>
  <a href="./Resume.html"
    ><img
      src="./images/dog_white1.jpg"
      alt="이력서"
      class="menu__img"
    />
    <h3 class="logo-container__title">이력서</h3>
  </a>
</li>

HTML의 main에 해당하는 연락처 마우스 동작을 수정했습니다. a태그를 #section으로 설정하고 footer부분에 

id 클래스를 추가해서 클릭시, 스크롤이 연락처에 도달할 수 있도록 수정했습니다.

<footer id="contact-section">
  <p>(Contact)</p>
  <p>Email: pak101044@gmail.com | Phone: 010-9942-1490</p>
</footer>

 

1-2 CSS파일 수정

다음은 css를 수정해서 동작들을 꾸며봤습니다.

footer {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
  padding: 20px 0;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    background-color 0.6s ease;
  transform: scale(1);
  border-radius: 20px;
  max-width: 800px;
  margin: 0 auto;
}

footer:target {
  transform: scale(1.2);
  background-color: rgba(0, 0, 0, 0.9);
}

footer 부분이 사작형 이미지에 너무 허전에서 가로를 줄이고 radius를 설정했습니다. 모바일이나 태블릿 환경에서도 깔끔한 이미지를 원해 margin 0 auto로 설정했습니다. 그리고 연락처를 클릭했다는걸 표현하기 위해 연락처의 transition을 위와 같이 설정해서 클릭 시 이미지가 조금 확대되는걸 구현했습니다.

---

1-3 메뉴 부분 이미지 설정 변경

첨부한 사진에 보이는 강아지 네마리를 꾸미기 위해 조금 많은 시간을 투자 했습니다. 오늘 배운걸 한 번 적용하고 싶어서 혼자 처음 해봤는데 어려웠습니다.

.logo-container__menu {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 150px;
  margin-top: 20px;
}

.logo-container__menu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.logo-container__title {
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgb(255, 255, 255);
  text-shadow: 0 0 12px rgba(0, 0, 0, 1);
  opacity: 0.4;
  transition: opacity 0.5s ease;
  pointer-events: none;
  font-size: 45px;
  font-weight: bolder;
}

.logo-container__menu li:hover {
  transform: scale(1);
}

.logo-container__menu li {
  position: relative;
  width: 250px;
  height: 250px;
  transition: all 0.5s ease;
  transform: scale(0.7);
  list-style: none;
}

.logo-container__menu li:hover .logo-container__title {
  opacity: 1;
}

.logo-container__menu li:hover img {
  opacity: 0.8;
}

처음에 사이드바에 있었던 메뉴 링크들을 main화면으로 HTML을 수정해서 옮겼습니다.

이 코드의 핵심은 마우스를 올렸을 때 확대되며 제목이 나타나는 효과를 주는 것입니다.

display: flex; 를 하여 가로로 나열하고 space-evenly를 사용하여 균등하게 여백을 주었습니다. 그리고 모바일 환경을 고려하여,

flex-wrap: wrap;을 사용했습니다.

 

.logo-container__menu li 부분의 transform: scale(0.7);을 적용하여 원래 크기에서 70% 이미지만 보여줍니다.

그리고 li:hover부분에 transform: scale(1)을 입력하여 100% 크기로 확대를 시켜줍니다.

 

li:hover .logo-container__title

opacity: 1; 반투명했던 제목이 100% 선명하게 나타내는 효과를 주었습니다.

 

li:hover img

opacity: 0.8; 중복 효과로 이미지를 80% 만큼 불투명하게 만들어 글자를 더 잘 보일 수 있도록 효과를 주었습니다.

---

마무리

파이썬에서 힘들어도 프로그램을 직접 구상해서 짜서 조금씩 느는것처럼 HTML, CSS도 직접 해봐야 조금씩 손이 익어가면서 쉬워지는 거 같습니다.

수업하면서 CSS수업을 제일 재밌게 했던거 같고, 계속 코드들을 보니 이해하기가 점점 쉬워졌습니다.

 

요즘 일교차가 너무 심합니다. 혹시라도 제 글을 보신다면 몸 건강히 행복한 하루 보내세요!