티스토리 뷰
오늘은 구글링을 통해서 발품을 많이 팔았다.
그런데 만족할 만한 결과는 얻지 못했다.
목표는 이랬다.
구글 검색창처럼 중앙에 검색필드가 있고 아래에 검색 버튼과 부가 버튼을 만드는 것.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>제목</title>
<link href="검색창.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/8eb5905426.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="search">
<i class="fas fa-search"></i>
<input type="text">
<i class="fas fa-keyboard"></i>
<i class="fas fa-microphone"></i>
</div>
<input type="button" class="box" value="검색">
<input type="button" class="box" value="검색2">
</body>
</html>HTML문서에는 이렇게 작성한 후 css 문서를 새로 작성했다.
이것도 새로 공부한 것인데 html에서 css를 불러오는 것은 총 3가지가 있다는 것을 알았다.
<p style> 이런 식으로 쓰거나
위처럼 <link href>를 통해 저장된. css를 불러오거나
@import 기능을 통해 불러오는 방법이 있었다.
아무튼 css 문서에는 다음과 같이 작성했다.
.search {
position: relative;
text-align: center;
width: 300px;
margin: auto;
}
input {
width: 100%;
border-radius: 20px;
border: 1px solid;
margin: 10px 0;
padding: 10px 12px;
}
.fa-search {
position: absolute;
left: 15px;
top: 15px;
margin: 0;
}
.fa-keyboard {
position: absolute;
right: 30px;
top: 20px;
}
.fa-microphone {
position: absolute;
right: 15px;
top: 15px;
color: black;
}
.box {
display: inline;
width: auto;
border-radius: 0;
margin: auto;
text-align: center;
color: blue;
}그랬더니...
버튼이 왼쪽에 처박혀 있다.
그래서
.button {
position: absolute;
position: relative;
margin: auto;
}을 추가해 봤다.
네. 허튼짓이었고요
돌이켜 확인해 보니. button이 아니라 class로 선언한. box가 그 역할을 하고 있다고 보였다.
즉, "모든 버튼"의 크기를 조절하려고 하는 게 아니라 검색 박스만 조절하려고 하는 것인데 내가 하는 행동은 모든 버튼을 조절하려고 했던 것 같다.
물론 이 방식도 먹히라면 먹히겠지만 내가 원하는 목표는 아니다.
따라서
.box {
text-align: center;
color: blue;
position: absolute;
position: relative;
left: center;
right: center;
}다음의 방법을 사용했다.
그랬더니...
거의 다 왔다.
하지만 이것도 내가 원하는 것은 아니다.
그 이후에. box의 내용물을 이리저리 바꾸었지만 결과는 같거나 왼쪽으로만 정렬되었다.
이러기를 30분간 반복한 끝에 배고픔을 이기지 못하고 GG...
그래도 찾아가면서 별 희한한 방법도 다 있구나 공부가 된 것 같다.
클론 코딩이라고 아예 오른쪽클릭-검사 한 코드 내용을 싹 복사해서 붙여버리는 방법도 있던데
다음엔 이 방법으로 시도하면서 알아가볼까 싶다.
'코딩 공부 > HTML,CSS' 카테고리의 다른 글
| 고정된 사이드메뉴를 만들려고 애를 썼다. [HTML/CSS] (0) | 2023.03.19 |
|---|---|
| 버튼, 새 창 열기, 입력 필드 [HTML/CSS] (0) | 2023.03.16 |
| HTML 연습 (0) | 2023.03.15 |