[CSS] 자주 만드는 것들 기록 (1)

식빵·2022년 8월 6일

HTML-CSS

목록 보기

1/2

백엔드 개발자지만 디자인을 건드는 일이 심심치 않게 발생해서
이번 기회에 특히 자주 만드는 형태들을 정리하려고 한다.
다만 이 글의 목적은 일하는 곳에서 복붙해서 가져다 쓸려고 작성하는 것이라,
기초적인 CSS 설명에 최소화하겠다.

앞으로도 회사에서 사용하는 CSS를 알게되면 종종 이렇게 작성해보겠다.

👏 시작에 앞서 RESET

reset css 라고 검색하면 많은 것들이 나온느데, 나는 일단 여기에 있는 것을 쓰겠다.
앞으로 실습 코드에 이 reset css를 계속 적용하겠다.

추가사항
html..(생략)..video {...} 스타일 중괄호에
box-sizing: border-box; 도 하나 추가해주자.
안 하면 아래 CSS 가 잘 안먹히는 게 나온다.

reset css 가 뭔지 궁금하면 구글링!

🥝 메뉴 만들기

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <!-- reset css 적용 -->
  <link rel="stylesheet" href="../reset.css">
  <!-- flex 실습 css -->
  <style>
    .menu {
      display: flex;
    }
    
    .menu-item {
      background-color: gray;
      width: 25%;
      /*flex-grow: 1;*/
      transition: 0.5s;
    }
    
    .menu-item:hover {
      width: 35%;
      /*flex-grow: 1.25;*/
      background-color: aqua;
    }
    
    .menu-link {
      display: block;
      padding: 1em;
      font-size: 1.2rem;
      font-weight: bold;
      color: #555;
      text-decoration: none;
      text-align: center;
    }
    
    .menu-link:hover {
      color: white;
    }
    
  </style>
  <title>Document</title>
</head>
<body>
  <ul class="menu">
    <li class="menu-item">
      <a href="#" class="menu-link">Home</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">About</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">Product</a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">Contract</a>
    </li>
  </ul>
</body>
</html>

🥝 리스트 만들기

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <!-- reset css 적용 -->
  <link rel="stylesheet" href="../reset.css">
  <!-- flex 실습 css -->
  <style>
    
    .list-item {
      align-items: center;
      display: flex;
      margin: 10px 0;
    }
    
    .list-item:before {
      content: '🥝';
      margin-right: 10px;
    }
    
    
  </style>
  <title>Document</title>
</head>
<body>
  <ul class="list">
    <li class="list-item">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
      consequuntur, dolorem eligendi ex labore molestias pariatur quo
      quod repellendus totam.
    </li>
    <li class="list-item">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aute
      m doloremque, eligendi eum ex ipsam magni minus officiis quis
      recusandae voluptates!
    </li>
    <li class="list-item">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Hic, repellendus!
    </li>
  </ul>
</body>
</html>

🥝 리스트 만들기 - 2

