- 테두리 둥글게 하는 법
- border-radius
#main{
background-color: whitesmoke;
width: 80%;
text-align: center;
/* main의 테두리를 둥글게 */
border-radius: 20px;
}
- 줄, 간격 조정
메인이 딱 달라붙어있는 것을 떼고 조금 띄우도록 mt-5(margin top)
글자는 위를 띄우려면 pt-5 (padding top)
버튼 아래를 조금 띄우도록 pb-5(padding bottom) by. bootstrap
<body>
<div class="container">
<section id="main" class="mx-auto mt-5 pt-5" pd-5 >
* 다른 방법으로 표현하기(py, px)
- pt, pd 는 합쳐서 py-5로 나타낼 수 있음
- 가로는 px-3으로 임의입력
웹사이트에서 terminal 확인하는 방법
- 마우스 오른쪽 버튼-> 검사
모바일 버전 확인하는 방법
- 마우스 오른쪽 버튼 -> 검사-> 장치 에뮬레이션 토글 (ctrl+Shift+m)
모바일에서도 비율 조절하는 방법
-html 파일에서 meta name에서 너비는 (device-width) 값을 따르고 , 비율(initial-scale) 1이다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><p>안에서 줄 나누는 방법
-라인 브레이킹 <br>
<p>
나만의 MBTI 사이트입니다! <br>
아래 시작하기 버튼을 눌러 시작해 주십시오.
</p>
접근하는 기기에 따라 이미지의 크기를 다르게 하고 싶을 때
- col-lg-6 /col-md-8 /col-sm-10
<div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">
<img src="./img/main.png" alt="mainImage" class="img-fluid">
</div>
폰트 웹사이트에 적용하는 방법( 구글 폰트 )
:구글 폰트
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1. 구글 폰트에 접속하고 Filters를 클릭
2. language에 원하는 언어 입력 (나는 korean)
3. 원하는 폰트 클릭
4. Get font 버튼 클릭
5. get imbeded 버튼 클릭 후 copy code하여 각각 html, css 파일에 붙여넣기
폰트를 모든 페이지에 적용시키고 싶을 때
*{} 이용하기
*{
font-family: "Jua", sans-serif;
font-weight: 400;
font-style: normal;
}
지금까지 완성된 main 페이지 코드(3장)
default.css
body{
background-color: pink;
}
/* *은 모든 것에 해당시키겠다는 의미 */
*{
font-family: "Jua", sans-serif;
font-weight: 400;
font-style: normal;
}main.css - 폰트 크기 지정할 때 p{}
#main{
background-color: whitesmoke;
width: 80%;
text-align: center;
/* main의 테두리를 둥글게 */
border-radius: 20px;
}
/* <p>의 폰트크기 */
p{
font-size: 20px;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 부트스트랩에서 가지고 온 css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- 구글폰트 입력 -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<!-- css파일 연결 -->
<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/main.css">
</head>
</head>
<body>
<div class="container">
<section id="main" class="mx-auto mt-5 py-5 px-3" >
<h1>십이간지로 알아보는 연애유형</h1>
<div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">
<img src="./img/main.png" alt="mainImage" class="img-fluid">
</div>
<p>
나만의 MBTI 사이트입니다! <br>
아래 시작하기 버튼을 눌러 시작해 주십시오.
</p>
<button type="button" class="btn btn-danger mt-2">시작하기</button>
</section>
'Html & Css' 카테고리의 다른 글
| [Html&css] 카카오톡 공유버튼 구현하기(kakaotalk API) & 결과 페이지 공유하기 (4) | 2024.11.28 |
|---|---|
| [Html]Meta 태그 수정하기 , favicon 만드는 법 , netlify 로 배포하기 (0) | 2024.11.28 |
| [html&css] 폭 width, 가운데 정렬 mx-auto, 크기에 맞게 이미지 조절img-fluid (0) | 2024.11.24 |
| [html] bootstrap 이용해서 button 꾸미기 (0) | 2024.11.24 |
| [html] 십이간지로 알아보는 연애유형 사이트 project 초안 (1) | 2024.11.24 |