[HTML CSS] Position - relative, absolute, fixed

Postion : property

내가 원하는 위치로 이동하고 시킬 수 있다. 

• position: relative;
• position: absolute;
• position: fixed;
• position: static;

여기서 중요한 포지션은 property는 relative 이다. 

 

relative는 부모로 생각하고 스케치북을 펴서 원하는 위치로 이동할 수 있다는 표현이다. 

absolute는 자식으로 relative로 설정된 영역에서 절대적으로 위치한다고 생각하면 된다.

 

Q. input 버튼 위에 돋보기 이미지를 오른쪽에 배치하고 싶다면 

A.

우선 input과 돋보기 이미지를 감싸는 영역이 필요하고 이 부분에 position relative 프로퍼티를 넣어주면 

이제 input과 이미지는 부모가 펼친 스케치북 안에서 놀게 된다. 

<div class="search">
      <input type="text" placeholder="검색어 입력">
      <img src= "https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
</div>

input 태그는 Inline-block, img태그는 대표적인 inline 태그이기에 옆으로 바로 붙여지게 표시된다. 

 

이제 돋보기 이미지를 input 위에 올려야하는데

이때 css 코드의 핵심은 img 태그에 position : absolute 로 설정하는 것이다. 말그대로 절대적인 위치로 뭐라하든간에 부모영역에 있는 것이다. 여기서는 class search에 영역이다.

 

top : top기준으로 10px

right : 오른쪽 기준으로 10px 

패딩개념으로 이해하면된다. 

.search{
  width: 300px;
  position: relative;
}
input{
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 10px 12px 10px 12px;
  font-size: 14px;
}

img{
  position: absolute;
  width: 17px;
  top: 10px;
  right: 12px;
  margin: 0;
}

 

inline, block, inline-block

인라인 요소 VS 블록요소 

블록요소는 페이지 한줄을 차지하는 요소인 반해 

인라인 요소는 자기공간만 차지한다. 

 

여기서 중요한건 이 두가지 특징을 가지고 있는 Inline-block 이다. 

기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.

하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정할 수 있다는 특징을 가진다. 

 

인라인으로 하고 싶은데 조금 크기를 높이고 싶다면 Inline-block element를 사용하면 된다대표적인 인라인블록 요소로는 button input select가 있다.

 

 

float 

어울림이 필요할땐? float 

페이지 크기에 따라 크기조절을 하고 싶다면 위 그림처럼 float를 설정하면된다. 

float은 말그대로 떠있다라고 생각하면 되는데 어울림으로 이해를 하자.