코딩애플 포트폴리오 실습 1

<header> 파트
<Main> 파트
<footer> 파트

728x90

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing Page</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      .container {
        width: 100%;
        height: 1800px;
      }

      header {
        background: linear-gradient(rgb(76, 94, 255), rgb(37, 52, 252));
        /* height: 400px; */
        display: flex;
        padding: 20px;
        padding-bottom: 0;
      }

      .text {
        padding-left: 50px;
        width: 300px;
        flex-basis: 40%;
      }

      .middle-space {
        flex-basis: 20%;
        width: 400px;
      }

      .t-white {
        color: white;
      }

      .btn {
        background-color: rgb(49, 49, 49);
        color: white;
        border: 0;
        padding: 10px 15px;
        border-radius: 5px;
      }

      .image {
        width: 300px;
        height: 300px;
        margin: 50px;
        margin-bottom: 0;
        flex-basis: auto;
      }

      .image img {
        width: 100%;
        height: 100%;
      }

      .main1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 50px;
      }

      .sub1 {
        background-color: rgb(37, 52, 252);
        padding: 50px 0;
        /* display: flex; */
        /* width: 100%; */
        /* justify-content: center; */
      }

      .sub1-title {
        padding-bottom: 50px;
      }

      .center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
      }

      @media screen and (max-width: 768px) {
        header {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
        }

        .text {
          display: flex;
          flex-wrap: wrap;
          text-align: center;
          justify-content: center;
          padding: 0;
        }

        .middle-space {
          flex-basis: 0;
        }
      }

      .Icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* 아이콘 그룹을 중앙 정렬 */
        padding: 20px;
      }

      .icon-items {
        display: flex;
        flex-direction: column;
        align-items: center; /* 아이콘을 중앙 정렬 */
        text-align: center;
        flex-basis: 22%;
      }

      .icon-items i {
        background-color: white;
        width: 80px;
        height: 80px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }

      .icon-items h4,
      p {
        margin: 5px 0;
      }

      @media screen and (max-width: 992px) {
        .icon-items {
          flex-basis: 45%;
        }
      }

      @media screen and (max-width: 768px) {
        .icon-items {
          flex-basis: 90%;
        }
      }

      .main2 p,
      h3 {
        margin: 5px;
      }

      .sub-image {
        margin: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      .images-item {
        flex-basis: 50%;
        position: relative;
      }

      .images-item h3 {
        position: absolute;
        /* z-index: 2; */
        top: 50px;
        left: 30px;
      }

      .images-item p {
        position: absolute;
        /* z-index: 2; */
        top: 100px;
        left: 30px;
      }

      .white-box {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        border: 0px solid white;
      }

      .white-box:hover {
        border: 20px solid white;
        transition: all 1s;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <div class="text">
          <h2 class="t-white">Landing Page for Apps</h2>
          <p class="t-white">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
            explicabo numquam reiciendis cupiditate dolor dignissimos et quia
            optio, atque, sequi eum consequatur voluptatum voluptate magni. Id
            laborum vitae ut dolorem.
          </p>
          <button class="btn">Show More</button>
        </div>
        <div class="middle-space"></div>
        <div class="image">
          <img src="/img/iphone.png" alt="" />
        </div>
      </header>
      <div class="main1">
        <h2>It is the perfect theme for your next Proejct!</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <button class="btn">Show Portfolio</button>
      </div>
      <div class="sub1">
        <div class="sub1-title">
          <p class="t-white center">services</p>
          <h2 class="t-white center">What We Offer</h2>
        </div>
        <div class="Icons">
          <div class="icon-items">
            <i class="fa-solid fa-download fa-3x"></i>
            <h4 class="t-white">Responsive</h4>
            <p class="t-white">lorem ipsum I love coding</p>
          </div>
          <div class="icon-items">
            <i class="fa-solid fa-download fa-3x"></i>
            <h4 class="t-white">Responsive</h4>
            <p class="t-white">lorem ipsum I love coding</p>
          </div>
          <div class="icon-items">
            <i class="fa-solid fa-download fa-3x"></i>
            <h4 class="t-white">Responsive</h4>
            <p class="t-white">lorem ipsum I love coding</p>
          </div>
          <div class="icon-items">
            <i class="fa-solid fa-download fa-3x"></i>
            <h4 class="t-white">Responsive</h4>
            <p class="t-white">lorem ipsum I love coding</p>
          </div>
        </div>
      </div>
      <div class="main1 main2">
        <p>Portfolio</p>
        <h3>What we can DO</h3>
      </div>
      <div class="sub2">
        <div class="image sub-image">
          <div class="images-item">
            <div class="white-box"></div>
            <img src="/img/portfolio-1.jpg" alt="" />
            <h3 class="t-white">Stationary</h3>
            <p class="t-white">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
          </div>
          <div class="images-item">
            <div class="white-box"></div>
            <img src="/img/portfolio-2.jpg" alt="" />
            <h3 class="t-white">Stationary</h3>
            <p class="t-white">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
          </div>
          <div class="images-item">
            <div class="white-box"></div>
            <img src="/img/portfolio-3.jpg" alt="" />
            <h3 class="t-white">Stationary</h3>
            <p class="t-white">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
          </div>
          <div class="images-item">
            <div class="white-box"></div>
            <img src="/img/portfolio-4.jpg" alt="" />
            <h3 class="t-white">Stationary</h3>
            <p class="t-white">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
          </div>
        </div>
      </div>
      <div class="main3"></div>
      <footer></footer>
    </div>
  </body>
</html>

<header> 파트

HTML 코드

<header>
        <div class="text">
          <h2 class="t-white">Landing Page for Apps</h2>
          <p class="t-white">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
            explicabo numquam reiciendis cupiditate dolor dignissimos et quia
            optio, atque, sequi eum consequatur voluptatum voluptate magni. Id
            laborum vitae ut dolorem.
          </p>
          <button class="btn">Show More</button>
        </div>
        <div class="middle-space"></div>
        <div class="image">
          <img src="/img/iphone.png" alt="" />
        </div>
      </header>

CSS 코드

      header {
        background: linear-gradient(rgb(76, 94, 255), rgb(37, 52, 252));
        /* height: 400px; */
        display: flex;
        padding: 20px;
        padding-bottom: 0;
      }

      .text {
        padding-left: 50px;
        width: 300px;
        flex-basis: 40%;
      }

      .middle-space {
        flex-basis: 20%;
        width: 400px;
      }

      .t-white {
        color: white;
      }

      .btn {
        background-color: rgb(49, 49, 49);
        color: white;
        border: 0;
        padding: 10px 15px;
        border-radius: 5px;
      }

      .image {
        width: 300px;
        height: 300px;
        margin: 50px;
        margin-bottom: 0;
        flex-basis: auto;
      }

      .image img {
        width: 100%;
        height: 100%;
      }

header 부분에서 신경써야 할 부분은 2가지다.

첫째는 텍스트 부분과 그림을 같은 div 박스로 묶고 한 줄에 넣는 것이다.

나는 header를 display:flex로 한 다음, middle-space 라는 div 박스를 만들고 flex-basis를 사용해 간격을 띄웠다.

@media screen and (max-width: 768px) {
        header {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
        }

        .text {
          display: flex;
          flex-wrap: wrap;
          text-align: center;
          justify-content: center;
          padding: 0;
        }

        .middle-space {
          flex-basis: 0;
        }
      }

둘째는 반응형 레이아웃을 만드는 것이다.

모바일 사이즈가 되었을 때, flex-wrap을 wrap으로 설정해서 넘치면 다음줄로 넘어가도록 만들고, 텍스트와 이미지를 가운데 정렬한다.

<Main> 파트

HTML 코드

    <div class="sub1">
        <div class="sub1-title">
          <p class="t-white center">services</p>
          <h2 class="t-white center">What We Offer</h2>
        </div>
        <div class="Icons">
          <div class="icon-items">
            <i class="fa-solid fa-download fa-3x"></i>
            <h4 class="t-white">Responsive</h4>
            <p class="t-white">lorem ipsum I love coding</p>
          </div>
          <div class="icon-items">
            <i class="fa-solid fa-download fa-3x"></i>
            <h4 class="t-white">Responsive</h4>
            <p class="t-white">lorem ipsum I love coding</p>
          </div>
          <div class="icon-items">
            <i class="fa-solid fa-download fa-3x"></i>
            <h4 class="t-white">Responsive</h4>
            <p class="t-white">lorem ipsum I love coding</p>
          </div>
          <div class="icon-items">
            <i class="fa-solid fa-download fa-3x"></i>
            <h4 class="t-white">Responsive</h4>
            <p class="t-white">lorem ipsum I love coding</p>
          </div>
        </div>
      </div>

CSS 코드

      .sub1 {
        background-color: rgb(37, 52, 252);
        padding: 50px 0;
      }

      .sub1-title {
        padding-bottom: 50px;
      }

      .center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
      }

      .Icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* 아이콘 그룹을 중앙 정렬 */
        padding: 20px;
        box-sizing: border-box;
      }

      .icon-items {
        display: flex;
        flex-direction: column;
        align-items: center; /* 아이콘을 중앙 정렬 */
        text-align: center;
        flex-basis: 25%;
      }

      .icon-items i {
        background-color: white;
        width: 80px;
        height: 80px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }

      .icon-items h4,
      p {
        margin: 5px 0;
      }

