자기 소개 화면을 만들자.

이번에는 와이어 프레임의 두 번째 부분에 해당하는 자기 소개 부분을 만들 것입니다

index.html

<div class="main">
      <div class="container first">  
         <h2 id="profile" class="section-title">自己紹介</h2>
        <div class="profile">
            <img src="image/profile.jpg" height="250px" width="250px">
            <ul>
              <li>名前:ぱぱぱぺ</li>
              <li>出身:埼玉県***市</li>
              <li>趣味:大相撲観戦</li>
              <li class="message">ひとこと:<br>プログラミング歴は浅いですが、<br>コミュニケーションを大切に迅速丁寧な仕事を心がけます！</li>
            </ul>
            </div>
</div>

style.css

/* 共通 */
.container{
  height: 100vh;
  padding: 80px 50px 0 50px;
  text-align: center;
}
.section-title{
  padding-top: 130px;
  font-size: 3rem;
}
/* 自己紹介 */
.first{
  background-color:rgb(239, 243, 239, 0.959);
}
.profile{
  width: 80%;
  padding: 0 300px;
}
.profile img{
  border: 5px solid black;
  border-radius: 50%;
  float: left;
}
.profile ul{
  float: left;
}
.profile li{
 line-height: 60px; 
 text-align: left;
}
.profile .message{
  line-height: 36px;
}

고안한 것, 고생한 것

html

① 공통 부분에 container와 section-title을 추가한 것으로 콘텐츠끼리의 통일감이 나올 것, ,

css

①헤더의 list로부터 날아 왔을 때에 좋은 느낌의 위치가 되도록 조정했다
② 한마디만 따로 class 붙여 줄 사이를 채우고 읽기 쉽게 했다

그리고 완성한 것이 이쪽!

음, 이것도 간단합니다 (웃음)
아무튼 포트폴리오로서의 건강으로 최저한의 역할을 하고 있기 때문에 생존권 위반은 되지 않을 것. . .

결론

이번에는 자기 소개 페이지 만들었습니다 ~
취미의 란에도 썼습니다만 대 스모 굉장히 좋아합니다, 초등학생 때부터 계속 보고 있기 때문에 스모에 관한 사이트에서도 만들고 싶다