삶의 공유
[Project] HTML & CSS 이용하여 Web page만들기 1편 [Icon, bootstrap, font 설정] 본문
[Project] HTML & CSS 이용하여 Web page만들기 1편 [Icon, bootstrap, font 설정]
dkrehd 2024. 3. 22. 09:16
안녕하세요 24년 목표 달성을 위해 웹개발을 본격적으로 하기로 맘먹은지 어느덧,, 3달이 훌쩍 지났지만..
이제 느리지만 꾸준히 프로젝트 하나하나 수행하면서 제 역량을 올리려고 합니다.
많이 부족하겠지만,, 조금씩 늘어날 제 역량을 기대하며,, 시작하겠습니다.
프로젝트 완성본을 먼저 보여드리면, 아래의 Github 홈페이지와 비슷하게 만들어보려고 합니다 !!
자 바로 시작하겠습니다.
환경 Setting
vscode를 설정하시고 프로젝트를 수행할 폴더를 열기 하셔서 아래와 같이 폴더를 설정합니다.
- images폴더
- index.html
- main.css
- favicon.png (icon image)
그리고 index file에 css 파일과 연결 시킬 link 구문을 title 밑에 추가합니다.
<link rel="stylesheet" href="./main.css">
그리고 웹페이지를 설정하기 위해 확장 패키지인 Live Server를 설치합니다.
위 확장팩을 설치 하신 후 index 폴더 안에서 마우스 우클릭 하여 보이는 Open with Liver Server를 클릭 하시면 됩니다.
자 이제 준비는 마쳤습니다.
웹페이지 제작 바로 시작합니다 !
1. Icon 설정
자 이제 처음 구현된 홈페이지는 아래와 같습니다. 아이콘 모양(빨간색 네모박스) 을 보시면 기본 모양이 보이시는데요, 요 부분을 수정하겠습니다
먼저 깃허브 홈페이지 에서 아래 깃허브 대표 아이콘(빨간 네모 박스) 모양을 캡쳐 후 favicon.png라고 저장 후 저희 프로젝트 폴더로 가져옵니다.
그리고 index.html 파일에서 앞에서 만든 css 파일 연결 하는 link 구문 위에 동일한 link 구문에 이번에는 icon을 연결하는 구문을 추가합니다.
<!-- FAVICON -->
<link rel="icon" href="./favicon.png">
그럼 아래와 같이 아이콘 모양이 바뀐것을 볼 수 있습니다.
2. Bootstrap 연결
구글 검색창에서 boostrap을 검색 하신 후에 사이트에 들어가셔서 Docs 를 들어가시면 아래와 같은 화면이 나옵니다.
https://getbootstrap.com/docs/5.3/getting-started/introduction/
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
스크롤을 조금 내리시면 2번항목에 CSS Link가 head 안에 link tag 에 있다는 정보를 알 수 있습니다. 이 link tag를 전부 복사해서 저희 코드에 붙여넣어줍니다.
두번째로 Java Script 코드도 붙여 줍니다.
붙여 넣으실때는 아래와 같이 Main css 연결 구문과 icon 구문 사이에 넣어주셔야합니다.
자 이제 잘동작하는 지 확인 해보기 위해 Body tag에 버튼을 하나 만들어줍니다.
아래의 코드를 입력한 뒤에 CSS 가 적용 되면 어떻게 나오느지 먼저 bootstrap docs 에서 확인해봅시다.
<button class="btn btn-success">Click!</button>
제대로 적용이 되었다면 아래와 같이 초록색 배경화면에 Click! 이라는 하얀색 글자색이 나타날 것입니다.
Live Server를 통해 확인해보면, 잘 나온 것을 확인 하여 Bootstrap이 잘 연결 된 것을 확인 할 수 있습니다.
3. Web Font 설정
웹에서 사용하는 Font는 웹 전용 Font를 사용해야 합니다 (Font가 상당히 무겁기 때문)
구글 검색 창에 Google fonts라고 검색을 해줍니다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
저는 Popins라는 폰트를 사용하려고 합니다.
검색창에 pop라고 검색을 하면 맨 아래에 Popins가 나오는 것을 확인 할 수 있습니다.
Popins를 검색해서 들어가면 아래와 같이 다양한 크기의 글씨체가 있습니다. 폰트의 크기는 100 ~ 900까지 100단위로 9단계로 나뉘어져 있습니다. 그리고 두께는 Thin, Light 등 다양하게 있습니다.
이제 위에 Get font버튼을 눌러줍니다.
그런 다음에 Get embed code 버튼을 눌러줍니다.
그런 다음에 이제 가져올 font 유형을 선택 합니다. Web Font라고 해도 상당히 무겁기 때문에 다가져오는 것이 아니고, 사용할 유형만 가져 옵니다. 저희는 Light 300, Bold 700만 가져올 것이기 때문에 아래와같이 설정해줍니다.
그런 다음에 Web, Link를 선택 후 html 내용이 있는 부분의 Copy Code 을 눌러줍니다.
복사된 Code 를 index.html 파일에서 icon 연결했던 구문 아래에 붙여 줍니다.
여기서 끝나는게 아니라 아래에 있는 CSS 코드도 가져와야합니다. 여기는 다가져오는 것이 아니라 font-family(빨간 박스) 라는 부분과 font-weight 까지만 가져올 것 입니다.
그리고 main.css 파일 안에 body tag안에 해당 코드를 넣어줍니다.
body {
font-family: "Poppins", sans-serif;
font-weight: 300;
}
Popins뒤에 sans-serif가 있는 이유는 네트워크등 문제로 인터넷이 되지 않을때 웹의 폰트를 가져오지 못하기때문에 사용자 컴퓨터에 설치되어 있는 해당 폰트로 구현을 하겠다는 의미로, back up용이라고 생각하시면 됩니다.
위에서 만든 종합 코드 입니다.
1. index html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Github</title>
<!-- FAVICON -->
<link rel="icon" href="./favicon.png">
<!-- GOOGLE FONTS -->
<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=Poppins:wght@300;700&display=swap" rel="stylesheet">
<!-- BOOSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- Main CSS -->
<link rel="stylesheet" href="./main.css">
</head>
<body>
<button class="btn btn-success">Click!</button>
</body>
</html>
2. main.css
body {
font-family: "Poppins", sans-serif;
font-weight: 300;
}
'Web Dev > HTML&CSS' 카테고리의 다른 글
| [Mini Project] CSS, HTML 활용하여 Mondrian 그림 그리기 (1) | 2024.09.20 |
|---|---|
| [HTML예제] 간단한 Website Project를 만들면서 HTML 익히기-2 (0) | 2024.02.03 |
| [HTML예제] 간단한 Website Project를 만들면서 HTML 익히기 (0) | 2024.02.03 |
