Cha4SEr Security Study

[Web] 게시판 만들기_01. 부트스트랩 적용 본문

Web/Web_etc

[Web] 게시판 만들기_01. 부트스트랩 적용

Cha4SEr 2020. 7. 18. 14:51

 

 

 

 

이번 포스팅에서는 부트스트랩을 이용한 기본적인 게시판을 구축하는 방법에 대해 알아보겠습니다.

사용할 도구 및 툴은 부트스트랩, vscode, Python Flask, Pycharm 입니다.

 

 

부트스트랩 공식 사이트는 여기입니다.

 

https://getbootstrap.com/

 

Bootstrap

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

getbootstrap.com

들어가서 Download 탭에 들어가시면 

 

직접 다운로드 해서 쓰는것도 있지만

 

우리가 사용할 부분은 CDN입니다. 다운로드 받아서 직접 폴더에 넣어주는 방식이 아니라 저기 있는것들을 복사해서 
html 코드에 붙여넣기만 하면 부트스트랩에 정의되어 있는 css와 js를 사용할 수 있기때문에 좀 더 편합니다.

이 사이트를 켜놓은 다음 html 코드를 작성할 vscode를 켜봅시다.

 

 

[파일] - [폴더 열기]를 클릭해서 프로젝트를 진행할 폴더 하나를 만들어 준 다음 새 파일을 만들어 index.html이라고 
저장합니다.

 

vscode에서 html 코드를 작성할때 꿀팁은 빈 화면에 느낌표 하나를 친 다음 Tab 을 누르면

 

 

요로케 자동으로 틀을 잡아줍니다. 이제 여기서 부트스트랩 코드를 따와봅시다.

 

위에 있는 부트스트랩 CDN 사진에서

첫번째 줄:  <head> 태그의 마지막

두번째 줄:  <body> 태그의 마지막

세번째 네번째 줄 :  두번째 줄을 붙인 곳 바로 위에다가 붙여줍니다.

 

 

이런식으로!

 

이제 제대로 적용됐는지 테스트 해봅시다. 

부트스트랩 사용은 기본적으로 수많은 css style들을 class별로 정의해놓았기 때문에 본인 입맛에 맞게 
class를 사용하면 됩니다.

 

 

저는 btn btn-outline-info 라는 클래스를 사용했습니다.

 

vscode에서 제공하는 live server를 사용해 돌려보면

 

이렇게 버튼에 css가 적용된 것을 볼 수 있습니다.

 

마우스를 올려보니 배경색이 채워지네요

 

저도 부트스트랩을 많이 사용해보지 않은 상태라 각 class별로 어떤 결과가 나오는지는 잘 몰라서 이것에 대한 내용은 
따로 언급하지 않겠습니다. 

 

다만 저처럼 부트스트랩 잘 모르는 사람은 어떤 클래스가 있는지도 모르기 때문에 이런분들은 

 

vscode에서 제공하는 자동완성 기능을 사용해서 어떤 클래스가 어떤 결과가 나오는지 확인하고 맘에 드는 클래스를 
사용하시는 것을 추천드립니다.

 

 

이제 게시판의 기본인 테이블을 먼저 만들어 봅시다.

 

 

테이블에 사용할 클래스는 "table table-hover table-striped text-center" 입니다.

thead에 타이틀을 정의해주고 tbody부분에 실제 데이터를 넣어줍니다.

 

사용되는 클래스에 대한 설명은 다음과 같습니다.

 

table-hover : 마우스를 대면 색깔이 바뀜

table-striped : 홀수, 짝수행 마다 색을 다르게

text-center : 텍스트 가운데 정렬

 

얼추 테이블 모양이 생겼습니다. 이제 위에 타이틀을 달아봅시다.

 

적당히 위아래 공백을 주고 text-center와 a 태그로 감싸줍니다.

 

 

글씨가 파란색으로 변했는데 a 태그 사용하면서 부트스트랩에 정의된 스타일이 적용된거 같네요. 
나쁘지 않은것 같으니 그냥 냅두겠습니당

 

다음은 테이블이 너무 양옆으로 퍼져있기 때문에 가운데로 좀 줄일 필요가 있을것 같습니다. body에 속해있는 모든
부분을 div 감싼 다음 클래스를 container로 감싸면 자동으로 가운데로 줄여서 정렬을 시켜줍니다.

 

컨테이너로 감싸면

 

정당한 크기로 만들어줍니다. 

 

마지막으로 글쓰기 버튼과 페이지네이션을 만들어봅시다.

 

 

ul 태그에서 pagination 클래스를 지정해준 다음 justify-content-center 이것도 함께 지정해줘야 합니다. 이게 없으면 
페페이지네이션이 가운데에 있지 않고 왼쪽에 찰싹 붙어있습니다.

 

다음 li 태그로 번호를 매겨주면 되는데, 너무 다닥다닥 붙어있는것 같아 그냥 style로 마진을 적당하게 주었습니다. 
클래스에 정의된 text-secondary는 텍스트 색깔을 지정해 주는 것인데, 따로 설정을 안하니 위의 title에서 a태그를 
썼을 때와 똑같은 파란색이 나와서 설정해주었습니다.

 

버튼은 적당히 위에서 했던대로 지정해주었습니다.

 

적당히 게시판 같은 모습이 되었습니다 ㅎㅎ 

 

이번 포스팅은 여기까지 하고 다음 글에서는 Python Flask를 이용해서 웹 서버를 구축하는 법과 글쓰기 페이지까지
만들어보도록 하겠습니다.

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

[Web] 게시판 만들기_03.Flask페이지 이동(글쓰기 페이지 1)  (2) 2021.03.21
[Web] 게시판 만들기_02.Python Flask, Mysql 연동  (9) 2020.07.18
[Web] - JWT를 이용한 사용자 인증  (0) 2020.07.13
[Web] - HTTP / 쿠키와 세션  (0) 2020.07.13
'Web/Web_etc' Related Articles more
Comments