고마구의 블로그
240607 7주차 금요일 본문
flexbox
grid 인강찾아듣기
Responsive Web Design Grid (w3schools.com)
.row::after {
content: "";
clear: both;
display: table;
}
Responsive Web Design Media Queries (w3schools.com)
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이상 커질경우 메뉴들이 여러개의 열, 하나의 행으로 전환됨
'KDT풀스택과정 공부' 카테고리의 다른 글
| 240611 8주차 화요일 (0) | 2024.06.11 |
|---|---|
| 240610 8주차 월요일 -자바스크립트 (0) | 2024.06.10 |
| 240605 7주차 수요일 (0) | 2024.06.05 |
| 240604 7주차 화요일 (0) | 2024.06.04 |
| 240603 7주차 월요일 (0) | 2024.06.03 |
'KDT풀스택과정 공부' Related Articles
more
