[css] 색상, 인라인 요소와 블라인 요소

색상 표현 방법

keyword는 색상마다 부여된 이름으로 이 링크에서 목록을 확인할 수 있습니다.
ex) white, red, green

RGB(A)는 빨강, 초록, 파랑의 광원으로 색을 혼합하는 방식이며
끝에 알파값을 붙여서 투명도를 조절할 수 있죠.
ex) rgb (255,25,,255)

HEX는 R, G, B, Alpha 값들을 16진수형태로 나타낸 것입니다.
ex) #FFFFFF (=#FFF), #00080080(뒤 두자리는 투명도)

HSL(A)은 색상, 채도, 명도값 그리고 알파값을 조합하여 색을 나타냅니다.

ex) hsl(0,100%,100%) , hsl(30,40%,100%)

---

 

---

인라인 요소와 블록 요소

인라인 요소는 비닐이나 랩 안에 내용물을 넣은 것과도 같습니다. 이 텍스트처럼, 일정한 바깥 형태나 껍데기 없이 페이지의 흐름에 따라 다른 텍스트나 컨텐츠와 어우러져 배치되죠. 위의 노란 부분이 인라인 요소입니다.

: span의 기본 값 

👉 인라인 요소들 목록 보기

블록 요소는 딱딱한 상자와도 같습니다.
이 파란색 상자처럼 사각형의 형태를 갖고 있으며 너비와 높이, 안팎의 간격을 부여받을 수 있죠.
: div의 기본 값

👉 블록 요소들 목록 보기

	inline	block	inline-block
기본 너비	컨텐츠만큼	부모의 너비만큼	컨텐츠만큼
width, height 속성	무시	적용	적용
가로공간 차지	공유	독점	공유
margin 속성 ( 바깥쪽 여백 )	가로만 적용	모두 적용 ( 상하 상쇄 )	모두 적용
padding 속성 ( 안쪽 여백 )	가로만 적용, 세로는 배경색만	모두 적용	모두 적용

---