container
bootstrap을 사용하기 위해서는
container라는 클래스 안에 항상 선언되어있어야한다.
<div class = "container">로 section 태그들을 감싸준다.
<body>
<div class="container">
<section id = "main">
(생략)
</section>
</div>
</body>section 파트는 탭으로 들여쓰기하는 것을
잊지말고 해주도록 한다.
css 폴더 내 css 파일 만들기
defalut.css에는
전체에 영향을 주는 파일을
main.css에는
main부분에만 영향을 주는 파일로 만든다.
head 부분에 생성한 css 파일을
링크시켜준다.
<link rel="stylesheet" href="./css/defalut.css">
<link rel="stylesheet" href="./css/main.css">
defaul.css 수정해보기
잘 변경되어있는 것을 확인할 수 있다.
main 부분만 컬러 변경해주기
#main
앞에서 .(점)은 class, #은 id라고 했다.
우리는 각 섹션을 id로 나누어주었으므로
#main이라고 하면, main 아이디를 갖는 부분을 의미한다.
따라서
#main{ } 을 입력한 부분만 흰색으로 바뀌었다.
main 페이지 여백만들기
#main{
background-color: whitesmoke;
width: 80%;
}이렇게 메인페이지를 전체 가로사이즈의 80%만 채워주고 싶다.
그런데, 강의와 마찬가지로 아래처럼 뜬다.
왼쪽부터 80%를 채워주고
나머지 20%가 오른쪽에 남아
애매한 모양이 완성되었다.
중앙정렬을 해주고 싶으므로
왼쪽 10%, 오른쪽 10%
이렇게 정렬해주고싶다.
부트스트랩에서 margin 검색하기 (여백)
다양한 방법으로 여백을 줄 수 있다.
auto는 자동으로 여백을 주는 class이다
<div class="container">
<section id = "main" class="mx-auto">
<h3> 십이간지로 알아보는 연애유형 </h3>
mx-auto는 가운데정렬해주는 클래스임을 찾을 수 있다.
이미지 사이즈 변경해주기
이미지 클래스로 "img-fluid"가 들어가면
반응형 이미지가 만들어진다.
container를 12등분해주고
col-6로 6/12 사이즈로 이미지가 변형되게 해준다.
가운데 정렬하기
이미지 정렬은 mx-auto를 사용한다.
이미지 태그가 div 태그로 감싸져있으므로
div 클래스 내 mx-auto를 추가한다.
<div class="col-6 mx-auto">
<img src="./img/main.png" alt="mainImage" class="img-fluid">
</div>class가 이미 만들어져있으므로
해당 따옴표 안에 붙여넣어주는 것으로 적용된다.
#main{
background-color: whitesmoke;
width: 80%;
text-align: center;
}글씨정렬은 main.css에서
text-align 으로 정렬해준다.
replit 내에서 바로 적용되지않아서
새로고침했더니 잘 적용되었다.
직각이 아닌 둥근 네모로 만들기
#main{
background-color: whitesmoke;
width: 80%;
text-align: center;
border-radius: 20px;
}border-radius를 추가해준다.
네모 모서리부분이 둥글게 변했다.
margin-top으로 상단부분 여백주기
<div class="container">
<section id = "main" class="mx-auto mt-5 pb-5">
<h3 class="pt-5"> 십이간지로 알아보는 연애유형 </h3>mt-5 상단부분 여백!
pb-5 하단부분 여백!
<h3 class="pt-5"> 십이간지로 알아보는 연애유형 </h3>글씨부분은 margin이 아니라 padding으로 여백을 준다.
=>
이 부분을 py-5로 간략히 써준다.
<div class="container">
<section id = "main" class="mx-auto py-5">
<h3> 십이간지로 알아보는 연애유형 </h3>py = padding y축
장치 별 페이지 표시
https://justforfundoit.tistory.com/50
웹사이트 만들 때 개발자도구로 장치 별 화면 확인하기 (pc, 스마트폰 등)
개발자도구 - 장치 에뮬레이션 개발자도구에서 장치에뮬레이션(엣지기준) 클릭 크롬 등 다른 브라우저에서도 가능하다. 원하는 장치를 클릭하면 된다. 끝!!
justforfundoit.tistory.com
아주 간단한 정보지만
위 페이지에 나눠보았다.
<meta name="viewport" content="width=device-width, initial-scale=1">meta 태그를 생성해준다.
replit에서는 initial-scale 부분 말고는 자동으로 index.html 파일에 자동완성 되어있다.
해상도 별 이미지 크기 지정해주기
<div class="col-lg-6 col-md-6 col-sm-6 col-12 mx-auto">
<img src="./img/main.png" alt="mainImage" class="img-fluid">
</div>
폰트변경하기
구글폰트 > korean> 링크복사
head 영역에 link 복사 붙여넣기
body{
background-color: pink;
}
*{font-family: 'Nanum Pen Script', cursive;}defaul.css에 붙여넣어주기
*은 css 선택자, 모든것에 해당한다는 의미이다.
'MBTI 테스트 프로젝트' 카테고리의 다른 글
| [MBTI 테스트(6)] QnA 화면 구현하기 (innerHTML, createElement, addEventListner) (0) | 2023.04.13 |
|---|---|
| [MBTI 테스트(5)] 판다코딩 유튜브_화면전환하기 (애니메이션으로 화면 서서히 사라지기/나타나기) (0) | 2023.04.12 |
| [MBTI 테스트(3)] 판다코딩 유튜브_Bootstrap이란? 설치부터 부트스트랩 css 사용까지 (0) | 2023.04.09 |
| [MBTI 테스트(2)] 판다코딩 유튜브_강의 주의사항 및 페이지 레이아웃, git hub에서 다운받기 (0) | 2023.04.09 |
| [MBTI 테스트(1)] 판다코딩 유튜브_ATOM 에디터 패키지 설치하기 > 실패 > replit으로 변경... (0) | 2023.04.09 |
