css 파일에서 width :80% 입력하면 왼쪽부터 80임.
#main{
background-color: whitesmoke;
width: 80%;
} 
- bootstrap에서 margin 검색
m은 margin이고 x로 left and right 조절, auto로중앙으로 -> main에 클래스 만들기
- 맨 마지막 줄 main 옆에 class="mx-auto" 입력
<body>
<div class="container">
<section id="main" class="mx-auto">- bootstrap에서 image검색
fluid가 붙으면 이미지를 감싸고 있는 div 태그의 크기를 따라감.
container는 12등분이고, img 위에 div.col-6을 입력해서 div태그로 img 감싼다.
항상 img는 6/12가 되도록 fluid 할 것임.
지금까지 결과
알게된 점: class 만들고 싶으면 div.이름 / section 만들고 싶으면 section#이름
<body>
<div class="container">
<section id="main" class="mx-auto">
<h3>십이간지로 알아보는 연애유형</h3>
<div class="col-6 mx-auto">
<img src="./img/main.png" alt="mainImage" class="img-fluid">
</div>
<p>
내가 만드는 최고의 어쩌고
저쩌고
요를레이히 유후후후휘이ㅏㅓ란어러니ㅓㅇㄻ너
아ㅓㄹ나ㅓㄹ넝리
</p>
<button type="button" class="btn btn-danger">시작하기</button>
</section>
<section id="qna">
</section>
<section id="result">
</section>
</div>
</body>
</html>
'Html & Css' 카테고리의 다른 글
| [Html]Meta 태그 수정하기 , favicon 만드는 법 , netlify 로 배포하기 (0) | 2024.11.28 |
|---|---|
| [html&css&bootstrap] 구글폰트 웹사이트 전체 적용 방법, 웹사이트 모바일 버전 확인하기 (+ 테두리 둥글게 border-radius , 줄 간격 pt,pb,py,px ) (2) | 2024.11.25 |
| [html] bootstrap 이용해서 button 꾸미기 (0) | 2024.11.24 |
| [html] 십이간지로 알아보는 연애유형 사이트 project 초안 (1) | 2024.11.24 |
| [html] vs code에서 html 여는 방법/기본 세팅 하는 방법 (0) | 2024.11.24 |