0
  • 로그인

  • 장바구니에 상품이 없습니다.

home2 › 게시판 › HTML/CSS 게시판 › 중급 모듈의 'Portfolio 실습 1 : Landing Page' 하던 중 질문

중급 모듈의 'Portfolio 실습 1 : Landing Page' 하던 중 질문

강의로 돌아가기
7 글 보임 - 1 에서 7 까지 (총 7 중에서)
  • 글쓴이
    글
  • 2024년 3월 23일 18:17 #117469

    박신욱
    참가자
    html 코드


    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/css/hw3.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <title>Document</title>
  </head>
  <body>
    <div class="main-container">
      <div class="main-title">
        <div class="main-title-text">
          <h1>Lading Page for Apps</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>Voluptatium, rem, distinctio! Dolores doloremque.</p>
          <button>Show More</button>
        </div>
        < img src="/img/iphone.png" />
      </div>
          <div class="main-show">
        <h2>It is the perfect theme for your next Project!</h2>
        <p>Lorem ipsum dolor sit amet, construer asdsad exit</p>
        <button>Show Portfolio</button>
      </div>
          <div class="main-my">
        <div class="main-my-title">
          <p>services</p>
          <h2>What We Offer</h2>
        </div>
            <div class="main-my-item-container">
          <div class="main-my-item">
            <i class="fas fa-mobile-alt fa-4x"></i>
            <h3>Responsive</h3>
            <span>Lorem ipsum I love coding</span>
          </div>
              <div class="main-my-item">
            <i class="fas fa-flask fa-4x"></i>
            <h3>Experiments</h3>
            <span>Lorem ipsum I love coding</span>
          </div>
              <div class="main-my-item">
            <i class="fas fa-bolt fa-4x"></i>
            <h3>Quickness</h3>
            <span>Lorem ipsum I love coding</span>
          </div>
              <div class="main-my-item">
            <i class="fas fa-globe-americas fa-4x"></i>
            <h3>Global Shipping</h3>
            <span>Lorem ipsum I love coding</span>
          </div>
        </div>
      </div>
          <div class="main-PF">
        <p>PortFolio</p>
        <h2>What we can DO</h2>
      </div>
          <div class="main-PF-imgContainer">
        <div class="main-PF-item">
          <h3>Stationary</h3>
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
        </div>
            <div class="main-PF-item">
          <h3>Stationary</h3>
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
        </div>
            <div class="main-PF-item">
          <h3>Stationary</h3>
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
        </div>
            <div class="main-PF-item">
          <h3>Stationary</h3>
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
        </div>
      </div>
          <div class="main-sns">
        <div class="main-sns-item">
          <i class="fab fa-google fa-2x"></i>
        </div>
            <div class="main-sns-item">
          <i class="fab fa-twitter fa-2x"></i>
        </div>
            <div class="main-sns-item">
          <i class="fab fa-instagram fa-2x"></i>
        </div>
      </div>
      <h3 class="main-myName">@ Nicholas / skrwlqhrdma</h3>
    </div>
  </body>
</html>
    
css 코드


    div,
