스파르타코딩클럽

[스파르타] 3일차_CSS 활용(1-7 ~ 1-11)

yeguu 2022. 5. 4. 17:58

오늘은 5강을 듣는 게 목표다!

1-7~1-11까지 들을 예정이다. 오늘도 파이팅!

 

1-7. 폰트, 주석, 파일분리

 

# 폰트

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

 

Google Fonts

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

fonts.google.com

 

구글 웹폰트에 들어가서 원하는 폰트를 선택한다.

 

 

link 태그를 복사해서 <head> ~ </head> 사이에, CSS를 복사해서 <style> ~ </style> 사이에 넣는다.

 

<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <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=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        * {
           font-family: 'Nanum Pen Script', cursive;
        }

 

'Nanum Pen Script'라는 폰트를 선택했고, 

link 태그는 <title> ~ </title> 아래에, CSS는 <style> ~ </style> 사이에 넣은 코드다.

 

위의 폰트를 적용하면 페이지의 글꼴이 변경되는 것을 알 수 있다.

 

 

## 주석

1) 필요 없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때

2) 코드에 대한 간단한 설명을 붙여두고 싶을 때

주석을 사용한다.

 

단축키: 주석 처리하고 싶은 라인들을 선택 → Ctrl(또는 Command) + / (슬래시)

 

 

### CSS 파일 분리

<style> ~ </style> 부분이 너무 길어져서 보기 어려울 때 파일을 분리해 둘 수 있다.

(사실 이 부분은 튜터님만 하셔서 이해를 다 하진 못했다ㅠㅠ)

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

 

 

1-8. 부트스트랩, 예쁜 CSS 모음집

 

# bootstrap이란?

예쁜 CSS를 미리 모아둔 것을 말한다.

 

 

## bootstrap - 시작 템플릿

[코드스니펫]에 있던 코드를 복사해서 새로운 html을 만들었다.

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

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>

<body>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html>

 

 

https://getbootstrap.com/docs/4.0/components/alerts/

 

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

 

위의 부트스트랩에서 미리 작성된 CSS를 복사해서 <h1> ~ </h1> 자리에 집어넣었다.

 

<body>
    <button type="button" class="btn btn-primary">나는 버튼이다</button>
</body>

이미 만들어진 버튼 CSS를 복사해서 붙여 넣으면 위와 같은 버튼을 손쉽게 만들 수 있다.

 

부트스트랩을 알기 전에 CSS를 배우며 이런 것을 하나하나 어떻게 만드는지 조금 난처했는데 역시 기술의 발전이란...

부트스트랩으로 내가 원하는 CSS를 빠르게 이용할 수 있어서 매우 매우 편리하다!! 우하하

 

 

1-9. Bootstrap(부트스트랩)을 써보자!

 

 

위와 같은 메모장을 만드는 과정을 밟았다.

 

1. 맨 위의 Jumbotron을 부트스트랩에서 복사해서 <body> ~ </body> 사이에 넣는다.

2. 아래쪽의 Card를 부트스트랩에서 복사해서 ~ 사이에 넣는다.

 

위와 같이 내가 원하는 카드가 다른 형태와 묶여 있는 경우에는

일단 코드를 복사한 후 원하는 카드의 코드를 찾고, 나머지를 삭제하면 된다.

 

이때 마우스 오른쪽 버튼 > 검사를 이용하면 쉽게 찾을 수 있다.

또한 예시처럼 똑같은 카드가 6개 있어야 하기 때문에 <div class="card"> ~ </div>를 복사하여 6개로 만들어 주었다.

 

 3. 원하는 사진의 링크 주소를 복사하여 src에 값을 지정해 주면 된다.

<div class="card">
            <img class="card-img-top" src="https://img.insight.co.kr/static/2021/01/10/700/img_20210110130830_kue82l80.webp" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>

 

튜터님은 로마 사진을 사용하셨지만 방구석 관종은 짱구 사진을 넣었다..

 

쏘 큐트,,,

 

4. jumbotron과 card가 화면 전체 사이즈로 맞춰져 있기 때문에 이를 가운데 정렬, 사이드 여백을 둔 형태로 만든다.

<body> ~ </body> 사이에 새로운 <div></div>를 만든 후, jumbotron과 card를 집어넣는다.

새로 만들어진 <div>에 wrap이라는 클래스를 지정해 준다.

<head> ~ </head> 사이에 <style></style>을 만든 후, wrap에 대한 width와 margin을 설정한다.

 

