[html/css] 스파르타코딩 1주차:웹개발

완성 화면

- 폰트는 구글 폰트를 활용

- 버튼, 이미지, Quote 들은 부트스트랩 활용

- 필요에 맞게 커스토마이징함

- 커버 이미지를 어둡게 처리하여, 흰색 제목이 돋보이게 구성

- 마진 처리를 여유롭게 설정하여 공간감을 갖기 위해 노력

팬클럽 화면 페이지 간단하게 구성해봄 (시간 : 20분)

코드

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

<title>1주차 숙제</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

</head>
<style>
  * {
    font-family: 'Gowun Dodum', sans-serif;
  }

  #mytitle {
    background-color: green;

    width:100%;
    height: 250px;
    
    color: white;

    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://file.namu.moe/file/17a23b19305d0841bea89155d541c4d7f8117255ec2dbca20469b0ba3a71155b88896cb501dafff4fe6b04e59b382b82");
    background-position: center;
    background-size: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .mypost {
    max-width: 500px;
    width: 95%;
    margin: 20px auto 20px auto;

    box-shadow: 0px 0px 3px 0px black;
    padding: 20px;
  }
  
  .mypost > button {
    margin-top: 15px;
  }

  .mycards {
    width: 95%;
    max-width: 500px;
    margin: auto;
  }
  .mycards > .card {
    margin-top: 20px;
    margin-bottom: 10px;
  }
</style>
<body>

  <div id="mytitle">
    <h1>김승민 팬명록</h1>
  </div>

  <div class="mypost">
    <div class="form-floating mb-3">
      <input type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
      <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
      <label for="floatingTextarea2">응원 댓글</label>
    </div>
    <button type="button" class="btn btn-dark">응원 남기기</button>
  </div>

  <div class="mycards">
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>새로운 앨범 너무 멋져요!!!!!!!!</p>
          <footer class="blockquote-footer"><cite title="Source Title">Tom</cite></footer>
        </blockquote>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>새로운 앨범 너무 멋져요!!!!!!!!</p>
          <footer class="blockquote-footer"><cite title="Source Title">Tom</cite></footer>
        </blockquote>
      </div>
    </div>
    
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>새로운 앨범 너무 멋져요!!!!!!!!</p>
          <footer class="blockquote-footer"><cite title="Source Title">Tom</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

저작자표시 (새창열림)

'🗝️소프트웨어 > 🐬HTML & CSS' 카테고리의 다른 글

크롬브라우저에서 제공하는 기본 여백 제거하기 (0)	2022.10.02
온도 예측 페이지 만들기(공공 API 활용,json) (0)	2022.09.29
IntelliJ 학생용 설치 (0)	2021.10.18
html pdf 변환 (0)	2021.09.20
html 주석 처리 (0)	2021.09.20

'🗝️소프트웨어 > 🐬HTML & CSS' 카테고리의 다른 글

티스토리툴바