항해 99/사전 기본 스터디

WIL _ 구글 웹 폰트, 부트스트랩 활용

U_D 2022. 2. 22. 17:01

1. 구글 웹 폰트 활용

먼저 구글 폰트에서 마음에 드는 폰트를 선택한다. (*아래 구글폰트 링크 참고)

https://fonts.google.com/?subset=korean
 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

 

1. 폰트 Select this style 클릭

2. link 복사해서 html 파일의 <head>에 붙여넣기

3. CSS 복사해서 <style>에 *{} 입력하여 붙여넣기(폰트 전체에 적용됨)

 

 

<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gugi&family=Hi+Melody&family=Jua&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Jua', sans-serif;

        }

 

2. 부트스트랩 활용

- bootstrap이란?

예쁜 CSS를 미리 모아둔 것

(CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많음.)

 

- bootstrap 시작 템플릿

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <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>

    <title>부트스트랩 연습하기</title>
</head>

<body>

</body>

</html>

 

- bootstrap 사이트

https://getbootstrap.com/docs/5.0/components/buttons/
 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

- 활용 예시

 

 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <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>

    <title>부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            height: 200px;
            width: 100%;
            /*!*url 앞에 약간 어두운 박스를 입히는 효과*! linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))*/
            background-image: url("https://cdn.notefolio.net/img/02/3f/023f54126cb817986609b1f0087dd5a71ebc1c606a3f450382b806a975b3d112_v1.jpg");
            background-position: center;
            background-size: auto;


            color: dimgray;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mytitle > button {
            width: 150px;
            height: 40px;

            background-color: transparent;

            border-radius: 50px;

            border: 1px solid dimgray;

            margin-top: 20px;
        }

        /*클릭시 버튼이 변하도록 태그가 hover*/
        .mytitle > button:hover {
            border: 3px solid dimgray;
        }

        .mycomment {
            color: dimgray;
        }

        .wrap {
            width: 1200px;
            margin: 40px auto 0 auto;
        }

    </style>

</head>

<body>
    <div class="mytitle">
        <h1>2022년 가사 외울 노래</h1>
        <button>노래 등록하기</button>
    </div>
    <div class="wrap">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="https://image.bugsm.co.kr/album/images/500/4132/413209.jpg" class="card-img-top"
                         alt="...">
                    <div class="card-body">
                        <h5 class="card-title">성시경 - 너의 모든 순간</h5>
                        <p class="card-text">여기에 가사가 들어가지요</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://image.bugsm.co.kr/album/images/500/4132/413209.jpg" class="card-img-top"
                         alt="...">
                    <div class="card-body">
                        <h5 class="card-title">성시경 - 너의 모든 순간</h5>
                        <p class="card-text">여기에 가사가 들어가지요</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://image.bugsm.co.kr/album/images/500/4132/413209.jpg" class="card-img-top"
                         alt="...">
                    <div class="card-body">
                        <h5 class="card-title">성시경 - 너의 모든 순간</h5>
                        <p class="card-text">여기에 가사가 들어가지요</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://image.bugsm.co.kr/album/images/500/4132/413209.jpg" class="card-img-top"
                         alt="...">
                    <div class="card-body">
                        <h5 class="card-title">성시경 - 너의 모든 순간</h5>
                        <p class="card-text">여기에 가사가 들어가지요</p>
                        <p>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

3. 자주쓸 것 같은 CSS 기억하기

  • 배경을 투명하게 처리하는 속성 : background-color: transparent; 
  • 요소들을 중앙 & 가운데 정렬해주는 속성 *4개 세트로 사용

      - display: flex; container와 item에 flex 관련된 속성부여, 요소들의 배치가 inline화(한줄에 배치) 됨
      - flex-direction: column; /row item들의 정렬과 배치 방향을 설정하는 속성, column 열 정렬, row 행 정렬
      - align-items: center; item과 container간에 수평방향으로 여백을 두는 방식을 지정 (가운데 정렬)
      - justify-content: center; item과 container간에 수직방향으로 여백을 두는 방식을 지정 (중앙 정렬)

  • 선 두께, 모양, 색상 한번에 적용 : border: 1px solid red;

 

4. 알아두면 좋은 간단한 기능들

  • 마우스 오버 시, 버튼 선 굵기 변화, 아래 태그 참고
.mytitle > button:hover {
    border: 2px solid white;
        }

 

  • background-image 톤 어둡게 처리 시, 이미지 url 앞에 아래의 태그 붙여넣기
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

*linear-gradient

 : 선형 그레디언트, 한 방향에서 다른 방향으로 색이 점차 흐려지거나, 색이 변화하는 효과를 줄 때 쓰는 속성

 : 'deg'는 각도를 의미

   (0deg는 아래에서 위, 45eg는 하단 왼쪽에서 상단 오른쪽, 90deg는 왼쪽에서 오른쪽, 180deg는 상단에서 하단 방향)
 : 'rgba'는 red, green, blue, alpha(투명도_0.0 완전 투명, 1.0 완전 불투명)

'항해 99 > 사전 기본 스터디' 카테고리의 다른 글

WIL _ Ajax 활용  (0) 2022.02.23
WIL _ JQuery 활용  (0) 2022.02.23
WIL _ Javascript 기초 문법  (0) 2022.02.22
WIL _ 부트스트랩 활용하여 포스팅 박스 만들기 (feat.모바일 처리)  (0) 2022.02.22
WIL _ HTML, CSS 기초  (0) 2022.02.22

'항해 99/사전 기본 스터디'의 다른글

  • 현재글WIL _ 구글 웹 폰트, 부트스트랩 활용

관련글

댓글

티스토리툴바