Project #1. 자기소개 페이지 만들기 (1)

#추석연휴의시작 #과제

사전스터디 첫 과제는 자기소개 웹 페이지 제작이다.
어떻게 시작해야 할 지 감이 안와서 구글링을 하며 다른 분들이 하신 코드들을 보며 첫 페이지를 만들어보았다.

일단 지금까지 임시로 해본 기본적인 세 가지는

1. 이미지 등록하기

<img src="profile.jpeg" alt="profile img" title="profile img">

2. Navigation bar 만들기

HTML code

<nav>
            <ul>
              <li>
                <a href="index.html">Home</a>
              </li>
              <li>
                <a href="profile.html">Profile</a>
              </li>
              <li>
                <a href="favorite.html">Favorite</a>
              </li>
              <li>
                <a href="project.html">Project</a>
              </li>
              <li>
                <a href="contact.html">Contact</a>
              </li>
            </ul>
          </nav>

CSS code

nav {
  margin: 0 auto;
}

nav ul {
  text-align: center;
}

nav ul li {
  display: inline-block;

}

nav ul li a {
  padding: 18px;
  text-transform:uppercase;
  color: rgba(0, 0, 0, 1);
  font-size: 18px;
  text-decoration: none;
  display: block;
}

nav ul li a:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 1);
}

3. Footer에 Social Media icons 등록하기 이다.

HTML code

<footer class="social-footer">
              <div class="social-footer-icons">

                  <a href="https://www.instagram.com/xxhaileypark/">
                        <div id="insta" class="icon"></div>
                      </a>
                  <a href="https://github.com/haileyjpark">
                        <div id="github" class="icon"></div>
                      </a>
                    </a>
                <a href="https://velog.io/@xxhaileypark">
                      <div id="velog" class="icon"></div>
                    </a>

              </div>
            </footer>
            

CSS code

.icons {
    font-size: 0;
}

.icon {
    display: inline-block;
    background-size: cover;
    background-position: bottom;
    width: 60px;
    height: 60px;
    margin: 4px;
    background-repeat: no-repeat;
}


#insta {
    background-image: url(./instaicon.png);
}

#github {
    background-image: url(./githubicon2.png);
}

#velog {
    background-image: url(./velogicon.png);
}

Footer icon이 왼쪽에 가있는 것과, 모바일로 해당 페이지를 보면 사진이 너무 오른쪽 상단에 붙어있는 문제를 오늘 해결해보려고 한다.

HTML이랑 CSS로만 하는 거라 뚝딱뚝딱 금방 할 수 있을 줄 알았는데 생각보다 막히는 게 많고 오래걸릴 것 같다.
처음 해보는 거니까 당연히 그럴 수 있다. 화이팅!