-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
fake_field가 input안에 안들어가요..
19.10.19 15:48 작성 조회수 93
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
</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="fake_field">
<span class="sprite_small_search_icon"></span>
<span>검색</span>
</div>
</div>
<div class="right_icons">
<div class="sprite_camera_icon"></div>
<div class="sprite_compass_icon"></div>
<div class="sprite_heart_icon_outline"></div>
<div class="sprite_user_icon_outline"></div>
</div>
</section>
</header>
</section>
</body>
</html>
------------------------------
.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;
}
body{
background: #fafafa;
}
#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: 77px;
margin: auto;
display:flex;
justify-content: space-between;
align-items: center;
}
#header .inner .logo > a {
color: transparent;
}
#header .inner .logo .sprite_insta_icon {
position: relative;
margin-right: 30px;
}
#header .inner .logo .sprite_insta_icon:after{
/* :을 찍으면 가상선택자 after는 그 후에 뭔가를 만들겠다. 콘텐츠를 받아야함.*/
content: '';
width: 1px;
height: 28px;
background: #000;
position: absolute;
right : -15px;
top : 0;
}
#header .inner .logo div{
vertical-align: middle;
}
#header .search_box{
position: relative;
}
#search-field{
width: 185px;
height: 28px;
background: #fafafa;
border: 1px solid #dbdbdb;
border-radius: 3px;
padding: 3px 30px;
color: #999;
font-weight: 400;
text-align: left;
font-size: 14px;
outline: none;
}
#header .search_box .fake_field{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
이 코드인데 문제를 찾을 수 가 없어용..
답변을 작성해보세요.
0
범쌤
지식공유자2019.10.20
안녕하세요 ^^
캡쳐해주신 화면으로는 문제가 없어보입니다~
자세한 확인을 위해 메일로 파일을 보내주시면 빠르게 확인하고 회신 드리도록 할게요 ^^~
kindtigerr@gmail.com 으로 보내주세요 ^&^
답변 1