사이트 모음 만들기 [프로그래밍 일기 ~ 포트폴리오 ⑥ ~] # 7

사이트집을 만들자!

이번은 슬라이드의 2장째에 해당하는 사이트집의 페이지를 만듭니다‼

index.html


<div class="container second">
        <div class="works">
          <h2 id="works" class="section-title">WORKS</h2>
          <div class="work">
            <a href="https://www.google.com/?hl=ja"><img src="image/work.png" height="200px" width="200px">
            <h3>○○のサイト</h3>
            <p>説明文</p></a>
          </div>
          <div class="work">
            <a href="https://www.yahoo.co.jp/"><img src="image/work.png" height="200px" width="200px">
            <h3>○○のサイト</h3>
            <p>説明文</p></a>
          </div>
          <div class="work">
            <a href="https://www.google.com/?hl=ja"><img src="image/work.png" height="200px" width="200px">
            <h3>○○のサイト</h3>
            <p>説明文</p></a>
          </div>
          <div class="work">
            <a href="https://www.yahoo.co.jp/"><img src="image/work.png" height="200px" width="200px">
            <h3>○○のサイト</h3>
            <p>説明文</p></a>
          </div>
        </div>
      </div>

style.css


* サイト集 */
.second{
  background-color: rgb(251, 180, 47)
}
.work{
  float: left;
  width: 25%;
  text-align: center;
  padding-top: 40px;
}
.work img{
  border: 2px solid black;
}
.work p{
  font-size: 16px;
  padding: 0 30px;
}

완성된 물건이 이쪽!

심플하고 손오공의 왼쪽 가슴 4개 줄지어 있는 것처럼 되어 버렸지만 향후 애니메이션과 까다로울 수 있다고 생각합니다! 빨리 자신의 싸움이라고 말해줘~

결론

심플한 사이트이기 때문인지 익숙해 왔기 때문인지 한순간에 완성되어 버렸습니다‼ 완성 된 물건을 본 느낌은 완전히 전자입니다

심플해도 우선 완성시키는 것이 중요! 라고 마음에 들려주고 열심히 합니다,,,
그럼, 그럼 ~

Reference

이 문제에 관하여(사이트 모음 만들기 [프로그래밍 일기 ~ 포트폴리오 ⑥ ~] # 7), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/papapape/items/aa53bbf9e95e0d122800

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다