얼음꽃의 일지

폰트, 부트스트랩을 이용한 웹페이지 본문

웹개발 개발일지/1주차

폰트, 부트스트랩을 이용한 웹페이지

얼음꽃 2022. 8. 30. 14:34
728x90

이번에는 폰트와 부트스트랩을 이용한 웹페이지 형태를 보여드리겠습니다.

폰트, 부트스트랩, 이전에 배운 내용으로 만든 웹페이지

코드를 보기에 앞서 폰트와 부트 스트랩 사이트 부터 알려드릴려고 합니다.

 

 

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

폰트는 사이트에 들어가서 사용하고자 하는 폰트를 가져올 수 있습니다. 예를 들어

 

폰트 중 하나

원하는 폰트를 하나 들어가신 후 밑으로 쭉 내리면

 

폰트 중 하나

Style이라는 부분이 존재합니다 여기서 Regular 400 + 모양을 누르시게 되면 

폰트 중 하나

이러한 Review가 나오고 제가 표시한 부분만 코드에서 사용하게 됩니다.

 

부트 스트랩은 html에서 사용할 수 있는 코드의 라이브러리라고 보시면 됩니다.

목록 중 아무거나 들어가서 사용하고자 하는 코드를 복사해 붙여 넣으시면 바로 사용이 가능합니다.

 

폰트, 부트 스트랩을 가지고 웹페이지를 만들어 보겠습니다.

 

먼저 부트스트랩을 이용하기 위해서는 코드가 필요합니다.

부트스트랩을 사용하기 위한 코드

이 코드를 붙여서 사용해야하기 때문에 복사해서 쓰실수 있도록 밑에다 붙여놓겠습니다.

(밑의 코드를 클릭 후 Ctrl + c 누르신 후 Pycharm에 가셔서 Ctrl + v 하시면 됩니다. )

이 코드는 <head>와 <title> 사이에 넣어주시면 됩니다.

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

이제 사진을 다시 보고 기본적인 것을 해보자면

폰트, 부트스트랩, 이전에 배운 내용으로 만든 웹페이지

큰 상자 안에 내 생애 최고의 영화들 과 영화 기록하기 버튼이 존재합니다. 따라서 div로 묶어주게 되면

 

큰 틀

이런 형식이 됩니다. 참고로 버튼 부분은 부트 스트랩에서 가져온 것입니다. 

 

위치는 부트스트랩 사이트 -> Components -> Buttons -> Outline Buttons 에 Dark 버튼입니다.

(이건 따로 붙여넣기 위한 서식을 안해두겠습니다. 직접 들어가보고 원하는 버튼이 있으시면 다른걸로 바꾸셔도 됩니다.)

 

이제 큰 틀(상자)는 만들어졌으니 CSS 를 이용해서 꾸며 보겠습니다.

 

먼저 큰 틀인 mytitle부터 보자면 사진으로 봤을때, 1) 안의 사진이 있고, 2) 내용물의 글씨가 흰색이고, 3) 내용물의 가운데 있으며, 4) 큰 틀의 크기가 가로는 끝까지 세로는 어느정도 주어진거 같습니다. 그 내용을 <style></style>에 담아보면

 

(사진은 인터넷 가셔서 저작권에 걸리지 않는 사진을 찾아 오른쪽 마우스 클릭 - 이미지 주소 복사 하시면 됩니다. )

 

class="mytitle" CSS 부분

이런 형식입니다. 참고로! 이전 내용에서 글씨를 가운데로 옮길때에는 text-align:center를 사용을 했는데 이번에는 내용물 전체를 옮기는거기 때문에 display:flex, flex-direction:column, align-content:center, justify-content:center를 묶어서 그대로 써주시면 됩니다. 이 4개는 항상 같이 따라다닌다고 생각하시면 됩니다.

 

추가로 안의 내용물을 가로로하고 싶다 그럼 flex-direction부분을 column이 아닌 row로 바꿔주시면 됩니다.

 

그리고 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 부분은 명암 조절이라고 생각하시면 됩니다.

 

두번째로 btn부분을 꾸며주게 되면

 

button CSS 부분

이런 형식이 되겠습니다. 이전 게시물에서는 button에게 class를 부여해서 .class 이름을 이용해서 했지만 이번에는 다른 방식인 "틀 안의 있는 버튼" 이라고 해서 .mytitle > button을 사용해줬습니다.

( 만약 이렇게 사용하게 되는 경우 mytitle 틀안에 여러 버튼이 존재하면 모든 버튼에게 적용 되니 그 점 유의하세요!! )

 

저 코드를 해석해 드리면

가로 : 200px, 세로 : 50px,

배경색 : 투명, 글씨색 : 흰색 ,

귀퉁이 둥근정도 : 50px,

경계선 : 1px 실선 흰색,

위쪽 여백 : 10px

이라고 보시면 됩니다.

 

hover라는 새로운 코드가 존재하는데요 hover라는 것은 커서를 뒀을때 주는 변화를 의미합니다. 여기서는 button:hover이기 때문에 버튼에 마우스 커서를 가져다두면 생기는 변화 라고 생각하시면 되겠습니다.

 

hover는 단순히 1px이었던 버튼 경계선은 2px로 두껍게 만들었습니다.

 

마지막으로 폰트를 사용해서 글씨의 변화를 주겠습니다.

 

폰트 변화 주기

다음 코드 처럼 폰트 Review에서 사용한다고 했던 부분을 넣어 주게 됩니다. 여기서 <link> 부분은 <title>과 <style>사이에 넣어주시고, " * " 을 사용하면 html 전체 글씨에 변화를 주겠다는 뜻입니다. 그러므로 *{}을 하셔서 Review 밑에 CSS 내용물을 복사해서 붙여주시면 폰트 변경 끝입니다.

 

전체 코드입니다. ( 양이 조금 많아서 글씨가 작게 보입니다 ㅜ.ㅜ )

 

 

728x90