** css

1. 말풍선

https://projects.verou.me/bubbly/

https://www.ilikepixels.co.uk/bubbler/

.speech-bubble {
	position: relative;
	background: #00aabb;
	border-radius: .4em;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #00aabb;
	border-bottom: 0;
	margin-left: -20px;
	margin-bottom: -20px;
}

 

2. 색깔

노란 버튼 : #FEE500

 

회색 <hr> 

#E0E0E0

#EEE

#9A9A9A

#E3E4E5

 

글씨(탁한 파란색)

#3461c9

 

 

 

3. text 세로 가운데 정렬

- height:50px;

- line-height:50px;

 

 

 

4. <button> 비활성화

- disabled='disabled'

 

 

5. div 나란히 예쁘게 놓기

부모 영역인 컨테이너에

- display:flex  --> 세로 배치(컨테이너끼리)

- display:inline-flex --> 가로배치(컨테이너끼리)

 

 

6. 검색창 input  placeholder 에 아이콘 넣기 (내용입력하면 아이콘 안보임)

input::-webkit-input-placeholder{
  background-image: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-256.png) ;
  background-size: contain;
  background-position:  1px center;
  background-repeat: no-repeat;
  text-align: center;
  text-indent: 0;
}

 

7. 이미지 파일 css 로 색 변경하기

https://codepen.io/sosuke/pen/Pjoqqp

// 빨강색으로 변경
img {
	filter: invert(36%) sepia(94%) saturate(7389%) hue-rotate(354deg) brightness(91%) contrast(122%);
}