커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
검색창을 만들다가 원리가 궁금해져서 질문드립니다!
코딩이 처음이어도 쉽게 배우는 웹개발 A to Z
기타
이*호
댓글
4
・
추천
0
・
조회수
15
조회수
15
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
1
.search{
width:300px;
position: relative;
}
.search > input {
width: 100%;
background-color: #f6f7fb;
border: none;
border-radius: 10px;
font-size: 15px;
padding: 10px 14px;
}
.search > img{
position: absolute;
width: 20px;
margin: 0;
}
right, top 값을 안주면
img -> position에 absolute를 넣어도 안으로 들어가지 않는 지 궁금해집니다!
↓ right, top 값을 준 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script>
</script>
<style>
.search{
width:300px;
position: relative;
}
.search > input {
width: 100%;
background-color: #f6f7fb;
border: none;
border-radius: 10px;
font-size: 15px;
padding: 10px 14px;
}
.search > img{
position: absolute;
width: 20px;
margin: 0;
right: 12px;
top:10px;
}
</style>
</head>
<body>
<!--상단-->
<div class="search">
<input type="text" placeholder="원하는 검색어를 입력하세요.">
<img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons-png.freepik.com%2F512%2F5069%2F5069532.png&type=sc960_832">
</div>
<!-- https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons-png.freepik.com%2F512%2F5069%2F5069532.png&type=sc960_832 -->
</body>
</html>
댓글 알림