메인 파트에서 신경써야 할 부분은 font awesome 을 사용하여 아이콘을 불러오고, 각각의 요소를 div 로 나눠 구간을 만들고 가운데 정렬을 해주는 것이다.

header와 마찬가지로 display: flex를 사용하면 쉽게 만들 수 있다.

@media screen and (max-width: 992px) {
        .icon-items {
          flex-basis: 50%;
        }
      }

      @media screen and (max-width: 768px) {
        .icon-items {
          flex-basis: 100%;
        }
      }

header와 마찬가지로 반응형 레이아웃을 만들어줘야 한다. 태블릿 사이즈일 때는 2x2 사이즈로, 모바일 사이즈일 때는 1x4 사이즈로 만들어줬다.

flex-basis를 조절하면 쉽게 만들 수 있다.

<footer> 파트

HTML 코드

      <div class="sub2">
        <div class="image sub-image">
          <div class="images-item">
            <div class="white-box"></div>
            <img src="/img/portfolio-1.jpg" alt="" />
            <h3 class="t-white">Stationary</h3>
            <p class="t-white">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
          </div>
          <div class="images-item">
            <div class="white-box"></div>
            <img src="/img/portfolio-2.jpg" alt="" />
            <h3 class="t-white">Stationary</h3>
            <p class="t-white">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
          </div>
          <div class="images-item">
            <div class="white-box"></div>
            <img src="/img/portfolio-3.jpg" alt="" />
            <h3 class="t-white">Stationary</h3>
            <p class="t-white">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
          </div>
          <div class="images-item">
            <div class="white-box"></div>
            <img src="/img/portfolio-4.jpg" alt="" />
            <h3 class="t-white">Stationary</h3>
            <p class="t-white">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
          </div>
        </div>
      </div>

