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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/98.css"> <title>Hello!</title> <style> html { cursor: url(치이카와.cur), auto; } .container{ display: grid; grid-template-areas: 'header header' 'side content' 'footer footer'; grid-template-rows: 150px 1fr 100px; grid-template-columns: 30% 70%; } .item { padding: 50px; } body { padding: 0px; margin: 0 auto; background-image: url(bg.gif); } .sbody { margin: 0 auto; width: 100%; grid-area: side; } .menu { width: 41%; margin-top: 3%; margin-left: 40%; } .main { margin-top: 50px; grid-area: content; width: 80%; } ul li { padding: 4px; font-size: 9pt; width: 30px; } summary { padding: 4px; font-size: 9pt; width: 60px; } .sub { width: 30px; font-size: 1em; cursor: pointer; } .profile { width: 40%; margin-left: 40%; } p { display: flex; align-items: center; font-size: 1.1em; font-weight: bolder; } .window-body img { max-width: 100%; max-height: 100%; } /* 아이패드 프로 */ @media screen and (min-width:1024px) and (max-width:1199px) { .sbody { width: 96%; } .main { width: 78%; } } /* 태블릿 */ @media screen and (min-width:768px) and (max-width:1023px) { .item { padding: 0px; } body { padding: 0px; } .sbody { margin: 0 auto; width: 110%; grid-area: side; } .main { margin-top: 0px; } } /* 핸드폰 */ @media screen and (max-width:767px) { .container{ display: grid; grid-template-areas: 'header' 'side' 'content' 'footer'; grid-template-rows: 0px 1fr; grid-template-columns: 100%; } .sbody { width: 70%; } .menu { width: 100%; margin-top: 0%; margin-left: 0%; } .main { margin: 0 auto; width: 80%; margin-top: 0px; } .profile { width: 40%; margin-left: 40%; display: none; } } </style> </head> <body> <div class="container"> <section> <div class="item header"></div> </section> <section class="item sbody"> <div class="window profile"> <div class="title-bar"> <div class="title-bar-text">profile</div> <div class="title-bar-controls"> <button aria-label="Close"></button> </div> </div> <div class="window-body"> <div class="field-row-stacker"> <img src="profile.png" /> <br/> <p> <img src="star.png" style="width: 10%;" /> <b>김민정</b> </p> 안녕 반가워 ㅋㅋ <br/><br/> </div> </div> </div> <div class="menu"> <ul class="tree-view"> <div style="color: #ccc; pointer-events: none;">카테고리</div> <li><a href="main.html">Home</a></li> <li><a href="">Notice</a></li> <li><a href="">Diary</a></li> <ul> <li class="sub"><a href="">2024</a></li> </ul> <hr/> <details open> <summary>Review</summary> <ul> <li class="sub"><a href="">Movie</a></li> <li class="sub"><a href="">Drama</a></li> <li class="sub"><a href="">Game</a></li> <li class="sub"><a href="">Webtoon</a></li> </ul> </ul> </div> </section> <div class="window main"> <div class="title-bar"> <div class="title-bar-text">Hello!</div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Maximize"></button> <button aria-label="Close"></button> </div> </div> <div class="window-body"> <div class="field-row-stacked"> <img width="100%" src="4.jpg" /> </div> </div> </div> <section> <div class="item footer"></div> </section> </div> </body> </html> | cs |
### PC ###
###아이패드 6세대###
가로
세로
### 핸드폰 아이폰mini 12 ###
다른 페이지도 넣으려 했는데 레이아웃만 건드려도 어려워서 안 넣었어요......
홈페이지 들어가면 마우스 커서도 변경되게 css 넣어봤습니다
첫댓글 재미난 주제로 잘 만드셨군요.
반응형 화면이 표시될수 있도록 영상을 찍었으면 더 보기 좋았을것 같습니다. 수고하셨어요