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