Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags
more
Archives
Today
Total
관리 메뉴

고마구의 개발 블로그

240607 7주차 금요일 - CSS 03 본문

KDT풀스택과정 공부

240607 7주차 금요일 - CSS 03

고마구 2024. 6. 7. 10:49

flexbox
grid 인강찾아듣기

Responsive Web Design Grid (w3schools.com)

.row::after {
  content: "";
  clear: both;
  display: table;
}

Responsive Web Design Media Queries (w3schools.com)

W3Schools Tryit Editor

 

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

 

모바일일때랑 화면 구성 다르게 함

    <style>
        .flex-container{
            display: flex;
            background-color: aquamarine;
            flex-wrap: wrap;
            justify-content: center;
            flex-direction: row;
        }

        .flex-container > div {
            background-color: #f1f1f1;
            margin: 20px;
            padding: 10px;
            font: size 30px;
            text-align: center;
            width: 100px;
            line-height: 75px;
        }
        @media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
    </style>
</head>
<body>
    <div class="flex-container">

기본 하나의 열, 여러행에 메뉴들이 들어감, 너비가 800px이상 커질경우 메뉴들이 여러개의 열, 하나의 행으로 전환됨