최종적으로 아래와 같은 코드가 작성되고, 예시와 같은 메모장을 만들 수 있다.

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

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
        .wrap {
            width: 900px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
            featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </p>
    </div>
        <div class="card-columns">
        <div class="card">
            <img class="card-img-top" src="https://img.insight.co.kr/static/2021/01/10/700/img_20210110130830_kue82l80.webp" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.insight.co.kr/static/2021/01/10/700/img_20210110130830_kue82l80.webp" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.insight.co.kr/static/2021/01/10/700/img_20210110130830_kue82l80.webp" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.insight.co.kr/static/2021/01/10/700/img_20210110130830_kue82l80.webp" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.insight.co.kr/static/2021/01/10/700/img_20210110130830_kue82l80.webp" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="https://img.insight.co.kr/static/2021/01/10/700/img_20210110130830_kue82l80.webp" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

 

부트스트랩을 이용하는 건 쉬웠다!

근데 width와 margin을 사용하는 것을 잊어버렸다..

복습을 다시 해야겠다.

사실 이 개념을 완전히 이해하지 않은 채 넘어갔더니 발생한 사태다.

오늘은 반드시 이해하고 넘어가리..!!

 

 

1-10. Quiz_함께 만든 페이지를 발전시켜보세요!

 

위와 같이 페이지를 변경하는 과정을 밟았다.

처음에는 혼자 해 봤는데 글꼴 설정하는 것과 카드 맨 아래 파란 글씨를 설정하는 부분에서 막혀서 튜터님의 설명으로 보충했다.

 

1. Jumbotron과 버튼 안에 들어가는 글을 수정했다.

   -> 기존에 필요 없던 부분은 삭제했다.

2. Card의 title 부분을 하이퍼링크로 변경했다.

   -> <a> 태그를 이용했다.

3. Card의 text 부분의 내용을 수정했다.

   -> 마지막 줄을 추가하기 위해 이를 복사하여 붙여 넣었다.

4. 마지막 줄의 class에 중첩을 활용하여 comment라는 class를 추가했다.

   -> <style> ~ </style> 사이에 comment 부분에 대한 color와 font-weight를 설정했다.

5. 수정한 card 부분을 복사하여 6개로 만들어 줬다.

6. 1-7강에서 배운 내용을 바탕으로 글꼴을 바꿨다.

 

코드와 결과물은 다음과 같다. (중복되는 부분, card 나머지 5개 코드 생략)

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

<head>
    
    <style>
        * {
            font-family: 'Jua', sans-serif;
            font-family: 'Nanum Pen Script', cursive;
        }

        .wrap {
            width: 900px;
            margin: auto;
        }

        .comment {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>

<body>
<div class="wrap">
    <div class="jumbotron">
        <h1 class="display-4">나홀로 링크 메모장!</h1>
        <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
        <hr class="my-4">
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
        </p>
    </div>
    <div class="card-columns">
        <div class="card">
            <img class="card-img-top"
                 src="https://img.insight.co.kr/static/2021/01/10/700/img_20210110130830_kue82l80.webp"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
    </div>
</div>
</body>

</html>

 

이번 강의에서 배운 것은 구글링 하는 것에 익숙해져야 한다는 것!!!

모르는 게 당연하고, 더 발전하기 위해서는 구글링은 필수다.

모르면 검색하자!

 

 

1-11. Quiz_나홀로메모장의 포스팅박스를 완성하기!

 

위와 같은 Forms 추가하는 작업을 했다.

 

1. 부트스트랩 컴포넌트 페이지에서 forms 코드를 복사해서 붙여 넣는다.

2. form태그를 div 태그로 바꾼다.

   -> 이건 추후 충돌 방지를 위해 바꾸는 거라고 튜터님께서 말씀하셨다.

3. forms의 class를 posting-box라고 지정하여 width와 margin, boder, border-radius, padding을 설정한다.

   -> border와 border-radius는 구글링을 통해 학습했다.

   -> w3schools나 mdn을 덧붙여 구글링 하면 쉽게 정리한 자료를 볼 수 있다.

 

  • width : 가로길이
  • margin : 바깥쪽 여백 / 시계방향으로 조정
  • border : 태그의 테두리를 설정 / width - style - color의 순서로 사용
  • border-radius : 요소의 테두리를 둥글게
  • padding : 안쪽 여백

4. forms의 내부를 예시와 같이 수정했다.

   -> 두 번째 form은 부트스트랩 컴포넌트 페이지에서 다른 것으로 가져와서 붙여 넣었다.

 

 

코드와 결과물은 다음과 같다. (추가한 부분만 나타냄)

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

<head>

    <style>

        .posting-box {
            width: 500px;
            margin: 0px auto 30px auto;
            border: 3px solid black;
            border-radius: 10px;
            padding: 30px;
        }

    </style>
</head>

<body>
<div class="wrap">

    <div class="posting-box">
        <div class="form-group">
            <label for="exampleInputEmail1">아티클 URL</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">간단 코멘트</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">기사저장</button>
    </div>
    
</div>
</body>

</html>

 

튜터님의 해설을 듣기 전에 혼자 해 봤는데 아직 width와 padding, margin을 사용하는 게 어색하다.

뜨문뜨문 사용하긴 하는데 익숙하지 않다.

튜터님의 말씀에 따르면 2~3주 차 강의를 들을 때쯤에는 이 정도는 10~15분 안에 호로록할 수 있다는데 쓰읍...

그 정도 실력이 되기 위해 더 열심히 연습해야겠다.

 

 

[ 오늘 총평 ]

어제와 다르게 5개 강의를 듣고, 일지를 쓰려고 하니까 시간도 많이 잡아먹고 집중력도 떨어졌다.

공부하는 게 재밌긴 한데 계속 앉아서 모니터를 보고 있으니까 산만해지는 건 당연한 것 같다.

5강 정도가 무난한 것 같다.

내일 1주 차 끝내야지!!!!

파이팅!!

 

'스파르타코딩클럽' 카테고리의 다른 글

[스파르타] 1주 차 :: 지금 한 건 찍먹 수준  (0) 2022.05.11
[스파르타] 5일차_쇼핑몰 메인 페이지 만들기 (1-15 ~ 숙제)  (0) 2022.05.11
[스파르타] 4일차_Javascript 기초 문법 배우기(1-12 ~ 1-14)  (0) 2022.05.06
[스파르타] 2일차_CSS 기초  (0) 2022.05.03
[스파르타] 1일차_HTML, CSS 기본 내용 학습  (0) 2022.05.02

'스파르타코딩클럽'의 다른글

  • 현재글[스파르타] 3일차_CSS 활용(1-7 ~ 1-11)

관련글

티스토리툴바