구글폰트
HTML 코딩을 한 뒤 브라우저에서 볼 때 폰트가 기본 스타일로 되어있어 다소 심심해 보인다. 더 보기 쉽고 개성 있는 웹페이지를 만들기 위해 구글에서 재공 하는 폰트들을 이용하여 웹페이지를 꾸밀수있다(https://fonts.google.com/).
@import url('https://fonts.googleapis.com/css2?family=Dongle&family=Orbit&display=swap');
*{
font-family: "Orbit", sans-serif;
font-weight: 400;
font-style: normal;
}
Google Font사이트에서 원하는 폰트를 지정한뒤 위와같은 CSS일부를 style 태크 내부에 집어넣으면 폰트를적용시킬수있다.
부트 스트랩
Bootstrap은 Twitter에서 개발한 오픈 소스 프론트엔드 프레임워크이며 웹 개발을 보다 쉽고 빠르게 할 수 있도록 도와준다. 설계된 Bootstrap은 HTML, CSS, JavaScript를 기반으로 하여, 반응형 웹 디자인을 지한다. 웹 페이지의 구성 요소들을 일관되게 스타일링하고, 레이아웃을 쉽게 구축할 수 있는 다양한 도구와 스타일을 제공한다. 부트스트랩을 적용시키려면 아래와같은 코드를 style 태그내부에 적용시켜야한다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
그뒤 원하는 레이아웃을 body 부분 적절한곳에 적용시켜 웹페이지를 꾸밀수있다.
<div class="mybtn">
<button type="button" class="btn btn-dark" id="postingbtn">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
(부트스트랩 중 버튼레이아웃을 사용한 예시)
활용
오늘배운것들을 바탕으로 아주 간단하게 웹페이지를 꾸미는 실습을했다. 아직 서버연결이나 상호작용이가능하지는 않지만 그래도 재미있는경험이였다!
