본문 바로가기
FrontEnd

5/13 - CSS, BOX, 이미지와 그라데이션, 반응형 웹

by Jiwon_Loopy 2025. 5. 17.
반응형

목차

웹 문서의 레이아웃 만들기

  • 블록 레벨과 인라인 레벨을 바꾸는 display 속성
  • 종류
    • block
      • 블록 레벨 요소로 표시 (한 줄 뛰어넘음)
    • inline
      • 인 라인 레벨 요소로 표시 (한 줄)
    • inline-block
      • 인 라인 레벨처럼 나란히 배치하지만 블록 레벨처럼 너비와 높이 지정 가능
    • none
      • 해당 요소를 화면에 표시하지 않음
      • 영역도 사라짐
    • hidden
      • 영역은 남아 있음
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #sp{
            display : inline;
            background-color: yellow;
            /* width, height는 적용 안됨 */
            width: 150px;
            height: 50px;
            /* margin은 좌우만 적용 */
            margin: 10px;
            padding: 10px;
            /* visibility: hidden; */
        }
    </style>
</head>
<body>
    <span>안녕하세요</span>
    <span id="sp">반갑습니다</span>
    <span>저는 홍길동 입니다.</span>
</body>
</html>
  • 왼쪽이나 오른쪽에 배치하는 float 속성
    • 좌/우 차례대로 나열
    • 예를 들어, 그림 옆에 글이 나열 됨
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            float: left;
            margin-right: 40px;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero nisi, culpa excepturi id laborum dolores! Explicabo, dicta architecto neque facilis qui fuga, sapiente non nesciunt iure, illum accusamus quos asperiores.</p>
    <img src="../img/miki.png" alt="miki">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus. Quisquam, voluptatibus.</p>
</body>
</html>

 

  • float 속성을 사용해 가로로 배치하기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        margin : 0 10px
    }
    #box1{
        background:#ffd800;
        float: left;
    }

    #box2{
        background:#0094ff;
        float: right;
    }

</style>
<body>
    <div class="wrapper">
    <div class="box" id="box1">박스1</div>
    <div class="box" id="box2">박스2</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium numquam, dolorem magni esse, odio doloremque eum itaque veniam facilis odit necessitatibus sequi cupiditate illum magnam eos quo architecto culpa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet doloribus sit repellendus reiciendis at saepe maiores veniam ea distinctio alias, asperiores deserunt ex, accusamus laboriosam optio sequi excepturi illo in! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam perspiciatis corporis dignissimos error eveniet dolorem, maxime nam ducimus dolores, ipsum, modi optio vero neque. Ex laudantium dolorem expedita minus!Lorem</p>
</div>
</body>
</html>

 

  • float 속성 해제 (원하는 곳에만 float 넣기)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        margin : 0 10px
    }
    #box1{
        background:#ffd800;
        float: left;
    }

    #box2{
        background:#0094ff;
        float: right;
    }
    .clear{
        clear: both;
    }
</style>
<body>
    <div class="wrapper">
    <div class="box" id="box1">박스1</div>
    <div class="box" id="box2">박스2</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium numquam, dolorem magni esse, odio doloremque eum itaque veniam facilis odit necessitatibus sequi cupiditate illum magnam eos quo architecto culpa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet doloribus sit repellendus reiciendis at saepe maiores veniam ea distinctio alias, asperiores deserunt ex, accusamus laboriosam optio sequi excepturi illo in! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam perspiciatis corporis dignissimos error eveniet dolorem, maxime nam ducimus dolores, ipsum, modi optio vero neque. Ex laudantium dolorem expedita minus!Lorem</p>
    <p class="clear">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium numquam, dolorem magni esse, odio doloremque eum itaque veniam facilis odit necessitatibus sequi cupiditate illum magnam eos quo architecto culpa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet doloribus sit repellendus reiciendis at saepe maiores veniam ea distinctio alias, asperiores deserunt ex, accusamus laboriosam optio sequi excepturi illo in! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam perspiciatis corporis dignissimos error eveniet dolorem, maxime nam ducimus dolores, ipsum, modi optio vero neque. Ex laudantium dolorem expedita minus!Lorem</p>
</div>
</body>
</html>

웹 요소의 위치 지정하기

  • 웹 요소의 위치를 정한느 속성
  • 종류
    • left
    • right
    • top
    • bottom
  • 위치를 지정하는 방법
    • 절대 위치
      • 고정된 위치
    • 상대 위치
      • 앞/부모 요소에 따른 상대 위치
    • x 좌표
      • 시작 위치가 left
    • y 좌표
      • 시작 위치가 top
  • position 속성
    • static
      • 태그 순서대로 배치
    • relative
      • 앞 태그의 위치에 따라 배치
      • 위치 지정 가능
    • absolute
      • (부모 relative) 기준 절대 좌표
      • 문서 기준
    • fixed
      • 화면 기준 절대 좌표
  • static 고정 좌표
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        div {
            width: 100px;
            height: 100px;

        }

        #box1 {
            background-color: red;
            position: static

        }
        #box2 {
            background-color: blue;
            position: static;
            left: 10px;
            top: -10px;
        }

        #box3 {
            background-color: orange;
            position: static;
            left: 20px;
            top: -20px;
        }
        #container {
            position: static;
            width: 500px;
            height: 500px;
            left: 100px;
            top: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    </div>
   
