[HTML,CSS] Quiz : 페이지 발전

2022.02.22 - [HTML, CSS] - 1-1 : CSS 기초

1-1 : CSS 기초

CSS는 어떻게 사용하나요? ~ 안에 ~ 공간을 만들어 작성 ☞ 그럼 CSS는 HTML 안에 포함되어 있는건가? 배경관련 background-color background-image background-size 사이즈 width height 폰트 font-size font-wei..

hoon-language.tistory.com

위의 링크에서 부트스트랩 코드스니펫을 복사해서 이용

<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>
    <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=Single+Day&display=swap" rel="stylesheet">
→ 폰트 설정
    
    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
        *{
           font-family: 'Single Day', cursive;
        }
→ 폰트 CSS , 앞의 *은 전체 적용
        
        .title{
            width : 900px;
            margin : auto; // 바깥여백! padding은 안쪽여백!
        }
        .comment{
            color: darkblue;
        }
→.{}은 div 선언?된 부트스트랩을 나만의 CSS로 변경
   
   </style>
</head>

<body>
    <div class="title">
        <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://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20130821_221%2Fonnuryin201_1377039292570qRhe3_JPEG%2F445224903.jpeg&type=a340"
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href=" http://naver.com/">여기 기사 제목이 들어가죠</a></h5>
→h5 를 지우고 a href로 고쳐주면 됨
                   
                   <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <div class="comment">
→CSS 사용하기 위해 div사용
                       
                       <p> 여기에 코멘트가 들어갑니다. </p>
                    </div>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20130821_221%2Fonnuryin201_1377039292570qRhe3_JPEG%2F445224903.jpeg&type=a340"
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="http://naver.com/">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <div class="comment">
                        <p> 여기에 코멘트가 들어갑니다. </p>
                    </div>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20130821_221%2Fonnuryin201_1377039292570qRhe3_JPEG%2F445224903.jpeg&type=a340"
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="http://naver.com/">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <div class="comment">
                        <p> 여기에 코멘트가 들어갑니다. </p>
                    </div>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20130821_221%2Fonnuryin201_1377039292570qRhe3_JPEG%2F445224903.jpeg&type=a340"
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="http://naver.com/">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <div class="comment">
                        <p> 여기에 코멘트가 들어갑니다. </p>
                    </div>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20130821_221%2Fonnuryin201_1377039292570qRhe3_JPEG%2F445224903.jpeg&type=a340"
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="http://naver.com/">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <div class="comment">
                        <p> 여기에 코멘트가 들어갑니다. </p>
                    </div>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20130821_221%2Fonnuryin201_1377039292570qRhe3_JPEG%2F445224903.jpeg&type=a340"
                     alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="http://naver.com/">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <div class="comment">
                        <p> 여기에 코멘트가 들어갑니다. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS를 작성하기 위해 head문 안에 <style> 쓰기

'검사'를 이용해서 현재 줄이 무슨 역할하는지 알아보기

a href랑 class가 같이도 들어가는구나

생각보다 Ctrl+Alt+L이랑 Tab이 많이 사용됨

'HTML, CSS' 카테고리의 다른 글

[HTML, CSS] 1-3 Javascript 기초 문법 2 (0)	2022.02.23
[HTML, CSS] 1-2 Javascript 기초문법 1 (0)	2022.02.23
[HTML,CSS] Quiz : 간단한 로그인 페이지 만들어보기 (0)	2022.02.22
[HTML,CSS] 1-1 : CSS 기초 (0)	2022.02.22
[HTML,CSS] 1주차 : HTML 기초 (0)	2022.02.22

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

훈이의 언어

[HTML,CSS] Quiz : 페이지 발전

'HTML, CSS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[HTML,CSS] Quiz : 페이지 발전

'HTML, CSS' 카테고리의 다른 글

'HTML, CSS' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역