-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
안녕하세요 개시부분이 이상해서요
19.11.23 10:34 작성 조회수 139
1
body{
background: #fafafa;
}
.m_text{
font-size: 14px;
font-weight: bold;
}
.s_text{
font-size: 12px;
}
.sprite_insta_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -53px -235px;
width: 22px;
height: 22px;
}
.sprite_write_logo {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -94px -72px;
width: 103px;
height: 29px;
}
.sprite_compass_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -130px -286px;
width: 23px;
height: 23px;
}
.sprite_user_icon_outline {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -272px -182px;
width: 22px;
height: 24px;
}
.sprite_heart_icon_outline {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -52px -261px;
width: 24px;
height: 22px;
}
.sprite_small_search_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -337px -246px;
width: 10px;
height: 10px;
}
.sprite_more_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -301px -218px;
width: 15px;
height: 3px;
}
.sprite_bubble_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -239px -202px;
width: 24px;
height: 24px;
}
.sprite_share_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -324px -52px;
width: 21px;
height: 24px;
}
.sprite_bookmark_outline {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -237px -286px;
width: 19px;
height: 24px;
}
.sprite_bookmark_outline.on {
background: url('../imgs/background01.png') no-repeat -159px -286px;
width: 19px;
height: 24px;
}
.sprite_small_heart_icon_outline {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -323px -274px;
width: 12px;
height: 11px;
}
.sprite_camera_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -271px -104px;
width: 24px;
height: 22px;
}
.sprite_insta_big_logo {
display: inline-block;
background: url('../imgs/background02.png') no-repeat -98px -150px;
width: 175px;
height: 51px;
}
.sprite_plus_icon {
display: inline-block;
background: url('../imgs/background01.png') no-repeat -187px -202px;
width: 23px;
height: 23px;
}
#header{
width:100%;
position:absolute;
left:0;
top:0;
z-index:999;
background:white;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
#header .inner{
width:975px;
height:75px;
margin:0 auto;
display:flex;
justify-content: space-between;
align-items: center;
}
#header .inner a{
color:transparent;
}
#header .inner .logo .sprite_insta_icon{
margin-right:25px;
position:relative;
}
#header .inner .logo .sprite_insta_icon:after{
content: '';
width:1px;
height:25px;
background:black;
left:40px;
top:0;
position:absolute;
}
#header .inner .logo div:nth-child(2){
transform:translateY(9px);
}
#search_field{
width:270px;
height:25px;
background:#fafafa;
border:1px solid #dbdbdb;
border-radius: 3px;
text-align:left;
outline:none;
padding:3px 30px;
color:#999;
font-weight:400;
font-size:14px;
}
#header .search_box{
position:relative;
}
#header .search_box .fakefield{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
pointer-events: none;
}
#search_field::placeholder{
font-size:0;
}
#search_field:focus::placeholder{
font-size:14px;
}
#search_field:focus ~ .fakefield > span:nth-child(1){
transform:translateX(-150px);
}
#search_field:focus ~ .fakefield > span:nth-child(2){
display:none;
}
#header .right_icons{
width:85px;
display:flex;
justify-content: space-between;
}
#main_container{
padding-top:130px;
/* //마진을 주면 병합 현상이 일어날수 있음 */
display:flex;
justify-content: center;
/* x축으로 가운대 정렬 */
}
#main_container .inner{
width:935px;
}
.contents{
width:614px;
border:1px solid rgba(0,0,0,0.1);
border-radius:3px;
margin-bottom:60px;
background:white;
}
.contents .top{
display:flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.contents .top .profile_img{
width:32px;
height:32px;
border-radius:50%;
overflow:hidden;
margin-right:15px;
}
.contents .top .profile_img img{
width:100%;
}
.contents .top .user_container{
display:flex;
}
.contents .img_section{
overflow:hidden;
}
.contents .img_section img{
width:100%;
}
.contents .bottom_icons{
display:flex;
justify-content: space-between;
align-items: center;
padding:10px 20px;
}
.contents .bottom_icons .left_icons{
display:flex;
}
.contents .bottom_icons .left_icons > div{
margin-right:10px;
}
.contents .likes{
padding: 5px 20px;
color:#262626;
}
.contents .comment_container{
display:flex;
justify-content: space-between;
align-items: center;
padding:3px 20px;
}
.comment_container .comment{
display:flex;
font-size:14px;
}
.comment_container .comment div:nth-child(2){
transform:translateY(-1.5px);
}
.comment_container .comment .nickName{
margin-right:5px;
}
.contents .timer{
font-size:10px;
letter-spacing: 0.2px;
color: #999;
border-bottom: 1px solid rgba(0,0,0,0.1);
padding: 10px 20px;
}
}
.contents .comment_field{
min-height:56px;
padding: 0 20px;
position: relative;
}
.contents .comment_field input{
width: 100%;
height: 56px;
border: none;
outline: none;
background:transparent;
}
.contents .comment_field .upload_btn{
color:#3897f0;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
pointer-events:none;
opacity: 0.6;
}
//css부분
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<section id="container">
<header id="header">
<section class="inner">
<h1 class="logo">
<a href="index.html">
<div class="sprite_insta_icon"></div>
<div class="sprite_write_logo"></div>
</a>
</h1>
<div class="search_box">
<input type="text" placeholder="검색" id="search_field">
<div class="fakefield">
<span class="sprite_small_search_icon"></span>
<span>검색</span>
</div>
</div>
<div class="right_icons">
<div class="sprite_compass_icon"></div>
<div class="sprite_user_icon_outline"></div>
<div class="sprite_heart_icon_outline"></div>
</div>
</section>
</header>
<section id="main_container">
<div class="inner">
<div class="contents_box">
<article class="contents">
<header class="top">
<div class="user_container">
<div class="profile_img">
<img src="imgs/7.jpg" alt="프로필 사진">
</div>
<div class="user_name">
<div class="nickName m_text">
hanjae
</div>
<div class="country s_text">Seoul, South Korea</div>
</div>
</div>
<div class="sprite_more_icon"></div>
</header>
<div class="img_section">
<div class="trans_inner">
<div><img src="imgs/img_section/11.jpg" alt="이미지"></div>
</div>
</div>
<div class="bottom_icons">
<div class="left_icons">
<div class="heart_button">
<div class="sprite_heart_icon_outline"></div>
</div>
<div class="sprite_bubble_icon"></div>
<div class="sprite_share_icon"></div>
</div>
<div class="right_icons">
<div class="sprite_bookmark_outline"></div>
</div>
</div>
<div class="likes m_text">
좋아요
<span class="count">2,346 </span> 개
</div>
<div class="comment_container">
<div class="comment">
<div class="nickName m_text">
jae
</div>
<div>해위</div>
</div>
<div class="small_heart">
<div class="sprite_small_heart_icon_outline"></div>
</div>
</div>
<div class="timer">
1시간 전..
</div>
<div class="comment_field">
<input type="text" placeholder="댓글 달기.." >
<div class="upload_btn m_text">게시</div>
</div>
</article>
</div>
</div>
</section>
</section>
</body>
</html>
html 부분인데
개시버튼이
이렇게 떠가지구요...
답변을 작성해보세요.
0
범쌤
지식공유자2019.11.26
안녕하세요 kindtiger입니다 :)
코드를 보니 특별한 문제는 없어보이네요 ㅠㅠ..
전체코드를 확인해봐야 알 수 있을것 같습니다,
깃헙이 있으시다면 저장소에 올려주시고 링크남겨주세요 ^^&
깃헙이용이 어려우시다면 파일을 보내주시면 확인해보고 답변드리도록 하겠습니다 ^^
seonbeom2@gmail.com
답변 1