[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 11일차 - 자기소개 페이지

들어가기

이번 수업은 홈 페이지에 옷을 입히는 작업 CSS에 관한 내용이었다. 아직도 쉽지않다고 생각되는 grid, animation에 대해 조금더 알게되었다. 이번 블로깅은 10일차 수업에 관한 과제로 자기소개 페이지를 꾸며보았다.

자기소개 페이지

HTML 구조

html 구조는 다음과 같이 작성했다.

header

	...

	<header>
  		<h1>About Me</h1>
	</header>

	...

profile

	...

      <article id="profile">
        <div class="img-box">
          <img src="../../Desktop/104333720.jpeg" />
        </div>
        <h3>PROFILE</h3>
        <div><span>Name</span><span>정연우 / Jungyeonwoo</span></div>
        <div><span>Birth</span><span>19980421</span></div>
        <div><span>Location</span><span>Seoul</span></div>
        <div><span>Email</span><span>oscar0421@kakao.com</span></div>
        <div><span>Hobby</span><span>스쿠버다이빙, 사진촬영</span></div>
        <div><span>Major</span><span>전자공학</span></div>
        <div><span>MBTI</span><span>ENTP</span></div>
      </article>

	...

skills

	...

	<article id="skills">
        <h3>SKILLS</h3>
        <table>
          <tr>
            <th>Name</th>
            <th>Level</th>
          </tr>
          <tr>
            <td>HTML</td>
            <td>⭐️⭐️⭐️⭐️⭐️</td>
          </tr>
          <tr>
            <td>CSS</td>
            <td>⭐️⭐️⭐️⭐️</td>
          </tr>
          <tr>
            <td>Javsscript</td>
            <td>⭐️⭐️⭐️⭐️</td>
          </tr>
          <tr>
            <td>React</td>
            <td>⭐️⭐️⭐️</td>
          </tr>
          <tr>
            <td>Express</td>
            <td>⭐️⭐️⭐️</td>
          </tr>
          <tr>
            <td>Mysql / MariaDB</td>
            <td>⭐️⭐️</td>
          </tr>
          <tr>
            <td>Figma</td>
            <td>⭐️⭐️</td>
          </tr>
        </table>
      </article>
      
    ...

goal

	...

	<article id="goal">
        <h3>GOAL</h3>
        <p>10주 완성! 프로젝트 캠프의 완주!</p>
        <p>멋진 포트폴리오 제작!</p>
        <p>함께 성장하는 기업에 취업하기!</p>
        <p>오픈소스 라이브러리 컨트리뷰터 되기!</p>
        <p>프론트엔드 개발의 정점에 서보기!</p>
    </article>

	...

contact

	...

	<article id="contact">
        <h3>CONTACT</h3>
        <a href="https://github.com/0SCAR0421">Github</a>
        <a href="https://velog.io/@oscar0421">Velog</a>
        <a href="mailto:oscar0421@kakao.com">Email</a>
    </article>

	...

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #565656;
}

header {
  text-align: center;
  padding: 30px 0;
}

article {
  padding: 10px;
  margin-bottom: 30px;

  & > h3 {
    margin-bottom: 10px;
  }

  & > div {
    display: grid;

    & span:first-child {
      font-size: 16px;
    }

    & span:last-child {
      color: #121212;
      margin-bottom: 10px;
      font-size: 20px;
    }
  }

  & > p {
    margin-bottom: 10px;
  }

  & > a {
    text-decoration: none;
    color: #565656;

    &:hover {
      color: #121212;
    }
  }
}

.img-box {
  padding: 30px;
}

img {
  width: 300px;
  border-radius: 100%;
}

table tr th {
  text-align: start;
}

table tr td {
  padding-right: 20px;
}

전체코드

마치며.

화려한 자기소개 페이지보단 단순하고 한눈에 들어오는 사이트를 만들고 싶었다. 과한 디자인은 과감하게 생략하고 새로로 늘어진 디자인을 채택했다.

어렵고 힘든 스타일이 아니다보니 클래스명은 과감히 생략하고 관계선택자만을 사용해봤다.

---

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.