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

1

범쌤

지식공유자

css는 cascading style sheets의 줄임말입니다! 여기서 cascading은 위에서 아래로 떨어지는 규칙을 가지고있다는 뜻이에요~!

동일한 선택자를 잡고 색상을 다르게 줄 경우 제일 밑에 있는 선택자에게 우선순위가 높게 설정되어 스타일링이 적용이 됩니다^^

ex)

.box{

background:red;

}

.box{

background:orange;

}

* box에겐 orange가 적용이 됩니다.

1

Gyucheol Sim

질문자

아 해결했습니다!

찬찬히 순서 살펴보니 클래스 이름이 잘못들어가있었네요.

순서도 중요하군요.. 감사합니다!

1

범쌤

지식공유자

html도 위에서 아래로 읽히기 때문에

순서는 common.css 가 읽히고 그 밑으로 main.css가 들어와야 합니다 ~

그리고 공통으로 가져가야 하는 부분은 common 에 작성을 해주세요 ㅎㅎ


.profile_img {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    margin-right: 10px;
}

는 공통으로 적용될 속성이고

#header .notice .profile_img{
    width: 48px;
    height: 48px;
}

는 헤더에있는 profile_img에게만 줄 속성으로 구분을 지어준겁니다 ^_^

아직도 이미지가 크게 나오시나요?

0

Gyucheol Sim

질문자

해당 css는 main이나 common 어디에 들어가도 상관이 없는것일까요?

이게 이전에 header 부분 제작시 프로필 이미지 잡아놓은 css가 들어가있어서

header 부분의 프로필은 또 작게 나오거든요..

0

범쌤

지식공유자

안녕하세요 Gyucheol Sim 님! kindtiger입니다 :)

이미지가 크게 들어온 경우는 이미지에대한 스타일링이 적용되지 않은 문제인것 같습니다 ^_^

.profile_img img 라는 선택자를 잡고
width:100%;height:100%; 라는 css를 추가해주세요~!

.profile img {

width:100%;

height:100%;

}

*이미지에게 width와 height를 100%로 줄 경우 부모크기 만큼만 들어가라! 라는 뜻이 됩니다 :D

더 궁금한게 생기시면 언제든지 질문 남겨주세요 ^___^

감사합니다~

0

Gyucheol Sim

질문자

   <section id="wrapper">
        <div class="inner">

            <div class="left_box">
                <div class="my_name">
                    <a href="index.html">
                        <div class="profile_img"><img src="imgs/profile/rabbit.png" alt=""></div>
                        <span calss="name">규철</span>
                        <span class="icon--more"></span>
                    </a>
                </div>
                <ul class="list">
                    <li>
                        <a href="index.html">
                            <span class="icon icon--news"></span>뉴스피드 <span class="icon--more"></span>
                        </a>
                    </li>
                    <li>
                        <a href="messenger.html">
                            <span class="icon icon--messenger"></span>Messenger <span class="icon--more"></span>
                        </a>
                    </li>
                    <li>
                        <a href="save.html">
                            <span class="icon icon--save"></span>저장됨 <span class="icon--more"></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section>

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;
}

인프런 커뮤니티 질문&답변