안녕하세요. 오늘은 bootstrap을 이용하여 CSS대신 레이아웃을 중앙에 쉽게 배치하겠습니다.
사용법은 간단합니다.
- bootstrap 적용 전, 적용 후
- bootstrap 셋팅
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<head>태그에 위 코드를 추가해주면 바로 적용이 됩니다.
<div class="container">
<!-- content -->
</div>감싸고싶은 태그에 class속성 값으로 container를 입력해줍니다.
그러면 끝났습니다.
- 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<h4 class="">세이노의 가르침</h4>
<p>
P. 29
당신 생각대로라면 이른바 재테크 전문가라는 사람들이 모두 부자이어야 하는데 그들의 평균 재산은 다른 직장인들과 크게 다르지 않다. 물론 나에게서 실전 투자 기법을 배우면 돈을 더 벌 수도 있을 것이다. 그러나 나는 당신이 스스로의 삶에 대한 태도부터 바로 세우지 않는 한 절대 부자가 될 수 없다고 하면서당신을 한심한 사람으로 매도하고 독설을 퍼붓는 사람이다. 자기 삶의 노예가 되어 자기 생활과 시간을 통제하지 못하는 사람이 어떻게 돈의 주인이 될 수 있단 말인가. 접기 - 루피닷
</p>
<p>
P. 66
가시적 결과를 외부에서 찾지 말고 내부에서 찾아라. 당신 자신의 노력을 인정해 주고 칭찬하여야 할 주체는 타인이나 직장이나 사회가 아니다.
왜 상을 누군가로부터 받으려고 하는가. 상은 당신이 자기 자신에게 주는 것이 진짜이다. 새겨들어라. 훌륭한 화가는 자기 그림이 마음에 들 때까지 붓을 놓지 않는 법이다. 당신 역시 자신이 알고 있는 지식수준에 스스로 흡족할때까지 공부하고 노력해라. 스스로 얻게 되는 뿌듯함, 내가 여기까지 알게 되었구나 하는 벅찬 기쁨, 이런 것들을 소중히 여길 때 스트레스는 사라진다.
</p>
</div>
</body>
다른 bootstrap을 적용해보고싶으시면 아래 공식사이트를 참고하세요
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] table contenteditable 속성 사용하기 (0) | 2023.06.24 |
|---|---|
| [HTML/CSS] bootstrap Grid, border (0) | 2023.06.12 |
| [HTML/CSS] ] css만으로 움직이는 배너 만들기 (0) | 2023.05.30 |
| [HTML/CSS] CSS만으로 마우스 hover시 효과 내기 (0) | 2023.05.14 |
| [HTML/CSS] Webrtc N:M 실시간으로 영상 전송하기 (0) | 2023.03.21 |
