미디어 쿼리 질문입니다.

아 해결했습니다! console에 노란불 들어온거 보고 찾아서 틀린부분 수정했어요. 그리고 새로고침 전까지는 반영이 안되는게 맞는건가요?

left box 따라가는데 질문입니다.

아 해결했습니다! 찬찬히 순서 살펴보니 클래스 이름이 잘못들어가있었네요. 순서도 중요하군요.. 감사합니다!

left box 따라가는데 질문입니다.

해당 css는 main이나 common 어디에 들어가도 상관이 없는것일까요? 이게 이전에 header 부분 제작시 프로필 이미지 잡아놓은 css가 들어가있어서 header 부분의 프로필은 또 작게 나오거든요..

left box 따라가는데 질문입니다.

(사진) 규철 뉴스피드 Messenger 저장됨 body { background-color: #e9ebee; color: #1d2129; font-family: 'Nanum Gothic', sans-serif; } .icon:hover { opacity: 1; } .icon { margin-right: 10px; } .icon--send { display: inline-block; background: url('../imgs/bg04.png') no-repeat -433px -246px; width: 18px; height: 16px; } .icon--main-logo { display: inline-block; background: url('../imgs/bg03.png') no-repeat 0 -33px; width: 24px; height: 24px; } .icon--news { display: inline-block; background: url('../imgs/bg01.png') no-repeat -1px -964px; width: 18px; height: 18px; } .icon--picture { display: inline-block; background: url('../imgs/bg01.png') no-repeat -1px -1090px; width: 19px; height: 18px; } .icon--messenger { display: inline-block; background: url('../imgs/bg01.png') no-repeat 0 -249px; width: 20px; height: 20px; } .icon--save { display: inline-block; background: url('../imgs/bg01.png') no-repeat -1px -396px; width: 16px; height: 20px; } .icon--search-black { display: inline-block; background: url('../imgs/bg02.png') no-repeat 0 -949px; width: 14px; height: 14px; } .icon--search-white { display: inline-block; background: url('../imgs/bg02.png') no-repeat 0 -964px; width: 14px; height: 14px; } .icon--people-black { display: inline-block; background: url('../imgs/bg02.png') no-repeat -2px -791px; width: 20px; height: 18px; opacity: .6; } .icon--people-white { display: inline-block; background: url('../imgs/bg02.png') no-repeat -2px -766px; width: 20px; height: 18px; } .icon--bell-black { display: inline-block; background: url('../imgs/bg02.png') no-repeat -3px -188px; width: 20px; height: 24px; opacity: .6; } .icon--question-black { display: inline-block; background: url('../imgs/bg03.png') no-repeat -2px -135px; width: 20px; height: 20px; opacity: .6; } .icon--question-white { display: inline-block; background: url('../imgs/bg03.png') no-repeat 0 -313px; width: 20px; height: 20px; } .icon--messenger--black { display:inline-block; background: url('../imgs/bg02.png') no-repeat 0 -13px; width: 24px; height: 24px; opacity: .6; } .icon--chart--black { display:inline-block; background: url('../imgs/bg06.png') no-repeat -104px -2440px; width: 28px; height: 17px; opacity: .6; } .icon--facebook-white { display: inline-block; background: url('../imgs/bg03.png') no-repeat 0 -33px; width: 24px; height: 24px; } .icon--more { display: inline-block; background: url('../imgs/bg03.png') no-repeat -2px -300px; width: 16px; height: 4px; } .icon--comment-line { display: inline-block; background: url('../imgs/bg04.png') no-repeat -414px -246px; width: 17px; height: 17px; } .icon--share-line { display: inline-block; background: url('../imgs/bg04.png') no-repeat -433px -246px; width: 18px; height: 16px; } .icon--write-gray { display: inline-block; background: url('../imgs/bg04.png') no-repeat -206px -282px; width: 12px; height: 12px; } .icon--like-line { display: inline-block; background: url('../imgs/bg05.png') no-repeat -38px -422px; width: 18px; height: 18px; } .icon--like-fill { display: inline-block; background: url('../imgs/bg05.png') no-repeat 0 -422px; width: 17px; height: 18px; } .icon--arrow-right { display: inline-block; background: url('../imgs/bg06.png') no-repeat -136px -2433px; width: 16px; height: 30px; } .icon--arrow-top { display: inline-block; background: url('../imgs/bg06.png') no-repeat -1px -2466px; width: 30px; height: 16px; } #header { width: 100vw; background-color: var(--fds-fb-blue-70); position: fixed; left: 0; top: 0; z-index: 999; } #header .inner { height: 42px; width: 1012px; margin: 0 auto; padding-right: 205px; /*background: red;*/ display: flex; justify-content: space-between; align-items: center; } #header .inner .left { display: flex; } #header .inner .left h1 { margin-right: 10px; } #header .inner .left h1 > a{ display: block; width: 100%; height: 100%; } #header .inner .left .search_container { width: 380px; height: 23px; background: #fff; position: relative; } #header .inner .left button { position: absolute; right: -20px; padding: 4px 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; } .profile_img { display: inline-block; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #fff; margin-right: 10px; } .profile_img img { width: 100%; height: 100%; } #search_box { border: none; border-radius: 3px; width: 100%; /*height: 23px;*/ padding: 5px 10px; } #search_box::placeholder { color: gray; text-indent: 5px; } #header .inner .right { display: flex; font-size: 12px; font-weight: bold; color: #fff; align-items: center; } #header .inner .right > div { position: relative; margin-left: 20px; cursor: pointer; } #header .inner .right .my_name { display: flex; align-items: center; } #header .inner .right > div:after { content: ''; width: 1px; height: 18px; position: absolute; right: -10px; top: 50%; margin-top: -9px; background: var(--press-overlay); } #header .inner .right > div:last-child:after { display: none; } #header .right .icon{ margin-right: 0; } #header .icon--bell-black{ position: relative; } #header .bell:before{ content: '1'; color: #fff; background: var(--notification-badge); display: flex; align-items: center; justify-content: center; width: 11px; height: 11px; border-radius: 50%; font-size: 10px; position: absolute; right: -3px; top: -3px; z-index: 100; } #header .notice{ width: 432px; background: #fff; position: absolute; right: -16px; top: 34px; z-index: 1000; border: 1px solid rgba(100, 100, 100, .4); border-radius: 0 0 2px 2px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); color: #1d2129; display: none; } #header .notice .icon--arrow-top{ position: absolute; top: -16px; right: 10px; } #header .notice h3{ font-size: 12px; color: #333; padding: 8px 12px 6px; border-bottom: solid 1px #dddfe2; } #header .notice > ul{ overflow-x: hidden; overflow-y: scroll; max-height: 500px; } #header .notice > ul > li{ padding: 10px 12px; font-weight: 300; border-bottom: 1px solid #dddfe2; } #header .notice > ul > li > a{ display: flex; align-items: center; } #header .notice > ul > li:hover{ background-color: #edf2fa; } #header .notice .profile_img{ width: 48px; height: 48px; } #header .notice > ul > li .name{ font-weight: bold; } #header .notice > ul > li .time{ color: #90949c; margin-top: 10px; }