React와 Spring으로 게시판 만들기
[React] 게시판 디자인하기 (4) - 글쓰기 버튼 만들기
Evolving Developer
2023. 3. 3. 16:02

오늘의 목표

- <hr> 태그로 게시글 사이에 구분선 만들기
- 'position: fixed'로 고정된 위치의 글쓰기 버튼 만들기
BoardList.js
<div>
<div className='board'>
<div className='board__title'>
<h4>코딩 꿀팁 공유합니다.</h4>
</div>
<div className='board__content'>
<p>사실 그런 건 없지롱 블라블라 블라블라 블라블라 블라블라</p>
</div>
</div>
<hr></hr>
</div>
- 최상위 <div> 태그 내 가장 아래에 <hr> 태그 추가
BoardList.css
hr {
background: rgba(0, 0, 0, 0.120);
height: 1px;
border: 0;
}
- height를 지정하지 않으면 아무리 background 설정을 해도 색이 바뀌지 않음
- background의 영향을 받지 않는 테두리선 border은 0으로 지정
- rgba에서 a 값으로 투명도 조절
WriteButton.js
function WriteButton() {
return (
<div>
<button className='write__button'>
<i><FontAwesomeIcon icon={faPlus} size="4x"/></i>
</button>
</div>
);
}
- 플러스 모양의 아이콘을 담는 버튼 생성
- 아이콘 사이즈는 4x로 크기 키우기
BoardList.css
.write__button {
width: 60px;
height: 60px;
border-radius: 50%;
position: fixed;
right: 30px;
bottom: 30px;
}
- 'border-radius: 50%'로 둥근 모양 (원) 만들기
- 'position: fixed'로 스크롤을 내리더라도 위치 고정
- right: 오른쪽에서 ~만큼 떨어짐
- bottom: 바닥에서 ~만큼 떨어짐
참고
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
[css]<hr> 태그 색상 바꾸는 방법
📑 태그란? hr 태그를 이용하면 콘텐츠 중간에 선을 그을 수 있다. 보통 주제가 변경이 될 때 이용하는 태그이다. 태그는 기본적으로 검은색으로 제공되고 있다. 만약에 해당 색상을 바꾸고 싶다
ordinary-code.tistory.com