HTML가 순서대로 작성한 코드대로 화면에 보여졌다면,
CSS의 Position 속성은 원하는 요소에 위치를 지정(속성:top, bottom, left, right)할 수 있다.
Position의 사용값은 5가지이다.
- static : 기본값
- relative : 기본 위치에서 상대적으로 배치
- absolute : 가장 가까운 상위 요소 기준으로 배치
- fixed : 지정된 위치에 고정
- sticky : 스크롤시 상위 요소 기준으로 지정된 위치에 고정
아래 이미지를 구현
1. HTML 구조
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</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>
- <input> 태그로 검색어 입력창을, <img> 태그로 돋보기 이미지를 추가한다.
- 두 개의 요소를 <div>로 감싸준다.
2. 스타일링
[CSS]
div {
position: relative; → parents
width: 300px;
}
input {
width: 100%;
border: 1px solid #bbb;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
}
img {
position: absolute; → child
width: 17px;
top: 10px;
right: -12px;
margin: 0;
}
- 검색 입력창을 스타일링한다.
- div position을 부모로 지정한다.
- 돋보기 이미지를 자식으로 지정하여 부모 요소를 기준으로 위치를 설정한다.
'Language > HTML&CSS' 카테고리의 다른 글
| [CSS] 티스토리 Poster 스킨 메뉴바 고정하기 (0) | 2024.03.03 |
|---|---|
| [HTML] 자주 사용하는 태그 (div, p, span 차이) (0) | 2023.06.29 |
| [HTML] Semantic Web, Semantic Tag : 의미론적 웹과 의미론적 태그 (0) | 2023.06.17 |
