웹 개발 종합반 1주차 TIL - CSS 기초
웹 개발 종합반 1주차 TIL - HTML 기초웹의 뼈대인 HTML😊 html은 웹페이지에서 뼈대를 담당 ✅ HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드 😊 ! 웹의 전반을 HTML을 통해서 작성. ✅ CSS
taejudevlog.tistory.com
☝️위의 글을 읽어보고 읽으면 이해가 됩니다!
구글 폰트 가져다 쓰기
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1. 크롬 / 웨일 브라우저에서 Google Fonts를 검색
2. Google Fonts 사이트에서 필터를 클릭해 언어를 korean ( 한국어 ) 로 변경
3. 원하는 폰트를 클릭해 화면 오른쪽 상단의 Get font 를 클릭
4. Get embed code 버튼을 클릭 -> Web 탭에서 import 버튼을 클릭
5. <style></style> 태그 안에 묶인 코드만 복사해서 style 태그 안에 넣습니다!
6. CSS class탭의 코드를 복사한 후, 전체 적용(*{ } )을 css에 넣으면 완성!
* {
font-family: "Gowun Dodum", sans-serif;
}
구글 폰트 적용 완료
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");
* {
font-family: "Gowun Dodum", sans-serif;
}
.mytitle {
background-color: green;
width: 300px;
border-radius: 10px;
color: white;
text-align: center;
padding: 30px 0px 10px 0px;
padding-bottom: 10px;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-position: center;
background-size: cover;
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
.login_button {
width: 80px;
height: 30px;
padding: 3px 3px;
border-radius: 15px;
border: 1px solid black;
background-color: #e2a9f3;
font-weight: 600;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button class="login_button">로그인하기</button>
</div>
</body>
</html>
부트스트랩 사용해보기
💡 부트스트랩 : 예쁜 CSS를 미리 모아둔 템플릿 모음
✓ CSS를 다룰 줄 아는 것과 이쁘게 만드는 것은 다른 이야기이기 때문에 미리 완성해놓은 부트스트랩을 사용
❤️부트스트랩을 활용하여 첫 번째 프로젝트 추억 앨범 만들기
✓ 미리 작성한 CSS를 불러와 내 HTML 파일에 사용하기 위해서는 설정을 해야 함
✓ 설정을 통해 Bootstrap 라이브러리의 CSS의 기능을 사용할 수 있음
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
부트스트랩 버튼
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
다음 글에서는 부트스트랩 ( 이쁜 CSS 템플릿 ) 으로 추억앨범 프로젝트를 완성해보자 !!
728x90
'내배캠_Java 6기 > 웹개발 종합반 강의' 카테고리의 다른 글
| 웹 개발 종합반 1주차 - HTML, CSS, Bootstrap으로 추억앨범 만들기 2 (0) | 2024.07.04 |
|---|---|
| 웹 개발 종합반 1주차 - HTML, CSS, Bootstrap으로 추억앨범 만들기 1 (0) | 2024.07.03 |
| 웹 개발 종합반 1주차 TIL - CSS 기초 (0) | 2024.07.03 |
| 웹 개발 종합반 1주차 TIL - HTML 기초 (0) | 2024.07.02 |
| 웹 개발 종합반 1주차 TIL - 웹 브라우저 작동 원리 (0) | 2024.07.02 |