리스트 순서대로 명도 낮추기
포트폴리오 결과물을 위와 같이 리스트 형식으로 나열할 때 명도를 조금씩 낮춰서 입체감 있어보이도록 하는 방법이다.
다운받은 포트폴리오 템플릿의 코드를 뜯어보다가 발견.
<section id="one" class="wrapper style2 spotlights">
<section>
...
</section>
</section>우선 HTML 코드부터 확인해보자.
리스트에서 가장 외부에 있는 <section> 태그는 총 3가지 클래스를 가졌다. (wrapper, style2, spotlights)
그리고 랩퍼는 자식 <section> 태그들을 가졌다.
- 그러니까 A4 용지 하나(랩퍼)에 section이라는 포스트잇을 붙여둔 것인데, 아직은 배경색이 없으니 포스트잇의 색상은 투명해서 A4용지 색으로 보인다.
아래부터는 CSS 스타일이다.
.wrapper.style2 {background-color: #436850;}
- 랩퍼에는 공통적으로 background-color를 적용했다.
- 포스트잇에 순서대로 background-color라는 물감을 칠해서 구분한다.
.spotlights > section:nth-child(2) {background-color: rgba(0, 0, 0, 0.05);}
- 랩퍼의 자식인 section 태그에 nth-child(n)를 사용하여 배경을 이중으로 겹쳐두었다.
배경색은 검정색이고, 투명도를 0.05씩 증가시켜 색상을 점점 저명도로 변경했다.
nth-child(3)의 background-color는 rgba(0,0,0,0.1)이다.
- 물감의 색상rgb은 검정0,0,0이고 투명도는 0.05이다.
결론
제목과 같은 연출을 할 때, 색상을 하나하나 팔레트에서 뽑아쓸 필요는 없다.
자식 html을 만든 뒤 검정색 background-color의 투명도를 조절하면 된다.
