Kakao Clone03 :: HTML 2day

header bottom을 만들어 본다.

span? => <span> inline element라고 소개되어진다. 

fa fa-cog fa-lg(크게 해주는 장치이다.)

fa fa-search 이런식으로 아이콘을 찾을 수 있다. 

i.fa.fa-user 하고 tab을 누르면 icon 에 해당하는 태그가 뜨면서 자동으로 완성한다. 

*css

css에서는 .이름 { } 로 시작을 한다. 

padding : 10px 25px 라고 하면 (위 아래 10px, 좌 우 25px 의미)

태그의 위치를 살짝 변경하고자 할때는

position : relative를 사용한다. 

.search-bar{
  padding: 10px 25px;
  position: relative;
}
.search-bar input{
  width : 100%;
  padding : 5px 7px;
  box-sizing: border-box;
  border: 0;
  border-radius: 5px;
  background-color:#f1f2f3;
  font-size: 13px;
  text-align: center;
}
.search-bar input:placeholder{
  text-align: center;
}
.search-bar input:focus {
  outline: none;
}
.search-bar i{
  position : absolute;
  top : 15px;
  left : 40px;
  color : #bbbbbb;
}
 

* position : relative;
참고 : https://ofcourse.kr/css-course/position-속성

#box2 { 
position: relative; top: 20px; left: 30px; 
} 

* box-sizing: border-box;

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다.
너비 높이를 계산한다.
Width와 height의 경우에 테두리를 포함하지 않지만 box-sizing 테두리를 포함하여 보다 명확한 사이즈를 계산할 수 있다.

* border-radius: 5px;

둥근 모서리를 만들때 사용합니다.
세부적으론 시계방향으로 px를 정해 줄 수 있다.

* text-align: center;
문서를 중앙정렬한다.

* .search-bar input:focus

포커싱되는 순간을 처리해준다. 

* selector 

이것을 이용하면, class의 element에 style을 모두 설정할 수 있다.