아까했던 :before 에는 content 하나를 넣었지만,
이번에는 해당 영역에 이미지를 넣어서 해보자.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <!-- reset css 적용 -->
  <link rel="stylesheet" href="../reset.css">
  <!-- flex 실습 css -->
  <style>
    .item {
      display: flex; 
    /*
     이거만 하면 이미지 찌그러짐. figure 태그 안에 내용이 없기 때문.
      width 를 줘도 그건 여유가 있을 때만 가능
      안 찌그러지게 하기 위해서 flex-shrink: 0 를 해줘야 한다. 
    */
      margin-bottom: 1.2em;
      align-items: center;
    }
    
    .photo {
      flex-shrink: 0;
      
      margin-right: 0.5em;
      width: 50px;
      height: 50px;
      border: 2px solid #333;
      border-radius: 50%;
      background-color: white;
      background-repeat: no-repeat;
      background-position: center; /*top*/
      background-size: cover; /*120%*/
    }
    
    /* 말줄임이 필요하다면 이걸 사용 */
    .content {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
  </style>
  <title>Document</title>
</head>
<body>
  <ul class="list">
    <li class="item">
      <figure class="photo" 
              style="background-image: url(./spring-3-logo-png-transparent.png)"></figure>
      <p class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, repellat.
      </p>
    </li>
    <li class="item">
      <figure class="photo" 
              style="background-image: url(./spring-3-logo-png-transparent.png)"></figure>
      <p class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Dolore, repellat. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Dolore, repellat. Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Dolore, repellat.
      </p>
    </li>
    <li class="item">
      <figure class="photo" 
              style="background-image: url(./spring-3-logo-png-transparent.png)"></figure>
      <p class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, repellat.
      </p>
    </li>
  </ul>
</body>
</html>

🥝 모달 박스

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <!-- reset css 적용 -->
  <link rel="stylesheet" href="../reset.css">
  <!-- flex 실습 css -->
  <style>
    .modal-background {
      position: fixed;
      background-color: rgba(0, 0, 0, 0.7);
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .modal-box {
      width: 40vw;
      padding: 1em;
      border-radius: 2em;
      background-color: white;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="modal-background">
    <div class="modal-box">
    안녕 난 모달이야
    </div>
  </div>
</body>
</html>

🥝 모달 만들기-2

이번에는 jquery 를 사용해서 fadeIn, fadeOut 효과도 줬다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- jQuery CDN 추가 -->
  <script 
          src="https://code.jquery.com/jquery-3.6.0.min.js"
          integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
          crossorigin="anonymous"></script>
  <style>
    a {
      text-decoration: none;
    }
    
    .modal {
      position: fixed;
      background-color: rgba(0,0,0,0.4);
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      display: none;
    }
    
    .modal-content {
      background-color: white;
      width: 350px;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 30px;
      box-shadow: 0 0 15px rgba(0,0,0,0.15);
      text-align: center;
    }
    
    .btn-close {
      position: absolute;
      top: 15px;
      right: 15px;
    }

    .btn-sign-in {
      background-color: gold;
      color: white;
      border-radius: 4px;
      font-size: 15px;
      padding: 7px;
      display: block;
    }
  </style>
</head>
<body>
  <a class="modal-welcome" href="javascript:void(0)">모달 열기(feat.jQuery)</a>

  <div class="modal">
    <div class="modal-content">
      <a class="btn-close" href="javascript:void(0)">X</a>
      <h2>환영합니다.</h2>
      <img src="clarinet-player.png" alt="" style="width: 100px; height: 100px">
      <p>
        devcorp 사 사이트에 오신것을 환영합니다~<br>
        회원가입을 하시면 더 다양한 혜택을 누립니다!
      </p>
      <a class="btn-sign-in" href="javascript:void(0)">회원가입</a>
    </div>
  </div>

  <script>
    $(".modal-welcome").on("click", (event) => {
      $(".modal").fadeIn();
    });

    $(".btn-close").on("click", (event) => {
      $(".modal").fadeOut();
    });
  </script>
</body>
</html>

🥝 카드 리스트

진짜 회사에서 ~~오지게~~ 자주 나오는 디자인.
이게 그렇게 이쁜가...?

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <!-- reset css 적용 -->
  <link rel="stylesheet" href="../reset.css">
  <!-- flex 실습 css -->
  <style>
    body {
      background-color: gray;
    }
    
    .item {
      display: flex;
      flex-direction: column;
      margin-bottom: 2rem;
    }
    
    .item-image {
      height: 0;
      padding-bottom: 60%;
      background-color: lightgray;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    
    .item-image img {
      display: none;
    }
    
    .item-content {
      flex: 1 1 auto;
      padding: 1em;
      background-color: white;
    }
    
    
    @media (min-width: 600px) {
      /* 가로 스크롤 방지 */
      .container {
         overflow-x: hidden;
      }
      
      .list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -1rem; /* 카드 양쪽  */
        /*justify-content: space-between;*/
      }
      .item {
        width: 50%;
        /*flex: 1 0 auto;*/
        padding: 0 1rem; /* 카드 사이에 이격 내기, 다만 이러면 양쪽에 또 빈틈이 생김. 이건 위에서 margin: 0 -1rem ! */
      }
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="container">
    <ul class="list">
      <li class="item">
        <figure class="item-image" style="background-image: url(./spring-logo.png)">
          <img src="./spring-logo.png" alt=""/>
        </figure>
        <div class="item-content">
          111item-content item-content item-content item-content item-content item-content
          item-content item-content item-content item-content item-content item-content
        </div>
      </li>
      <li class="item">
        <figure class="item-image" style="background-image: url(./spring-logo.png)">
          <img src="./spring-logo.png" alt="">
        </figure>
        <div class="item-content">
          222item-content item-content item-content item-content item-content item-content
          item-content item-content item-content item-content item-content item-content
          item-content item-content item-content item-content item-content item-content
          item-content item-content item-content item-content item-content item-content
        </div>
      </li>
      <li class="item">
        <figure class="item-image" style="background-image: url(./spring-logo.png)">
          <img src="./spring-logo.png" alt=""/>
        </figure>
        <div class="item-content">
          333 item-content item-content item-content item-content item-content item-content
          item-content item-content item-content item-content item-content item-content
          item-content item-content item-content item-content item-content item-content
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

참고 링크

https://blogpack.tistory.com/863 : flex-grow 와 flex-shrink 에 대해 정말 정확히 알려주는 글. 추천!
https://blogpack.tistory.com/862?category=804108

식빵

백엔드를 계속 배우고 있는 개발자입니다 😊

다음 포스트