CSS 코드

      .sub-image {
        margin: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      .images-item {
        flex-basis: 50%;
        position: relative;
      }

      .images-item h3 {
        position: absolute;
        /* z-index: 2; */
        top: 50px;
        left: 30px;
      }

      .images-item p {
        position: absolute;
        /* z-index: 2; */
        top: 100px;
        left: 30px;
      }

마지막 부분에서 신경써야 할 부분은 이미지 위에 글자를 새기는 것이다.

images-item 을 position: relative 를 줘서 기준점으로 만든 다음, 텍스트 태그들을 position: absolute를 주고 top과 left로 위치를 선정해 주었다.

      .white-box {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        border: 0px solid white;
      }

      .white-box:hover {
        border: 20px solid white;
        transition: all 1s;
      }

마지막 마우스를 갖다대었을 때 애니메이션 효과는 white-box 라는 div 를 만들고 마우스를 갖다 댔을 때, border를 주고 1초에 걸쳐서 동작하도록 만들었다.

728x90

'Study > HTML,CSS, JS' 카테고리의 다른 글

JavaScript - 객체의 속성과 메소드 (2) (1)	2025.01.30
JavaScript - 객체의 속성과 메소드 (1) (0)	2025.01.30
HTML 폼(Form) 삽입하기 (1)	2025.01.26
HTML 목록 만들기 (0)	2025.01.25
HTML의 정의와 구조 (0)	2025.01.25

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

코딩애플 포트폴리오 실습 1

<header> 파트

<Main> 파트

<footer> 파트

'Study > HTML,CSS, JS' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역