본문 바로가기

프론트엔드개발/HTML,CSS,JS

[CSS]step.6 CSS 색상 표기 방법 padding/color/color-background

[padding] - contents와 border 사이의 간격을 의미함

 

[padding-th 수정 전]

이미 td , th { } 에 대해 정의되어있는상태에서도 th만 따로 지정할수 있다.

td,th{

    border: 1px solid black;
    color:darkblue;
    font-size:12px;
    font-family:Gulim;
    text-align:center;

}

[padding- th 수정 후]

td,th{
    border: 1px solid black;
    color:darkblue;
    font-size:12px;
    font-family:Gulim;
    text-align:center;
	 }

th  {

    padding: 10px

    }

 

<th>태그에 해당하는 연봉 / 월실수령액 /공제액(세금)에서 padding 간격이 조정됨

 

modelbox로 확인한 padding 10px

 

[CSS 색상] - 대표적으로 background-color / color 2 가지가 있음

-표기방법

color: #8A2BE2  = 빨강,녹색,파랑

 

color:rgb(138,43,226) = 빨강,녹색,파랑

thead{
    background-color:#BDBDBD;
}

[실습예제-CSS 글자색,배경 변경]

td,th {
    border: 1px solid black;
    color:darkblue;
    font-size:12px;
    font-family:Gulim;
    text-align:center;
    color: #424242 
      }
    
thead {
    background-color:#CFD8DC
	  }

연봉/월실수령액/ 공재역 = thead {background-color:#CFD8DC} 나머지 td,th{ color:#424242}

       



[참고 사이트]
-  구글에서 "material color palette" 검색

https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

 

아래와 같이 색상을 8비트 형태로 값을 보여줌

 


오늘은 여기까지 입니다.

 

감사합니다.

 

====================================================

출처: IT UP, 코딩이 처음이어도 괜찮아! 진짜 입문자를 위한 웹개발과 IT 기초 지식
https://itup.co.kr/rv1/k-digital/main/lecture/info?course_uid=912417&education_uid=52212

잔재미코딩

https://www.fun-coding.org/

 
 
반응형