-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
left box 따라가는데 질문입니다.
20.04.15 12:15 작성 조회수 118
0
완전 처음배워서 우선 따라하며 익히려 따라가는 중입니다.
left box 제작중에 my_name 이미지 경로 불러온뒤 확인을 했는데 사이즈가 엄청 크게 들어가있네요.
어떤 부분이 잘못됐는지 혼자 찾기가 어려울 것 같아 어느부분 검토를 해보면 좋을지 조언 부탁드릴게요 ㅠ
답변을 작성해보세요.
1
범쌤
지식공유자2020.04.15
css는 cascading style sheets의 줄임말입니다! 여기서 cascading은 위에서 아래로 떨어지는 규칙을 가지고있다는 뜻이에요~!
동일한 선택자를 잡고 색상을 다르게 줄 경우 제일 밑에 있는 선택자에게 우선순위가 높게 설정되어 스타일링이 적용이 됩니다^^
ex)
.box{
background:red;
}
.box{
background:orange;
}
* box에겐 orange가 적용이 됩니다.
1
1
범쌤
지식공유자2020.04.15
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
질문자2020.04.15
해당 css는 main이나 common 어디에 들어가도 상관이 없는것일까요?
이게 이전에 header 부분 제작시 프로필 이미지 잡아놓은 css가 들어가있어서
header 부분의 프로필은 또 작게 나오거든요..
0
범쌤
지식공유자2020.04.15
안녕하세요 Gyucheol Sim 님! kindtiger입니다 :)
이미지가 크게 들어온 경우는 이미지에대한 스타일링이 적용되지 않은 문제인것 같습니다 ^_^
.profile_img img 라는 선택자를 잡고
width:100%;height:100%; 라는 css를 추가해주세요~!
.profile img {
width:100%;
height:100%;
}
*이미지에게 width와 height를 100%로 줄 경우 부모크기 만큼만 들어가라! 라는 뜻이 됩니다 :D
더 궁금한게 생기시면 언제든지 질문 남겨주세요 ^___^
감사합니다~
0
Gyucheol Sim
질문자2020.04.15
<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;
}
답변 6