input,
textarea {
  box-sizing: border-box;
}
    body {
  margin: 0px;
}
    .main-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 30vw;
  background: linear-gradient(to bottom, blue, purple);
  color: white;
  margin: auto;
}
    .main-title-text {
  display: flex;
  flex-direction: column;
  padding: 2% 0% 7% 7%;
}
    .main-title-text p {
  margin-bottom: 0px;
}
    .main-title img {
  height: auto;
  max-height: 100%;
  width: auto;
  margin-right: 7%;
  margin-top: 5%;
}
    .main-title button {
  width: 100px;
  height: 50px;
  border-radius: 5px;
  background-color: rgba(75, 75, 75, 0.963);
  color: white;
  margin: 50px 0 0 0;
}
    .main-show {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 5%;
}
    .main-show h2 {
  margin-bottom: 0;
}
    .main-show button {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background-color: rgba(75, 75, 75, 0.963);
  color: white;
}
    .main-my {
  background-color: rgb(160, 160, 252);
}
    .main-my-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
    .main-my-title p {
  margin-bottom: 0;
}
    .main-my-item-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
    .main-my-item {
  margin: 3%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
    .main-my-item i {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(160, 160, 252);
  background-color: white;
  border-radius: 50px;
  width: 100px;
  height: 100px;
}
    .main-PF {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 10%;
}
    .main-PF p {
  margin-bottom: 0;
}
    .main-PF-imgContainer {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* margin: 0 10% 0 10%; */
  margin: 0 auto;
}
    .main-PF-item {
  width: 50%;
  height: 28vw;
  color: white;
  padding: 6%;
}
    .main-PF-item:nth-child(1) {
  background-image: url(/img/portfolio-1.jpg);
}
.main-PF-item:nth-child(2) {
  background-image: url(/img/portfolio-2.jpg);
}
.main-PF-item:nth-child(3) {
  background-image: url(/img/portfolio-3.jpg);
}
.main-PF-item:nth-child(4) {
  background-image: url(/img/portfolio-4.jpg);
}
    .main-sns {
  display: flex;
  justify-content: center;
  align-items: center;
}
    .main-sns-item {
  margin: 7% 3% 3% 3%;
}
    .main-sns-item i {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: rgb(160, 160, 252);
  border-radius: 50px;
  width: 70px;
  height: 70px;
}
    .main-myName {
  display: flex;
  justify-content: center;
}
    @media screen and (max-width: 768px) {
  .main-title {
  }
}


    안녕하십니까
좋은 주말 보내고 계신가요 센세

여기서 문제가.. 
현재 이 코드에서 웹 페이지를 축소하면
<button>Show More</button>이 버튼이
1. 작아지는 main-title 영역에 맞춰서 버튼도 함께 작아지고
2. 동시에 최소화 되면 main-title 영역에서 벗어나는 에러가 생깁니다

이런 경우 왜 그런가요???
    2024년 3월 23일 21:23 #117484

    codingapple
    키 마스터
    버튼에 height는 빼봅시다 창크기 줄이면 뒤에있는 배경도 같이줄어들어서 그럴 뿐인듯요
    2024년 3월 24일 16:59 #117553

    박신욱
    참가자
    버튼에 height 빼도 그러네요.. ㅠ

.main-title button {
  width: 100px;
  border-radius: 5px;
  background-color: rgba(75, 75, 75, 0.963);
  color: white;
  margin: 50px 0 0 0;
}
    2024년 3월 24일 17:33 #117556

    박신욱
    참가자
    와우 해결했습니다! main-title 자체를 이것저것 건드리니 되는군요


    div,
input,
textarea {
  box-sizing: border-box;
}
    body {
  margin: 0px;
}
    .main-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  background: linear-gradient(to bottom, blue, purple);
  color: white;
  margin: auto;
}
    .main-title-text {
  display: flex;
  flex-direction: column;
  padding: 2% 0% 7% 7%;
}
    .main-title-text p {
  margin-bottom: 0px;
}
    .main-title img {
  height: auto;
  max-height: 350px;
  width: auto;
  margin-right: 7%;
  margin-top: auto;
}
    .main-title button {
  height: 50px;
  width: 100px;
  border-radius: 5px;
  background-color: rgba(75, 75, 75, 0.963);
  color: white;
  margin: 50px 0 0 0;
}
    .main-show {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 5%;
}
    .main-show h2 {
  margin-bottom: 0;
}
    .main-show button {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background-color: rgba(75, 75, 75, 0.963);
  color: white;
}
    .main-my {
  background-color: rgb(160, 160, 252);
}
    .main-my-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
    .main-my-title p {
  margin-bottom: 0;
}
    .main-my-item-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
    .main-my-item {
  margin: 3%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
    .main-my-item i {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(160, 160, 252);
  background-color: white;
  border-radius: 50px;
  width: 100px;
  height: 100px;
}
    .main-PF {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 10%;
}
    .main-PF p {
  margin-bottom: 0;
}
    .main-PF-imgContainer {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* margin: 0 10% 0 10%; */
  margin: 0 auto;
}
    .main-PF-item {
  width: 50%;
  height: 28vw;
  color: white;
  padding: 6%;
}
    .main-PF-item:nth-child(1) {
  background-image: url(/img/portfolio-1.jpg);
}
.main-PF-item:nth-child(2) {
  background-image: url(/img/portfolio-2.jpg);
}
.main-PF-item:nth-child(3) {
  background-image: url(/img/portfolio-3.jpg);
}
.main-PF-item:nth-child(4) {
  background-image: url(/img/portfolio-4.jpg);
}
    .main-sns {
  display: flex;
  justify-content: center;
  align-items: center;
}
    .main-sns-item {
  margin: 7% 3% 3% 3%;
}
    .main-sns-item i {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: rgb(160, 160, 252);
  border-radius: 50px;
  width: 70px;
  height: 70px;
}
    .main-myName {
  display: flex;
  justify-content: center;
}
    @media screen and (max-width: 768px) {
  .main-title {
    display: flex;
    align-items: center;
    flex-direction: column; 
    text-align: center;
  }
      .main-title button {
    margin: 5% auto;
  }
      .main-title img {
    margin: auto;
  }
      .main-title-text {
    padding: 0;
  }
      .main-title-text p {
    margin-bottom: 0px;
    margin-top: 0px;
  }
}
    
이렇게 바뀌었습니다
    2024년 3월 24일 17:34 #117558

    박신욱
    참가자
    다른 질문이긴 한데.. 혹시 button에 shadow 효과가 안사라지는데 어떻게 하는지 아십니까 선생님
bow-shadow: none 하면 된다는데 안됍니다..
    2024년 3월 25일 09:23 #117625

    codingapple
    키 마스터
    border : none 줘봅시다
    2024년 3월 25일 11:13 #117643

    박신욱
    참가자
    감사합니다!
  • 글쓴이
    글
7 글 보임 - 1 에서 7 까지 (총 7 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