Multi Developer SuHo

[CSS 실습 ] HTML과 CSS를 사용하여 게시판 만들기 본문

CSS 기록

[CSS 실습 ] HTML과 CSS를 사용하여 게시판 만들기

Dreaming Developer Student 2025. 1. 3. 16:08
SMALL

안녕하세요~ 이번에는 HTML과 CSS를 사용하여 간단한 게시판을 만들어 보았습니다. 


HTML 코드 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <div class="box">

    <div class="header">
        <h2 class="memo">게시판</h2>
        <button class="write-button">글쓰기</button> 
        <a href="https://simplecoding77.tistory.com/">
            <img class="box-img1" src="https://img.freepik.com/free-vector/cute-hamster-eating-sunflower-seed-cartoon-character-animal-food-isolated_138676-3145.jpg" alt="">
        </a>

        <a href="https://simplecoding77.tistory.com/">
            <img class="box-img2" src="https://img.freepik.com/free-photo/cute-ai-generated-cartoon-bunny_23-2150288883.jpg" alt="">
        </a>

        <a href="https://simplecoding77.tistory.com/">
            <img class="box-img3" src="https://d2v80xjmx68n4w.cloudfront.net/gigs/Ef1Tf1710997833.jpg" alt="">
        </a>

        <a href="https://simplecoding77.tistory.com/">
            <img class="box-img4" src="https://png.pngtree.com/png-clipart/20220225/ourmid/pngtree-cute-cartoon-hand-painted-dog-element-png-image_4446437.png" alt="">
        </a>

    
        </div>

        <div class="box-01">
            <span class="num">번호</span>
            <span class="title-1">제목</span>
            <span class="user-1">작성자</span>
            <span class="date-1">작성날짜</span>
        </div>ㅁ

        <div class="box-02">
            <span class="num">10</span>
            <span class="title">제목입니다.</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-20</span>
        </div>
        <div class="box-03">
            <span class="num">9</span>
            <span class="title">제목입니다</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-19</span>
        </div>

        <div class="box-04">
            <span class="num">8</span>
            <span class="title">제목입니다</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-18</span>
        </div>

        <div class="box-05">
            <span class="num">7</span>
            <span class="title">제목입니다</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-17</span>
        </div>

        <div class="box-06">
            <span class="num">6</span>
            <span class="title">제목입니다</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-16</span>
        </div>

        <div class="box-07">
            <span class="num">5</span>
            <span class="title">제목입니다</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-15</span>
        </div>

        <div class="box-08">
            <span class="num">4</span>
            <span class="title">제목입니다</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-14</span>
        </div>
        <div class="box-09">
            <span class="num">3</span>
            <span class="title">제목입니다</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-13</span>
        </div>
        <div class="box-10">
            <span class="num">2</span>
            <span class="title">제목입니다</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-12</span>
        </div>

        <div class="box-11">
            <span class="num">1</span>
            <span class="title">제목입니다</span>
            <span class="user">작성자</span>
            <span class="date">2024-01-11</span>
        </div>

    
        </div>
        
       
</div>

</div>

</body>
</html>

 


 

CSS 코드

.header {
    padding: 1px;
    width: 100%;
    height: 200px;
    color: black;
    background-color: rgb(61, 218, 230);
    text-align: left;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}
.memo {
    font-size: 30px;
    font-family:'Montserrat', sans-serif;
    padding-top: 2px;
}
.write-button {
    position: absolute; 
    top: 10px; 
    right: 20px; 
    color: #181717;
    background-color: #5fcf93;
    border: 1px solid #5ac8ea;
    padding: 10px 20px;
    
  }

  @keyframes ani {
    0% { 
      transform: translateY(-50%) rotate(45deg);
      opacity: 0; /* 투명 효과를 적용*/
    }
    25% { 
      transform: translateY(-20%) rotate(90deg);
      opacity: 0.5; 
    }
    50% { 
      transform: translateY(-50%) rotate(180deg);
      opacity: 1; 
    }
    75% { 
      transform: translateY(-20%) rotate(90deg);
      opacity: 0.5; 
    }
    100% { 
      transform: translateY(0%) rotate(0deg);
      opacity: 1; 
    } 
  }

.box-img1 {
    animation: ani 1s ease infinite;
  }
  .box-img2 {
    animation: ani 2s ease infinite; 
  }
  .box-img3 {
    animation: ani 3s ease-in-out infinite;
  }
  .box-img4 {
    animation: ani 4s ease infinite;
  }


img {
    border : 5px solid rgb(157, 84, 231);

    border-radius: 10px;
    position: relative;
    width: 120px;
    height: 100px;
}

img:hover {
     display: none;  
     /*이미지에 마우스 커서를 올라면 화면에서 안보이게 함*/
  }

.box {
    padding-right: 2px;
    display: inline-block;
    width: 70%;
    height: 30%;
    background-color: #f8f8f8; 
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); 
  }

.box-01 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    text-align: center;
    border: 0.4px solid;
    background-color: rgb(105, 173, 240); 
    
}
.box-02 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
   
    
}
.box-03 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
   
    
}
.box-04 {
    display: flex;
    padding: 1px;
    margin: 0 auto;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
    
    
    
}
.box-05 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
    
}
.box-06 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
    
    
}
.box-07 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
    
    
}
.box-08 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
   
    
}
.box-09 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
  
    
}
.box-10 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
   
    
}
.box-11 {
    display: flex;
    padding: 1px;
    width: 100%;
    height: 30px;
    border-width: 0.5px;
    border: 1px solid;
    
    
}

.num {
    width: 50px;
    display: flex;
}
.title {
    width: 40%;
    padding-right: 10px;
    display: flex;
    text-align: left;
    
}
.title-1 {
    width: 50%;
    padding-right: 20px;
    display: inline-block;
    text-align: center;
    
}
.user {
    width: 20%;
    display: inline;
    text-align: end; 
    
}

.user-1 {
    width: 45%;
    padding-right: 100px;
    display: inline-block;
    text-align: end;
}

.date {
    display: inline;
    width: 25%;
    text-align: end;
}

.date-1 {
    width: 20%;
    padding-right: 70px;
    display: inline-block;
    text-align: end;
}


간단한 게시판 만들기 실습이었습니다. 

LIST
저작자표시

'CSS 기록' 카테고리의 다른 글

[CSS 디스플레이 && 포지션 속성 ] 디스플레이 속성, 포지션  (0) 2025.01.05
[CSS 문법] 결합자 && 그 외 스타일 속성  (0) 2025.01.05
[CSS 문법 ] 선택자 사용방법, 선택자 우선순위  (0) 2025.01.04
[CSS 기초 문법 ] CSS 문법 기본 구조, 스타일 적용 방식 3가지  (0) 2025.01.03
[CSS 개념] CSS란 무엇인가❓❓❓ , CSS의 역할  (0) 2025.01.02
'CSS 기록' Related Articles more