CSS TIP 모음

원형 이미지

import 'bootstrap/dist/css/bootstrap.min.css';
import Image from 'react-bootstrap/Image';

<Image src="https://i1.ruliweb.com/img/22/07/28/18242f82cc7547de2.png" roundedCircle />

 

bootstrap 이용.

 

nth

:nth-child()
ex) .클래스이름 :nth-child(숫자)


ex) 3번째 자식 제외하고 적용
.second_block>div:not(:nth-child(3))

 

 

hr태그 꾸미기

<div className={PlayBoard.division_line}>
    <div>
        <a href="#">Community🌐</a> /{" "}
        <a href="/playboardList">자유게시판⚽</a>
    </div>
</div>


/* 상단 구분선 시작*/
.division_line {
  position: relative;
  display: flex;
  margin: 32px 0;
}
.division_line > div {
  background-color: white;
  color: #999999;
  display: inline-block;
  margin-left: 1.5rem;
  z-index: 9;
  padding: 0 4px;
}
.division_line::after {
  content: "";
  display: block;
  position: absolute;
  inset: 50% 0;
  background-color: #999999;
  height: 0.5px;
}
.division_line div a {
  color: #999999;
  text-decoration: none;
  font-size: 14px;
}
.division_line div a:hover {
  color: #2474ff;
}
.division_line div a:nth-child(2) {
  color: #2474ff;
}
.division_line div a:nth-child(2):hover {
  color: #7cacff;
}
/* 상단 구분선 끝 */

 

 

색상조합 추천사이트

https://colorate.azurewebsites.net/ko

colorate | 디자이너와 개발자를위한 색 구성표 도구.

 

1000 단위 숫자 끊기

parseInt(값).toLocaleString()}

 

 

그리드 강제 정사각형

.클래스명:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}