원형 이미지
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 | 디자이너와 개발자를위한 색 구성표 도구.
colorate는 디자이너와 개발자에게 영감을 주는 색 구성표 도구입니다. 이것은 색채 작업을 위한 자료로 도움이 될 것입니다.
colorate.azurewebsites.net
1000 단위 숫자 끊기
parseInt(값).toLocaleString()}
그리드 강제 정사각형
.클래스명:after {
content: "";
display: block;
padding-bottom: 100%;
}
'학습 기록 > HTML, CSS' 카테고리의 다른 글
23.06.05 / CSS (0) | 2023.06.05 |
---|---|
23.06.03 / HTML / 이미지, 테이블, 입력양식 (0) | 2023.06.03 |
23.06.02 / HTML / 제목, 본문, 리스트, a태그 (0) | 2023.06.02 |