2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
안녕하세요. 코딩애플님. 강의 잘 듣고 있습니다:) 모바일 화면 이상으로 커지면, 아래 세부정보 부분이 하나의 row로 합쳐지면서 우측으로 갔으면 좋겠는데, 해결 되지 않습니다. 어떻게 하면 좋을까요? 감사합니다.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="css/main.css" rel="stylesheet"> <link href="fontawesome/fontawesome/css/all.min.css" rel="stylesheet"> <title>das profile</title> </head> <body style="background:#f7f9fc;"> <div class="main-back"> <div class="container white-box"> <div class="row d-md-flex"> <div class="col-5 col-md-3"> < img src="profile-pic.png"> </div> <div class="col-7 col-md-3"> <h3>Killan Sven</h3> <p>Front-end Designer</p> <p>서울 마포구</p> <button type="button" class="btn back-blue">Primary</button> </div> </div> <br><br> <div class="bottom-content"> <div class="row"> <div class="col-1 col-md-0"></div> <div class="col-4 col-md-2">Location</div> <div class="col-7 col-md-3">서울 마포구</div> </div> <div class="row d-md-flex"> <div class="col-1 col-md-0"></div> <div class="col-4 col-md-2">Age</div> <div class="col-7 col-md-3">90년생</div> </div> <div class="row d-md-flex"> <div class="col-1"></div> <div class="col-4 col-md-2">Experience</div> <div class="col-7 col-md-3">신입</div> </div> <div class="row d-md-flex"> <div class="col-1"></div> <div class="col-4 col-md-2">School</div> <div class="col-7 col-md-3">천조국대 토목학과</div> </div> </div> <br> </div> <div class="container white-box"> <h3>WORKS</h3> <P>Landing page design</P> <P>Flyer design</P> <P>Vue.js To-do app</P> <P>Shopping page design</P> </div> <div class="container white-box"> <h3>ABOUT</h3> <P>I am a fron-end designer who is excellent at Bootstrap, Sass, Foundation.</P> <p>I have dealt lots of in-house design works and outsource things. If you want to check my portfolio, please visit Kiliansven.com</p> <br> <hr> <h3>SKILLS</h3> <span class="pill">html</span> <span class="pill">javascript</span> <span class="pill">css</span> <span class="pill">illustration</span> <span class="pill">photoshop</span> <br><br> </div> <div class="container white-box" style="text-align: center;"> <i class="fa-solid fa-fire-flame-simple fa-3x fire-img"></i> <p>Find me at Linkedout.coms</p> <button type="button" class="btn back-blue">Sign Up</button> <p style="color:#6fbaf8">Already a member?</p> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>
.white-box{ background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0.5px 0.5px 2px 1px; margin:10px; } .pill{ display:inline-block; border: 1px solid lightgray; border-radius: 100px; padding : 3px 12px 5px 12px; margin-right: 2px; margin-bottom: 5px; } .back-blue{ background-color: #6fbaf8 ; color : white; } .fire-img{ color : #6fbaf8; } .p{ font-family: gulim; } .bottom-content div{ font-family: gulim; font-weight: bold; padding-top: 5px; }
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.