[CSS] 기본 셀렉터, 컬러 팔레트 정리

기본 셀렉터 정리 문서

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index

CSS reference - CSS: Cascading Style Sheets | MDN

 

 

 padding과 margin의 차이

padding: 컨텐츠 안에 들어가는 공간 => 컨텐츠 크기가 커진다

margin: 컨텐츠 밖의 공간 => 바깥쪽에 공간이 생긴다 

 

padding: 20px 20px 20px 20px; //시계방향으로 위,오른쪽,아래,왼쪽에 각각 20px씩 패딩 값을 준다.

padding: 20px 20px; //위, 아래만 각각 20px씩 패딩 값을 준다.

 

 

 

div와 span의 차이

div는 Block-level으로 한 줄에 하나씩 나온다.

span은 Inline-level로 한 줄에 여러개 나온다.

 

 

div를 Inline-block으로, span을 block-level로 바꾸는 코드

div {
	background: yellow;
    display: inline-block;
}

span {
	background: Blue;
    display: block;
}

 

 

 

 

색상 팔레트 참고 사이트

https://mui.com/material-ui/customization/color/

 

 

 

참고 영상

https://www.youtube.com/watch?v=gGebK7lWnCk&t=519