[HTML, CSS] Input박스 안에 아이콘 넣기 (fontawesome)

 

 

안녕하세요, 주갬입니다.

 

얼마전 회사에서 기간 설정 ui를 구성하다가 input 박스 안에 달력 아이콘을 넣어야할 일이 생겼습니다.

 

 

인터넷을 찾아보니 input박스의 background 속성으로 이미지를 넣는 방법이 많이 보이던데,

실제로 간단한 아이콘을 삽입할때는 이미지보다는 fontawesome이나 google material icons을 태그 형식으로 넣는 경우가 많을 것이라 생각합니다.

 

 

저도 fontawesome을 이용해 개발중이기 때문에 제가 알아낸 방법을 공유드리려고 합니다.

 

 

---

 

 

예쁘게 인풋박스 안에 달력 아이콘이 들어가있는 모습입니다.

 

 

방법의 핵심은 CSS의 position을 이용하는 것입니다! 

 

CSS의 position에는 static, relative, absolute, fixed가 있습니다. 이 중에서 relative와 absolute를 이용하여 부모 요소 안의 특정 위치에 자식 요소를 배치할 수 있습니다. (position 속성에 대한 자세한 설명은 이 사이트를 참고하세요!) 

 

absolute 포지션은 포토샵의 레이어와 비슷한 기능을 합니다. 부모 엘리먼트 내부에 속박되지 않고 브라우저 화면의 원하는 위치에 요소를 배치할 수 있습니다.

 

상위요소의 position을 따로 지정하지 않았을 때 absolute 포지션을 가진 요소의 배치. 레이어 처럼 작동하는 모습!

 

이렇게 전체화면이 활동무대인 absolute를 상위 요소에 속박시킬수 있는 방법이 있습니다.

바로 상위 요소를 relative로 선언하는 것인데요! 상위 요소의 position을 relative로 지정하게 되면 전체 화면이 아닌 해당 상위 엘리먼트를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.

 

이 사이트에 설명이 잘 되어 있어 참고하였습니다.

https://www.daleseo.com/css-position-absolute/

[CSS] Absolute Position - 자유로운 엘리먼트 배치

 

 

이제 제가 작성한 코드를 보면서 자세히 설명드리겠습니다.

 

---

1. HTML 코드 작성

 

HTML코드는 다음과 같이 div태그 안에 input태그와 i태그를 넣어주시면 됩니다.

        <div class="inputDiv">
            <input id="dateInput” type="text"> 
            <i class="fal fa-calendar-alt"></i>
        </div>

 

 

2. CSS 코드 작성

 

inputDiv {
    position: relative;
}
  
.inputDiv i{
    position: absolute;
    left: 180px;
    top: 5px;
    color: gray;
}

 

i 태그의 상위요소인 div 태그의 position을 relative로 놓고, i 태그의 position은 absolute로 두었습니다.

그리고 offset을 left: 180px; top: 5px; 로 지정해주었습니다!

 

이제 i 태그는 상위요소인 div에서 왼쪽을 기준으로 180px, 위를 기준으로 5px 떨어져서 위치하게 됩니다.

 

끝입니다! 아주 간단하죠?

 

 

---