검색창 구현 (position - relative & absolute)

Html & Css 2021. 12. 1. 16:18

검색창의 기능은 제외하고 외형적인 부분만 구현했음에도 불구하고 정말 힘들고 시간이 오래 걸렸다.

특히나 손이 많이 가고 신경을 많이 썼던 부분 4가지를 짚고 넘어가고자 한다.

뭐든 정렬이 가장 어렵다... 미래에는 생각만 해도 컴퓨터가 자동으로 사이트를 구축해주는 날이 올지도...? 그런 날이 오기 전까지는 열심히 공부하는 수밖에 없다..!!

가장 상단의 Weegle 이미지 중앙 정렬
검색창의 아이콘 정렬
검색창을 클릭해서 커서가 반짝이는 부분을 돋보기 아이콘 뒤에 위치시키고 글자도 거기에 써지게 하는 부분
검색창 아래의 연한 회색 음영이 들어간 두개 버튼의 정렬

1. 가장 상단의 Weegle 이미지 중앙 정렬

<div class="container">
    <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" style="margin-top: 10px;">
</div>

.container {
  text-align: center;
}

img {
  width: 200px;
}

img 태그의 부모 요소에 "container"라는 클래스를 줬습니다. 여기에 text-align: center;를 하면 inline 요소인 img 태그를 중앙 정렬 할 수 있습니다.

2 & 3. 검색창의 아이콘 정렬과 검색창 커서 부분

<div class="inner">
    <input type="search">
    <div class="searching">
        <i class="fas fa-search"></i>
    </div>
    <div class="icon_ect">
        <i class="fas fa-keyboard"></i>
        <i class="fas fa-microphone"></i>
    </div>
</div>

.inner {
  position: relative;
  width: 600px;
  height: 40px;
  margin: 20px auto;
  border: 1px solid #bdc1c6;
  border-radius: 20px;
}

input {
  width: 90%;
  height: 100%;
  border-color: #bdc1c6;
  border: 0px;
  font-size: 16px;
  outline: none;
}

.searching {
  position: absolute;
  left: 10px;
  top: 20%;
}

i:hover {
  cursor: pointer;
}

.icon_ect {
  position: absolute;
  right: 10px;
  top: 20%;
}

.fa-keyboard {
  margin-right: 10px;
}

먼저 input 태그 중앙 정렬을 고민했다.

저는 위의 1번에서 container라는 클래스에 text-align: center; 를 했는데

text-align의 값은 자식 요소들에게 상속이 된다. 그래서 글 대부분에서 중앙 정렬이 쓰인다면 body 태그에 바로 적용하는 것도 좋은 방법이지 않을까 한다.

처음에는 input 태그에 바로 원하는 만큼의 width와 height 값을 줬지만 검색창의 커서 부분 때문에 input 태그의 부모 요소인 inner 클래스에 width와 height 값을 넉넉하게 주고 input 태그에는 widht 값을 90%, height: 100%;로 해서 inner 클래스 안에 위치하게 했다.

이렇게만 하면 왼쪽으로 정렬이 되어 있을건데 이 때 inner 클래스의 margin의 좌우 값에 auto를 주면 중앙 정렬이 가능해진다.

검색창 구현 관련해서 구글링을 해보니 position에 대한 글들을 많이 봤다. 이처럼 아이콘을 안에 위치하게 하려면 부모 요소에 position: relative;를 하고 해당 아이콘에 position: absolute;를 하는 것에서부터가 시작이다.

이 이후에는 top, right, bottom, left를 적용하여 원하는 위치에 위치시키면 된다.

좌측에 위치시키고자 하면 left와 top(또는 bottom)을 적용하고 반대로 우측일 경우에는 right와 top(또는 bottom)을 적용하시면 원하는 곳에 위치가 가능할 것이다.

그리고 아이콘끼리 간격을 벌리고 싶다면 해당 아이콘(fontawesome을 통한)의 클래스를 불러와서 margin 값을 적용해주면 된다.

4. 검색창 아래의 2개 버튼의 정렬

<div>
    <input type="submit" value="Weegle 검색" class="weegle_inner"></input>
    <input type="submit" value="I'm feeling Lucky" class="weegle_inner"></input>
</div>

.weegle_inner {
  width: 160px;
  height: 40px;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  border: 0px;
  vertical-align: middle;
}

.weegle_inner:hover {
  cursor: pointer;
}

2, 3번에서 input 태그에 width(90%)와 height(100%) 값을 지정했어서 여기에서 width와 height 값을 주지 않으면 화면상에 block 요소처럼 한줄씩 차지하는 모습을 볼 수 있다. 이 부분은 width와 height 값을 주면 해결된다.

그리고 여기에서 vertical-align을 설정하지 않으면 아주 미세하게 두 버튼의 수직적인 위치가 다른 것을 알 수 있다.

그래서 이 때 vertical-align: middle;을 적용하면 같은 위치에 있게 할 수 있다.

아래에 전체적인 html과 css 코드를 공유하며 위의 글이 조금이나마 도움이 되었으면 합니다.

<html 코드>

<body>
    <div class="container">
        <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" style="margin-top: 10px;">
        <div class="inner">
            <input type="search">
            <div class="searching">
                <i class="fas fa-search"></i>
            </div>
            <div class="icon_ect">
                <i class="fas fa-keyboard"></i>
                <i class="fas fa-microphone"></i>
            </div>
        </div>
        <div>
            <input type="submit" value="Weegle 검색" class="weegle_inner"></input>
            <input type="submit" value="I'm feeling Lucky" class="weegle_inner"></input>
        </div>
        <footer>
            Weegle 제공 서비스 :<a href="#"> English</a>
        </footer>
    </div>
</body>

<css>

body {
  background-color: white;
  margin: 0;
  box-sizing: border-box;
}

.container {
  text-align: center;
}

img {
  width: 200px;
}

.inner {
  position: relative;
  width: 600px;
  height: 40px;
  margin: 20px auto;
  border: 1px solid #bdc1c6;
  border-radius: 20px;
}

input {
  width: 90%;
  height: 100%;
  border-color: #bdc1c6;
  border: 0px;
  font-size: 16px;
  outline: none;
}

.searching {
  position: absolute;
  left: 10px;
  top: 20%;
}

i:hover {
  cursor: pointer;
}

.icon_ect {
  position: absolute;
  right: 10px;
  top: 20%;
}

.fa-keyboard {
  margin-right: 10px;
}

.weegle_inner {
  width: 160px;
  height: 40px;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  border: 0px;
  vertical-align: middle;
}

.weegle_inner:hover {
  cursor: pointer;
}

footer {
  margin-top: 10px;
  font-weight: bold;
}

a {
  text-decoration: none;
}

'Html & Css' 카테고리의 다른 글

Semantic Tag와 Semantic Web (0)	2021.12.01
DISPLAY / POSITION / VISIBILITY ATTRIBUTE (0)	2021.12.01
a 태그의 선택 범위(영역) 지정하는 방법 (0)	2021.11.24

ABOUT ME

백엔드로의 코딩 여행 백엔드로의 코딩 여행

<html 코드>

<css>

'Html & Css' 카테고리의 다른 글

티스토리툴바

ABOUT ME

<html 코드>

<css>

'Html & Css' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바