[CSS] 색상 관련 속성

color: 글자색

background-color: 배경색

border-color: 테두리색

색상 지정 방법

- 이미 지정된 이름을 사용하는 방법: red, blue, green 등

- 16진수의 색상코드를 이용하는 방법: #ff0000 같은 포맷

- RGB코드를 사용하는 방법: rgb(255,0,0) 

- RGBA코드를 사용하는 방법: a는 투명도이며, 0~1사이의 값을 가진다. RGBA(255,0,0, 0.4)

 

간단하다. 연습삼아서 n모사의 유명한 검색창을 모방해서 만들어보자.

이하는 각 라인에 대한 설명이다.

61. 안의 내용은 조건에 따라 서버로 전송된다.

62. 품고있는 내용은 box라는 클래스 요소이다.

63. 품고있는 내용은 left라는 클래스 요소이다.

64. "검색어를 입력하시오"라는 메세지가 디폴트로 떠있는 텍스트 입력창을 둘 것이다.

65-66. keyboard라는 이름의 material-symbols-outlined라는 클래스요소를 가져다둔다.

67. 65라인 클로징

68. 63라인 클로징

69. button이라는 이름의 클래스 버튼을 둔다.

70-71. search라는 이름의 material-symbols-outlined라는 클래스요소를 가져다둔다.

작성된 도큐먼트로 실행된 페이지는 위와 같다. 스타일들을 붙여주자.

8, 9는 픽토그램 이미지를 가져오기 위해 붙여준 것이다. 

 

스타일을 입혀주니 보기 좋게 변하였다.