</body>
</html>

 

  • relative는 부모를 따라감
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        div {
            width: 100px;
            height: 100px;

        }

        #box1 {
            background-color: red;
            position: relative

        }
        #box2 {
            background-color: blue;
            position: relative;
            left: 10px;
            top: -10px;
        }

        #box3 {
            background-color: orange;
            position: relative;
            left: 20px;
            top: -20px;
        }
        #container {
            position: relative;
            width: 500px;
            height: 500px;
            left: 100px;
            top: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    </div>
   
</body>
</html>

  • absolute 절대적으로 부모를 따름
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        div {
            width: 100px;
            height: 100px;

        }

        #box1 {
            background-color: red;
            position: absolute

        }
        #box2 {
            background-color: blue;
            position: absolute;
            left: 10px;
            top: -10px;
        }

        #box3 {
            background-color: orange;
            position: absolute;
            left: 20px;
            top: -20px;
        }
        #container {
            position: absolute;
            width: 500px;
            height: 500px;
            left: 100px;
            top: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    </div>
   
</body>
</html>

 

  • fixed는 화면 고정, 항상 같은 곳
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        div {
            width: 100px;
            height: 100px;

        }

        #container {
            position: fixed;
            width: 500px;
            height: 500px;
            left: 100px;
            top: 100px;
            border: 1px solid black;
        }
        #box1 {
            background-color: red;
            position: fixed;
            left: 0;
            top: -0;
        }
        
        #box2 {
            background-color: blue;
            position: fixed;
            left: 10px;
            top: -10px;
        }

        #box3 {
            background-color: orange;
            position: fixed;
            left: 20px;
            top: -20px;
        }
    </style>
</head>
<body>
    <div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    </div>
   
</body>
</html>

 

  • zindex
    • 레이어처럼 값이 클 경우 위로 올라오게 됨
    • 디폴트는 후순위에 작성한 코드 순서이지만, zindex를 통해 레이어의 우선 순위를 조정할 수 있음+

백 그라운드

  • 배경 속성
    • repeat
      • 반복해서 채우기
    • no - repeat
      • 반복하지 않기
    • repeat-x
      • 너비 채우기
    • repeat-y
      • 높이 채우기
  • 이미지 전체 넣기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-image : url('../img/bbb.png');
            background-repeat: repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    
</body>
</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>
    <style>
        body{
            background-image : url('../img/bbb.png');
            background-repeat: no-repeat;
            background-position: right bottom;
            background-attachment: fixed
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 

레이아웃

  • 헤더, 컨텐트, 푸터

반응형 웹

  • 노트북, 스마트폰 등에서 접속할 때 기기에 맞추어 변형되는 웹
  • 기기마다 배치가 다름
  • @media (미디어 쿼리) 사용
  • em 단위 사용

모바일 기기를 위한 뷰포트

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  • meta name 부분의 viewport, content 부분
  • 접속한 기기에 따라 확대되거나 축소되어 실행
  • user-scalable
    • 유저가 손으로 확대하는 것

크기 맞추기

  • 크기
    • 더 이상 커지지 못하거나 작아지지 못하게 막는 것
      • max-width
      • min-width

미디어 쿼리

  • 기본 구조
@media 유형 (조건) and (조건) ...
  • 유형
    • screnn
    • print
  • 조건
    • max - width
    • min - width
  • 적용하는 법
    • 파일 내부
      • @media …
      • <style media = “조건”> …
    • 파일 외부
      • <link href=”” … media=”조건”>
    • 불러오기
      • @import url(경로) 조건
  • 개발자 도구의 미디어 쿼리 표시를 통해 미디어 쿼리 막대 확인 가능
  • 높이는 되도록 사용하지 않는다. (스크롤이 있으므로)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: gray;
    }

    @media screen and (max-width:1024px) {
        body {
            background-color: blue;
        }
    }
</style>

<body>

</body>

</html>
  • 1024 이상

 

  • 1024 이하

 

  • 가로 보기에서 블루
    • 가로
      • orientation
    • 세로
      • portrait
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        body {
            background-color: gray;
        }

        @media screen and (orientation:landscape) {
            body {
                background-color: blue;
            }
        }
    </style>

    <body>

    </body>

    </html>

 

