개발과 계발/웹 개발

CSS 기초. 부트스트랩 써보기.

멈 무 2022. 7. 12. 00:40

지난번에 프로필링크 만들기를 해봐서 어렵지 않게 할 수 있었다.

그래서 후딱후딱 넘어가긴했는데

중간중간 까먹을 것 같은 내용들이 꽤 있다

주석으로 메모해놓긴 했는데 개발일지에 빠지지않고 적을 수 있을지 걱정 ㅇㅅㅇ..

 

 

*  html 부모-자식 구조

html 부모-자식 구조

 

*CSS 기초

<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다.

mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 함!!

 

* 자주 쓰는 CSS

배경관련 간격 사이즈 폰트
background-color
background-image
background-size		 margin padding width height  font-size font-weight font-family color 

 

* margin 과 padding  :   margin은 바깥 여백 / padding은 안쪽 여백

  여백 크기 지정하는거 --> 12시에서 시계방향으로 순서

  한쪽에만 넣고싶으면  margin-right 이런식으로 방향을 지정해서 넣을 수도 있다.

 

* shadow 도 마찬가지 인듯. 마지막은 그림자 색깔

margin, shadow, padding

* 왼쪽 누르면 폴더(div로 묶인)를 열었다 닫았다 할 수 있음 !!

닫음
하나 열음

*구글 웹폰트 사용하기

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

 

Google Fonts

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

fonts.google.com

들어가서 맘에드는 폰트 클릭,

하단 스크롤 후 오른쪽 보면 Select this style 버튼 클릭하면 옆에

이런애들이 나옴.

여기에서

이 부분을 <title>과 <style> 사이에 붙여넣고,

<style> 안에 CSS rules ~ 바스 안에 있는걸 붙여넣음

 

여기에서 *은 모두에게 먹이겠다는 뜻 !

 

* 주석달기 : ctrl + /

 

*부트스트랩 활용하기

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

부트스트랩에서 원하는 디자인이나 기능들을 붙여와서 쓰면 된다! CSS 모음집

 

부트스트랩 시작하기 전에는 , 

부트스트랩 시작 템플릿 긁어와서 써야함.

부트스트랩 시작 템플릿
<!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>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html>

 

* 이미지 어둡게 할때쓰는 거!!

 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),

이걸 이미지 url 앞에다가 쓰면 된다

예시

*마우스 오버 효과 넣기  (hover)

border는 테두리! 

 

* 여기에서 이모티콘 복붙하면 쓸 수 있음

https://kr.piliapp.com/facebook-symbols/

 

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원

kr.piliapp.com

 

 

 


KEEP

1. 줄 정렬 잘함  !! 줄 정렬 자동으로 하는 단축키 ctrl + alt + L    /   Tab   /   Shift+Tab

2. 주석으로 까먹지 않게 메모했음 ! 잘 기억 안날것 같거나 알아둬야하는 내용에 주석으로 설명해둠

 

Problem

1.똑같이 했는데  내 타이틀은 몬가 세로길이가 짧고, 선생님꺼는 적당하다....

내꺼
선생님꺼

padding 넣는걸 놓쳤나? 싶어서 넣어봣더니 예쁘게 됐음 ~!!!

Padding&nbsp; 넣은 후

 

2. 부트스트랩 시작 템플릿을 적용해야만 쓸 수 있다는 것을 강의 들을 땐 몰랐다가, 개발일지 쓰면서 알게댐 !

 

Try

1. *  사용하여 스스로 코딩해보기

2. 각종 단축키 숙지하기

3. 반복되는 폴더? 같은 div 형태는 하나 완성하고 나머지를 폴더 째로 복붙! (접어 놓고 복붙하면 쉽다)

 

 

 

오늘 최종 완성본

<!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 {
            background-color: green;

            width: 100%
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
            /* linear-gradient ~ , 이미지 어둡게하기*/
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /*가운데정렬*/
            padding: 100px;
        }
        .mytitle > button {
            /*지난주 개발일지랑 비교하기*/
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;

            border: 1px solid white;

            margin-top: 10px;
            margin-bottom: 30px;

        }
        .mytitle > button:hover {
            /*hover 마우스 오버됐을때*/
            border: 2px solid white;
        }
        .mycomment{
            color: gray;
        }
        .wrap{
            max-width: 1200px;
            width: 95%;
            margin: 20px auto 0px auto;
        }
        .mypost{
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0px auto;
            /*12시부터 시계방향으로 간격조절*/

            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;
        }
        .postbutton{
            display: flex;
            flex-direction: row;
            /*row: 가로로 버튼정렬, column: 세로로 정렬*/
            justify-content: center;
            align-items: center;
            /*가운데정렬*/

            margin-top: 10px;
        }
        .postbutton > button {
            margin-right: 10px;
            /*버튼과 버튼 사이 간격*/
        }

    </style>
</head>

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기</button>

    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="Email address">
            <label for="floatingInput">영화Url</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>--선택하기--</option>
                <option value="1">*</option>
                <option value="2">**</option>
                <option value="3">***</option>
                <option value="3">****</option>
                <option value="3">*****</option>
            </select>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">코멘트</label>
        </div>
        <div class="postbutton">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" class="btn btn-light">닫기</button>
        </div>
    </div>


    <div class="wrap">
        <div class="row row-cols-1 row-cols-md-4 g-4">
    <!--    md-4 <--이 숫자가 한줄에 들어오는 카드개수-->
        <div class="col">
            <div class="card">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.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">
            <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.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">
            <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.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">
            <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.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>
<!--줄 자동정렬: ctrl+alt+L-->

</html>

 

완성본