본문 바로가기

Mini Projects

News Grid (7) Padding & Background Color Utility

.bg-dark{
    background:var(--dark-color);
    color:#fff;
}

.bg-primary{
    background:var(--primary-color);
    color:#fff;
}

.bg-secondary{
    background:var(--secondary-color);
    color:#fff;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark a,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary a,
.bg-secondary h1,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary a {
  color: #fff;
}

.py-1 { padding: 1.5rem 0 }
.py-2 { padding: 2rem 0 }
.py-3 { padding: 3rem 0 }
.p-1 { padding: 1.5rem }
.p-2 { padding: 2rem }
.p-3 { padding: 3rem }

div 배경 색들 설정했는데,

그렇게 하니까 h태그들과 a 태그 글자 색이 안보여서

모두 선택해서 글자색을 #fff로 줬다.

 

 

py는 padding y축을 말하고

그냥 p는 상하 우좌 모두