묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
css position absolute설정 시 space-between이 실행되지 않습니다.
cssbody { height: 97vh; display: flex; justify-content: center; align-items: center; background-color: #f3f3f5; } .sedow { box-shadow: 0 0px 20px 5px rgba(128, 128, 128, 0.1); } .insedow { color: rgba(128, 128, 128, 0.7); } .white-color { color: #ffffff; } .font-weight-lg { font-weight: 600; } .screen-first { height: 170mm; width: 90mm; background-color: #ffffff; margin: 50px; border-radius: 40px; position: relative; } .screen-second { height: 170mm; width: 90mm; background-color: wheat; margin: 50px; border-radius: 40px; } .screen-first-icon_box { display: flex; justify-content: space-between; margin: 50px 25px 0; } .screen-first_profile_box { display: flex; justify-content: center; margin-top: 30px; } .screen-first_profile { height: 80px; width: 80px; background-color: orange; border-radius: 50%; box-shadow: 0 0px 15px 10px rgba(255, 180, 40, 0.3); } .screen-first_profile_name { text-align: center; font-size: x-large; font-weight: 750; margin-top: 40px; } .screen-first_profile_genre { text-align: center; font-weight: 600; color: rgba(128, 128, 128, 0.7); margin-top: 15px; } .screen-first_button-box { margin-top: 35px; display: flex; justify-content: center; } .screen-first_button-box_button1 { padding: 12px 32px; border-radius: 30px; background-color: black; color: #ffffff; margin-right: 5px; } .screen-first_button-box_button2 { padding: 12px 20px; border-radius: 30px; background-color: #ffffff; color: rgba(128, 128, 128, 0.7); margin-left: 5px; font-weight: 550; } .fa-heart { color: black; } .screen-first_song-list { justify-content: center; align-items: center; flex-direction: column; margin-top: 20px; margin-left: 15px; margin-right: 15px; } .screen-first_song-list_profile { display: flex; align-items: center; padding: 15px 25px; position: relative; border-radius: 20px; } .screen-first_song-list_profile_img { display: flex; align-items: center; justify-content: center; height: 45px; width: 45px; background-color: tomato; border-radius: 10px; } .screen-first_song-list_profile_text { margin-left: 15px; } .fa-ellipsis-vertical { color: rgba(128, 128, 128, 0.7); position: absolute; right: 20px; } .screen-first_song-list_profile_text_title { margin-bottom: 5px; font-size: small; } .fa-chart-simple { color: #ffffff; } .screen-first_music-player { display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 5px; } .screen-first_music-player { background-color: #222222; padding: 15px 30px; margin: 10px 15px; border-radius: 50px; } .screen-first_music-player_text_singer { margin-bottom: 7px; } .fa-pause { margin: 0 20px; } 추가로 reset.css 2.0도 적용하여 사용하고 있습니다./* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } 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> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/style.css" /> <script src="https://kit.fontawesome.com/3373615a5c.js" crossorigin="anonymous" ></script> </head> <body> <div class="screen-first"> <div class="screen-first-icon_box"> <i class="fa-solid fa-arrow-left fa-lg"></i> <i class="fa-solid fa-magnifying-glass fa-lg"></i> </div> <div class="screen-first_profile_box"> <div class="screen-first_profile"></div> </div> <h1 class="screen-first_profile_name">Tyler, The Creator</h1> <h4 class="screen-first_profile_genre">Rap, Hip-Hop</h4> <div class="screen-first_button-box"> <div class="screen-first_button-box_button1">Shuffle</div> <div class="screen-first_button-box_button2 sedow"> <i class="fa-solid fa-heart fa-lg"></i> 212 971 </div> </div> <ul class="screen-first_song-list"> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile sedow"> <div class="screen-first_song-list_profile_img"> <i class="fa-solid fa-chart-simple fa-xl"></i> </div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> </ul> <div class="screen-first_music-player"> <div class="screen-first_music-player_text"> <div class="screen-first_music-player_text_singer insedow"> Tyler, The Creartor </div> <div class="screen-first_music-player_text_title white-color font-weight-lg" > NOVEMBER </div> </div> <div> <i class="fa-solid fa-backward-step fa-lg white-color"></i> <i class="fa-solid fa-pause fa-2xl white-color"></i> <i class="fa-solid fa-forward-step fa-lg white-color"></i> </div> </div> </div> <!-- <div class="screen-second"></div> --> </body> </html> 이상하게 position absolute시에만 space-between이 작동하지 않습니다. 아무리 고민해보아도 원인을 파악할 수 없어 질문드립니다. ㅜㅜ
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
position:absolute에 대해
안녕하세요. 24:14언저리의 수업을 보면 absolute함수가 부모요소중 relative로 설정된 부모요소에 대한 상대적위치라고 하시면서 relative요소를 움직이시면서 보여주는데 보면 그 안에있는 general 함수가 적용된 일반요소도 같이 움직이는것이 보입니다. 부모요소가 커다란 집합체로 부모요소가 움직이면 그안에 속해있는 자식요소들도 원래 같이 움직이는거아닌가요??
-
미해결쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기
답변 부탁드립니다!
강사님! 공부하던 중에 자꾸 안되는게 있어서 질문 남깁니다ㅠㅠ 주메뉴 밑에 서브메뉴를 위치 시키려고 하는데 이럴 때 주메뉴에 position: relative를 주고 서브메뉴에 absolute를 주고 top, left 값을 주면 주메뉴를 기준점으로 두고 서브메뉴가 top, left 값 만큼 움직여야 하는걸로 알고 있었는데, relative를 준 주메뉴를 기준점으로 두는게 아니라 윈도우 맨 왼쪽상단을 기준점으로 서브메뉴가 움직입니다ㅠㅠㅠ 어떻게 수정하는게 좋을까요?