플렉스 박스 레이아웃

  • 웹 요소를 가로로 배치하다가 화면에 가득 차면 아래로 내려서 다시 옆으로 배치하는 방식
  • 배치 방향, 정렬을 바꿀 수 있음
  • 속성
    • justify-content
      • 주축의 정렬 방법
    • align-items
      • 교차축의 정렬 방법
    • align-content
      • 교차축에 여러 줄로 표시할 때 사용하는 정렬 방법
  • display 속성
    • flex
      • 블록 레벨
    • inline-flex
      • 인라인 레벨
  • flex-direction
    • row
      • 주축은 가로, 왼쪽에서 오른쪽 정렬
      • 디폴트 값
    • row-reverse
      • 주축 가로, 오른쪽에서 왼쪽
    • column
      • 주축 세로, 위에서 아래
    • column-reverse
      • 주축 세로, 아래에서 위
  • 컨테이너 주축 방향
    • flex-direction
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            background-color: #eee;
            border: 1px solid #222;
            margin-bottom: 30px;
        }

        .box {
            width : 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            margin: 5px;
            background-color: gray;
        }
        .box:nth-child(2n) {
            background-color: green;
        }
        
        .box:nth-child(2n+1){
            background-color: orange;
        }

        #opt1 { flex-direction: row; }
        #opt2 { flex-direction: row-reverse; }
        #opt3 { flex-direction: column; }
        #opt4 { flex-direction: column-reverse; }

    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box">3</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div class="container" id="opt2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div class="container" id="opt3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div class="container" id="opt4">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

 

  • 플렉스의 항목 줄 바꿈
    • flex-wrap
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            display: flex;
            background-color: #eee;
            border: 1px solid #222;
            margin-bottom: 30px;
        }

        .box {
            width : 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            margin: 5px;
            background-color: gray;
        }
        .box:nth-child(2n) {
            background-color: green;
        }
        
        .box:nth-child(2n+1){
            background-color: orange;
        }

        #opt1 { flex-wrap: nowrap; }
        #opt2 { flex-wrap: wrap; }
        #opt3 { flex-wrap: wrap-reverse; }

    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    </body>
</html>

 

  • 배치 방향과 줄 바꿈을 한 번에
    • flex-flow
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            display: flex;
            background-color: #eee;
            border: 1px solid #222;
            margin-bottom: 30px;
        }

        .box {
            width : 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            margin: 5px;
            background-color: gray;
        }
        .box:nth-child(2n) {
            background-color: green;
        }
        
        .box:nth-child(2n+1){
            background-color: orange;
        }

        #opt1 { flex-flow: row wrap; }
        #opt2 { flex-flow: row nowrap; }

    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    </body>
</html>

 

  • 주축 방법을 지정
    • justify-content
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            display: flex;
            background-color: #eee;
            border: 1px solid #222;
            margin-bottom: 30px;
        }

        .box {
            width : 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            margin: 5px;
            background-color: gray;
        }
        .box:nth-child(2n) {
            background-color: green;
        }
        
        .box:nth-child(2n+1){
            background-color: orange;
        }

        #opt1 { justify-content: flex-start; }
        #opt2 { justify-content: flex-end; } 
        #opt3 { justify-content: center; }
        #opt4 { justify-content: space-between; }
        #opt5 { justify-content: space-around; }
        #opt6 { justify-content: space-evenly; }

    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    
    <div class="container" id="opt3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    
    <div class="container" id="opt4">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    
    <div class="container" id="opt5">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    
    <div class="container" id="opt6">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    </body>
</html>

 

 

메모

  • margin을 0 auto로 주게 되면 브라우저에서 가운데 정렬이 됨
  • 컨텐츠 사이 스크롤
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        #box1{
            background-color: red;
        }
        #box2{
            background-color: blue;
        }
        #box3{
            background-color: orange;
        }
        #container{
            height: 150px;
            width: 500px;
            border: 1px solid black;
            overflow: hidden;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <h1>헤더</h1>
    <div id = "container">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </div>
    <h1>푸터</h1>
</body>
</html>

 

  • display
    • none
    • block
    • inline-block
    • inline
      • width, height 적용 안됨
      • margin은 좌우만 적용
  • 차이점
    • display : none
      • 영역도 사라짐
    • visibility : hidden
      • 영역은 남음
  • MCP
    • AI가 외부 도구나 협업 툴을 연계해서 사용할 수 있게 함
728x90
반응형

'FrontEnd' 카테고리의 다른 글

5/15 - JavaScript 문법  (1) 2025.05.17
5/14 - flex, 반응형 웹 속성, CSS 그리드 레이아웃, 자바 스크립트  (0) 2025.05.17
5/12 - CSS  (0) 2025.05.17
5/9 - HTML 태그, CSS 기본  (4) 2025.05.11
5/8 - 웹  (1) 2025.05.11

관련글

티스토리툴바