box-sizing과 position 속성을 이용해서 위 사진같은 검색창을 만들어 보자.
▶box-sizing과 position에 대해서는 이쪽으로 참고
# 구현 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
* {
box-sizing: border-box;
}
input {
width: 100%;
border: 1px solid #bbb;
border-radius: 8px;
padding: 10px 12px 10px 12px;
font-size: 14px;
}
img {
position: absolute;
width: 17px;
top: 10px;
right: 12px;
margin: 0;
}
div {
position: relative;
width: 300px;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="검색어 입력">
<img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
</div>
</body>
</html>1. html 구조
- type이 text이고 placeholder가 "검색어 입력"인
<input>태그를 추가한다. <img>태그를 추가한다.- 두 개의 요소를 감싸는
<div>태그를 추가한다.
2. input 태그
- div 크기에 딱 맞게 하기 위해 가로 사이즈를 100%로 지정한다.
- 테두리 두께는 1px, 색깔은 #bbb 이다.
- 테두리 반경은 8px 이다.
- 테두리 내부 여백은 위/오/아래/왼: 10px 12px 10px 12px 이다.
- 글씨 크기는 14px 이다.
3. div 태그
input 태그와 img 태그의 부모 요소다.
- 이미지는 해당 부모에 상대적으로 위치해야 하므로
position: relative;값을 추가한다. - 가로는 300px로 지정한다.
4. img 태그
- div 요소에 대해 절대적인 위치에 있어야 하므로
position: absolute;값을 추가한다. - 이미지 크기는 17px 이다.
- 이미지의 위치는 부모의 요소에 대해 위에서 10px, 오른쪽에서 12px 이다.
- 브라우저에 img에 자동으로 margin 값이 적용됐으므로 따로 margin: 0; 을 추가한다.
backend developer 🐌