TIL 40일_3차

◆ test 스타일

• 원하는 태그에 test를 추가하면 해당 영역 내부가 점선으로 표시
• 설령 다른 테두리 설정이 있다고 해도 무시하고 처리하도록 구현
• div뿐 아니라 모든 비어있는 영역 태그에 적용
• div, main, header, footer, nav, aside,
  article, p, label, span, ul, ol, li, a
  

◆ 페이지네이션(Paginetion) 디자인

• a태그에 폭 설정이 불가능하므로 display를 변경(inline-block)

(주의)

• border는 폭,높이에 영향을 미치므로 추가/제거가 반복될 경우
• 투명 테두리를 설정해둬야 한다
• 대안으로는 그림자(box-shadow)를 사용하는 방법이 있다
• box-shadow: x위치 y위치 번짐 퍼짐 색상;
  box-shadow: 0px 0px 0px 1px black;
  

◆ 이미지를 표시하는 방법

1) <img> 사용
- 이미지는 크기 표준화가 어려우므로 width, height 속성 사용
2) background-image 사용
-em은 글씨 크기에 대비한 수치이므로 이미지에 사용하지 않는다.
- 불투명도(opacity)

.form-input-search {
	/* 
	url은 이 파일 위치를 기준으로 경로를 계산(상대경로) 프론트엔드는 절대경로가 없다. 
	서버를 기준으로 절대 경로를 찾기 때문에 프로트엔드는 상대경로만 존재한다. 
	*/
	background-image: url("./image/search.png");
	/* 
	cover - 큰 쪽에 이미지를 맞춤
	contain - 작은 쪽에 이미지를 맞춤
	수동으로 두 개 부여하면 앞이 **폭**, 뒤가 **높이** 이다.
	*/
	background-size: auto 80%;
	background-repeat: no-repeat;
	/* 
	위치 선정은 x, y 순으로 하며
	- px
	- %
	- 키워드(x - left/ center/ right, y - top/ center/ bottom)
	*/
	background-position: left 10px center;

	/* 글자 입력란을 오른쪽으로 밀기 위해 여백을 부여 */
	padding-left: 2.8em;
}