programmerGround 검색창 만들기(2020.02.07)

안녕하세요! 새콤하고달콤입니다.

오늘은 programmerGround 프로젝트에서 구현한 검색창 만드는 방법에 대해서 살펴보겠습니다.

 

결과는 다음과 같습니다.

 

1. focus 적용 전 

2. focus 적용 후

3. 알아간 것들

      1. focus 속성 : input의 경우 focus 속성을 이용하여 input 클릭 시 효과를 구현할 수 있었습니다.

	&:focus {
		background-color: #fff;
		transition: all 0.2s ease;
		box-shadow: 0px 10px 10px 0 rgb(0 0 0 / 10%);
		outline: none;
	}

     2. box-shadow : css 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어집니다.

     3. background-color : inherit -> 부모 요소의 색상을 상속받을 때 사용합니다.

     4. outline : none -> 브라우저의 기본 포커스 스타일이 사라지게 됩니다.

     5. max-width -> 요소의 최대 너비를 설정합니다. max-width는 width 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.