728x90

Spring Boot로 프로젝트 중 bootstrap 예시 템플릿을 사용하는 중 직접 만든 요소를 이쁘게 정렬하기 위해 가운데 정렬하기 위한 방법을 찾아봤습니다.


<div class="table-responsive mt-3" style="display: flex; justify-content: center;">
  • display: flax - 인라인 style속성을 이용해 가운데 정렬하고 싶은 태그 안에 넣어줍니다.
  • jstify-content: center - 태그 내의 요소를 가운데 정렬해줍니다.

Reference : https://deeplify.dev/front-end/markup/align-div-center

 

[HTML/CSS] div 가운데 정렬 하는 방법

CSS를 이용하여 div 등의 엘리먼트를 가운데 정렬하는 방법을 소개합니다.

deeplify.dev

 

'Web > CSS' 카테고리의 다른 글

[CSS] 하이퍼링크 밑줄 제거 (인라인 스타일 적용)  (0) 2021.12.18
Bootstrap 시작하기  (0) 2021.08.07
728x90

문제점 : 게시판 제목을 클릭하면 해당 글로 이동하도록 했는데 하이퍼 링크가 너무 이쁘지 않아 밑줄을 제거하고 검은색으로 바꾸고자 한다.

 

 

<td><a th:text="${board.title}" th:href="@{/board/form(id=${board.id})}" style="text-decoration:none; color:black;">제목</a></td>

style부분만 참고!

밑줄 제거 : style="text-decoration:none;"

글자색 적용 : style="color:black;"

'Web > CSS' 카테고리의 다른 글

[CSS] div 태그 요소 가운데 정렬  (0) 2022.01.13
Bootstrap 시작하기  (0) 2021.08.07
728x90

Spring 프로젝트에서 css 작업을 위해 Bootstrap을 사용하기로 했다!

 

HTML 파일에서 사용해보긴 했으나, JSP파일에서 사용이 가능한지 확인할 겸, 사용법을 정리하고자 한다.

 

https://getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

 

부트스트랩 홈페이지이다. 들어가면 Get Started를 누르면 나오는 코드들이 있다.

위 2개의 코드를 복사하여 JSP 파일 또는 HTML 파일 상단에 붙여 넣어준다.

 

그 후 부트스트랩을 사용 가능한지 테스트를 위해 버튼을 하나 만들어 보겠다.

 

 

좌측 상단에서 Button을 검색한다. 그럼 여러 가지 버튼 소스들이 나오는데 소스를 복사하여 JSP 파일 또는 HTML 파일에 붙여 넣어준다.

 

필자는 예시로 button태그를 하나 복사하여 붙여넣어 주었다.

 

프로젝트 실행 후 화면은 다음과 같다.

 

버튼 외에도 다양한 스타일의 CSS를 간단하게 적용해볼 수 있으니 잘 사용하면 유명 사이트 못지않은 사이트를 만들어 볼 수 있겠다!

+ Recent posts