LWC 기본테이블 (2)

지난 포스팅에 이어 기본테이블에 CSS를 넣는 작업이다. 

https://nnn-ong.tistory.com/242?category=1180609

CSS는 생각보다 기능이 많다.. 하면할수록 다양함.. 

그리고 눈에 보이는 작업이다보니, 바로 확인할 수 있어서 재밌다

 

css는 주로 소문자로 시작한다.

아래와 같이 클래스 우측마우스 클릭 > New File 클릭 > lwc 컴포넌트와 동일하게 파일명 입력후 .css를 붙여주면 

해당 클래스파일에 css가 생성된다. 

 

지난번 html 코드를 공유해준 것에서 class 에 'custTable' 이라고 추가 (해당 명은 본인이 자유롭게 지정하면된다)

이렇게 되면 이 테이블의 이름은 custTable이 되는거고 , 테이블명으로 css를 적용시킬 수 있다. 

 

CSS 

 

테이블 배경을 aqua로 적용을 하면 아래와 같이 테이블 색이 변하는것을 확인할 수 있다. 

/* 테이블 전체에 적용되는 CSS */

.custTable {

    background-color: aqua;

}

 

 

테이블의 header 와 body에 css를 별도로 적용을 하고자 한다면 아래와 같이 적용하면 된다. 

예를들어 헤더는 보라색 , 바디는 초록색을 별도로 적용하고 싶다면 아래와 같이 CSS를 적용하면된다 

/* 헤더부분 적용 CSS */

.custTable thead tr th {

    background-color: #dd99f8;

}

/* 바디부분 적용 CSS */

.custTable tbody tr{

    background-color: rgb(211, 241, 190);

}

 

여기서 한번더 커스텀을 해보자면.. 

테이블에 행구분을 명확하기 위한 줄무늬를 넣고싶다면 아래와 같이 css를 수정하면된다.

실제로는 이렇게 정신없게 칼라를 주진 않는다..ㅎㅎ..

/* 바디부분 테이블에 줄무늬 넣기 */

.custTable tbody tr:nth-child(2n-1){

    background-color: rgb(171, 243, 120);

}

 

짠..!

 

다음포스팅은 이름을 클릭했을때 해당 Contact으로 이동할 수 있도록 하는 기능 포스팅 하겠다