CSS 검색 창 고정 - CSS geomsaeg chang gojeong

Question

들어가는 말

치열한 싸움이었다. 내가 지고있는 상황이어서 모니터를 부수면 내가 이기는게 되지 않을까.. 라는 극단적인 생각까지 해봤지만 난 모든지 해결하는 뚝딱 개발자가 되고 싶기 때문에 참았다! (헛소리)

목차 Show

들어가는 말
1. 헤맨 부분 : Position 설정
#1 문제점 파악
#2 문제 해결 과정
2. 헤맨 부분 : placeholder에 아이콘 넣기
#1 문제점 파악
#2 문제점 해결 과정

내가 이번에 정말 고생한 부분은 position으로 relative - absolute를 이용해 부모-자식 관계의 상황에서 두가지 이상 element들의 위치를 자리잡는 것이었다.

두번째는 input으로 넣은 text box에서 placeholder 값으로 icon을 넣는 것이었다.

1. 헤맨 부분 : Position 설정

바로 어제 배웠던 position인데 연습하면서 실습한 예제 코드가 너무 짧았나보다. 코드가 쫌만 길어지니까 바로 ㅠㅠㅠ 이상하게 구현되버리는...
먼저 내가 처음 짰던 코드는
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" />
    <script src="https://kit.fontawesome.com/8eb5905426.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" class="weegle")>
    <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="Weegle 검색">
<input type="button" class="box" value="I'm feeling Lucky">
  </body>
</html>

css코드는

* {
    box-sizing: border-box;
}
.weegle {
    width: 400px;
    display: block;
    text-align: center;
    margin: auto;
}

.search {
    position: relative;
    text-align: center;
    margin: 0 auto;
}
input {
    width: 60%;
    border-radius: 20px;
    border: 1px solid #bbb;
    margin: 10px 0;
    padding: 10px 12px;
}
.fa-search {
    position: absolute;
    left: 15px;
    top: 22px;
    margin: 0;
}
.fa-keyboard {
    position: absolute;
    right: 60px;
}

.fa-microphone {
    position: relative;
    right: 50px;
    margin: 0;
    color: blue;
}
.box {
    display: inline;
    width: auto;
    border-radius: 0;
    margin: auto;
    text-align: center;
    color: #bbb;
}

이었다. 이걸 출력한 형태는

두둥
배웟던 대로 아이콘 두가지 (돋보기와 키보드)는 absolute로 설정했더니 저렇게..화면의 아예 끝과 끝으로 가버렸다.
마이크는 그래서 relative로 설정했더니 원하는 대로 input box 안에 들어가긴 했다.

하지만 내가 처음 하고싶었던 것은 자식 격인 아이콘들을 position: absolute로 하여 부모격인 input 박스에 대해 같은 위치에 고정되어 있는 모습을 원했다!!!

한참 헤매다가 결국 돋보기와 키보드를 모두 position: relative로 하여 설정하기도 했지만 애초에 내가 하려고 했던 방식이 아니었다.

#1 문제점 파악

결국 같이 HTML/CSS repl.it을 진행한 팀원분들에게 조언을 구했다. 그 중에서도 프론트 엔드를 희망하신 분들이 많은 도움을 주셨다!! (정말 똑똑하셔들!!)
먼저
1. input과 아이콘이 포함된 상위 태그인 div class="search"의 범위가 해당 줄의 왼쪽 끝에서부터 오른쪽 끝으로 설정되어 있다.
2. 그 상태에서 input text box의 크기는 가운데로 지정되어 있다. (좌우 margin 이 0이므로)
3. 그렇기 때문에 position: absolute인 아이콘은 자기 역활을 제대로 수행한것이다 ㅠㅠ - 부모격인 div 태그 내에서 고정된 위치..

#2 문제 해결 과정

문제점을 파악했으니 고쳐야지!
1. div class="search" 의 범위를 지정해준다!
2. div 범위 내에서 input text box가 가득 차게 해준다! (width=100%)
3. 이 상태에서 아이콘을 position: absolute; 로 한다!

.search {
    position: relative;
    text-align: center;
    width: 400px;
    margin: 0 auto;
}
input {
    width: 100%;
    border-radius: 20px;
    border: 1px solid #bbb;
    margin: 10px 0;
    padding: 10px 12px;
}
.fa-search {
    position: absolute;
    left: 15px;
    top: 20px;
    margin: 0;
}
.fa-keyboard {
    position: absolute;
    right: 35px;
    top: 20px;
}
.fa-microphone {
    position: absolute;
    right: 15px;
    top: 20px;
    color: blue;
}

휴,, 치열한 싸움이었다. (나 vs 나)

2. 헤맨 부분 : placeholder에 아이콘 넣기

placeholder에는 왜 text만 들어갈 꺼라 생각했지?? 당연히 아이콘도 들어갈수 있는데!!!
따라서 돋보기 모양을 아이콘 요소가 아닌 placeholder 값으로 넣으려고 했다.

#1 문제점 파악

일단 내가 사용한 아이콘이 fontAwesome꺼기 때문에 아이콘을 사용하는 것은 쉬었다. placeholder값에 사용하려면 해당 아이콘의 유니코드를 입력하면 되니까!
문제는

<input type="text" placeholder="&#xf002;">

를 입력하면 그냥 네모만 나온다 (마치 아이콘이 제대로 출력 안될때 처럼..)

#2 문제점 해결 과정

다시 방법을 모색했다 (슈퍼 구글링)
그 결과 https://codepen.io/pramodkumarboda/pen/zBvaw 페이지에서 답을 찾았다!!
placeholder로 icon을 적용했을때 html과 css 코드를 보여주는 페이지였는데 눈에 들어온건

.mainLoginInput::-webkit-input-placeholder { 
font-family: FontAwesome;
font-weight: normal;
overflow: visible;
vertical-align: top;
display: inline-block !important;
padding-left: 5px;
padding-top: 2px;
color: hsl(9, 40%, 60%);
}

였다.
이중에서도 font-family 설정!
그래서 나도 css에 적용해줬다.

input {
    width: 100%;
    border-radius: 20px;
    border: 1px solid #bbb;
    margin: 10px 0;
    padding: 10px 12px;
    font-family: fontAwesome;
}