Chap3 CSS

Let's Just Go·2022년 4월 22일

CSS

목록 보기

3/5

CSS

CSS(font)

font

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 20px;
            line-height: 2em;
            font-weight: 900;
        }
        /* em : 자기 자신의 폰트 크기를 기준
           line-height : 줄간격을 정하는 기능 */

    </style>
</head>

<body>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae feugiat leo. Praesent aliquam eget mauris
        sit amet tincidunt. Cras sit amet eros pulvinar, facilisis ex a, bibendum erat. Quisque leo dolor, bibendum in
        hendrerit at, viverra ac tortor. Donec lorem tortor, vulputate eget nisi a, ultrices venenatis nunc. Donec et
        elit in augue varius lacinia. Morbi egestas ligula efficitur justo dapibus, quis vehicula dui interdum. Donec
        tristique a elit et mattis. Curabitur convallis maximus bibendum. Nunc quis purus eu justo aliquet interdum. In
        hac habitasse platea dictumst. Suspendisse potenti. Phasellus nulla metus, egestas pellentesque erat eget,
        suscipit imperdiet augue. Nullam ultrices nulla at sapien sodales, a molestie diam ornare. Donec vel urna non
        sem varius finibus. Sed at leo sit amet ligula auctor ornare eu non leo.

        Duis et molestie lacus. Integer nec molestie tortor. Nulla et tincidunt purus. Donec consectetur posuere congue.
        Nunc porta tempor tortor, vitae convallis lorem dictum a. Ut dolor arcu, malesuada quis eleifend sed, iaculis
        vel tellus. Proin sit amet augue augue. Duis eu ornare neque. Pellentesque lacinia ornare libero sodales tempor.
        Sed imperdiet auctor sem eu ornare. Nullam ligula sapien, euismod in molestie nec, vulputate id purus. Morbi ut
        velit a magna vestibulum finibus at vitae lectus. Duis ultrices justo diam, vitae placerat augue interdum a.
        Aliquam quis justo posuere, malesuada libero non, hendrerit tortor. Vivamus mattis urna tortor, eu fermentum
        tortor feugiat quis. Curabitur a purus vel justo tincidunt congue et quis justo.
    </p>
    <!-- ctrl + alt + L : beautify 사용 -->
</body>

</html>

FontFamily

fontfamily

각종 글씨체
Google font에서 제공하는 font는 무료

link와 import 및 실제 파일을 저장해서 불러오기도 가능

<!DOCTYPE html>
<html lang="ko">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font-Style</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=Jua&display=swap" rel="stylesheet">

    <style>

        @font-face {
            font-family: Cookie_Black;
            src: url(./CookieRunFont/CookieRun\ Black.ttf);
        }
        /* 실제 파일을 다운받아서 font를 적용
            url에 워크스페이스에 있는 파일의 경로를 넣을수도 있고 페이지 url도 가능 */

        div {
            font-size: 50px;
            margin-bottom: 1em;
        }

        .font1 {
            font-family: serif;
            /* serif : 바탕체 계열 */
        }

        .font2 {
            font-family: sans-serif;
            /* sans-serif : 고딕체 계열 */
        }

        .font3 {
            font-family: monospace;
            /* monospace : 가로폭이 동등한 글꼴 계열 */
        }

        .font4 {
            font-family: cursive;
            /* cursive : 필기체 계열 */
        }

        .font5 {
            font-family: fantasy;
            /* fantasy :  화려한 계열 */
        }

        .font6 {
            font-family: 'Jua', sans-serif;
            /* google font에서 link를 통해서 필기체 가져옴 */

        }
        /* google font를 통해서 font 다운로드 가능 */
        h1{
            /* font-family: "Cookie_Black" , cursive;
            font-size: 50px;
            font-style: oblique;
            line-height: 1.4em; */
            font: oblique 50px / 1.4em "Cookie_Black", cursive;
            /* 순서 : font-style font-weight font-size / line-height font-face
                단축 속성 사용시 font-size와 font-family는 필수로 지정  */
        }
    </style>

</head>
<body>
    <div class="font1">Hello World!</div>
    <div class="font2">Hello World!</div>
    <div class="font3">Hello World!</div>
    <div class="font4">Hello World!</div>
    <div class="font5">Hello World!</div>
    <div class="font6">우리가 어떤 민족입니까! 배달의 민족!</div>

    <h1>쿠키런 폰트 폰트~~~</h1>
</body>
</html>

Color

color

font의 color를 기존의 색깔뿐 아니라 rgba()를 통해 사용자가 원하는 색깔 지정가능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color</title>
    <style>
        div {
            font-size: 50px;
        }

        .c1{
            color: #851c1c;
        }
        
        .c2{
            color:rgb(10, 234, 134);
        }

        .c3{
            color:rgba(10, 234, 134, 0.3)
            /* rgba : 투명도도 지정 */
        }
    </style>
</head>
<body>

    <div class="c1">Hello</div>
    <div class="c2">안녕하세요</div>
    <div class="c3">Hola</div>

</body>
</html>

text-align

text 정렬을 하고 싶을 때 사용

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text align</title>

    <style>
        h1 {
            text-decoration: underline;
            /* text에 밑줄을 달고 싶을때 : underline
                지우고 싶을때 : none */
            text-align: center;
        }

        h2 {
            text-decoration: line-through;
            text-align: start;
        }

        .img-box {
            text-indent: 500px;
            /* text-indent 양수를 주었을때 들여쓰기 음수면 내어쓰기 */
        }
        
        h3{
            letter-spacing: 30px;
            /* 글자 간격 */
            word-spacing: 30px;
            /* 단어 간격 */
        }
        p{
            font-size: 24px;
            padding : 20px;
            /* 요소간 거리를 20px */
            text-align: justify;
            /* 텍스트 정렬 default : left 
                justify : 양쪽 정렬*/
        }
    </style>
</head>

<body>
    <h1>메롱메롱</h1>
    <h2>안녕안녕</h2>

    <div class="img-box">[이거 이미지예요]</div>

    <h3>할로 ~ 왈드</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique scelerisque luctus. Phasellus in
        facilisis odio. In aliquam facilisis ullamcorper. Duis consectetur libero a nibh venenatis, nec blandit felis
        laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc posuere
        posuere urna, quis rhoncus diam blandit eu. Nulla eget odio tristique, sodales urna non, sagittis risus.
        <br>
        Nam justo sapien, suscipit vel lectus ac, elementum porttitor tellus. Nullam fermentum vestibulum efficitur.
        Vivamus et maximus nibh, sit amet sagittis mi. Maecenas ornare ligula justo, sit amet mattis eros gravida
        fermentum. Aliquam congue tellus sed vulputate tempus. Nulla quis ipsum tristique felis vestibulum vestibulum.
        Nullam sed turpis tristique nunc sodales sodales eget id eros. In euismod eget ipsum eget vehicula. Vestibulum
        elementum massa vitae justo lacinia viverra. Ut eget ligula eget enim rutrum vulputate sed sed neque.
        <br>
        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum a diam non
        lectus hendrerit tincidunt vitae sed libero. Sed imperdiet in mi non bibendum. Cras vehicula iaculis leo, vitae
        varius quam. Cras consectetur neque mi, in tristique sapien bibendum non. Aliquam laoreet volutpat lorem sit
        amet ultrices. Aenean ut odio vel odio rhoncus euismod. Quisque posuere diam varius est sagittis finibus.
        Quisque viverra auctor tellus et consectetur. Morbi quis urna ac nisl scelerisque finibus. Donec sed lorem
        eleifend, blandit arcu at, lobortis libero. Donec sapien nisi, dictum pellentesque cursus eu, rhoncus eget est.
        Cras condimentum ligula diam, sit amet vulputate velit commodo et. Vestibulum mi nulla, fringilla non justo et,
        tempor auctor purus.</p>
</body>

</html>

Background

이미지 및 배경색 등 다양한 기능을 배경에 적용 가능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            width: 550px;
            height: 350px;
            border: 2px solid gray;

            /* background-color: yellow;
           background-image: url(./Images/sky.jpg); */
            /* 만든 블록에 이미지를 넣을 수 있음 */
            /* background-size: 200px 150px; */
            /* 이미지를 200px 150px로 지정해서 나누어줌 */
            /* background-size: auto;
            background-repeat: no-repeat; */
            /* no repeat : 반복하지말라는 뜻 */

            /* background-position: 80% 70%; */
            /* image을 기준으로 x,y를 %로 표현, image의 50% 가로로 이동 30% 세로로 이동*/
            /* %, px, em으로 지정 가능 
            가로축과 세로축을 한번에 지정 가능 
            가로축만 사용하면 세로축은 가운데 정렬  */

            background: yellow url(./Images/sky.jpg) no-repeat 0% 0% / auto ;

            
        }
    </style>
</head>
<body>
    
    <div class="box"></div>
    
</body>
</html>

floatting Box

float : 브라우저를 3차원으로 생각하여 float된 것은 브라우저 위에 살짝 떴다고 생각

가로 공간에 다른 요소를 함께 표시할 수 있도록 하는 것이 float의 가장 큰 특징

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .picture{
            width: 200px;
            height: 150px;
            background-color: red;
            float: left;
            /* 중요 float : picture영역에 텍스트가 올라올 수 있도록 해줌
                즉, 3차원의 공간속에서 picture가 살짝 떳다고 생각하자 
                picture옆에 남아 있는 가로 공간에 텍스트가 사용할 수 있게 해줌 */
            margin-right: 15px;
        }
    </style>
</head>
<body>
    
    <div class="picture"></div>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique scelerisque luctus. Phasellus in
        facilisis odio. In aliquam facilisis ullamcorper. Duis consectetur libero a nibh venenatis, nec blandit felis
        laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc posuere
        posuere urna, quis rhoncus diam blandit eu. Nulla eget odio tristique, sodales urna non, sagittis risus.
        <br>
        Nam justo sapien, suscipit vel lectus ac, elementum porttitor tellus. Nullam fermentum vestibulum efficitur.
        Vivamus et maximus nibh, sit amet sagittis mi. Maecenas ornare ligula justo, sit amet mattis eros gravida
        fermentum. Aliquam congue tellus sed vulputate tempus. Nulla quis ipsum tristique felis vestibulum vestibulum.
        Nullam sed turpis tristique nunc sodales sodales eget id eros. In euismod eget ipsum eget vehicula. Vestibulum
        elementum massa vitae justo lacinia viverra. Ut eget ligula eget enim rutrum vulputate sed sed neque.
        
        <br>
        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum a diam non
        lectus hendrerit tincidunt vitae sed libero. Sed imperdiet in mi non bibendum. Cras vehicula iaculis leo, vitae
        varius quam. Cras consectetur neque mi, in tristique sapien bibendum non. Aliquam laoreet volutpat lorem sit
        amet ultrices. Aenean ut odio vel odio rhoncus euismod. Quisque posuere diam varius est sagittis finibus.
        Quisque viverra auctor tellus et consectetur. Morbi quis urna ac nisl scelerisque finibus. Donec sed lorem
        eleifend, blandit arcu at, lobortis libero. Donec sapien nisi, dictum pellentesque cursus eu, rhoncus eget est.
        Cras condimentum ligula diam, sit amet vulputate velit commodo et. Vestibulum mi nulla, fringilla non justo et,
        tempor auctor purus.
    </p>
</body>
</html>

float & clear

float & clear

float을 한 box는 떠잇다는 것이 증명

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box {
            width: 150px;
            height: 100px;
            background: red;
            font-size: 30px;
            color: #fff;
            margin: 10px;
            float: left;
            /* float은 브라우저에서 살짝 떠있는 상태라고 생각 */
        }

        .new-box{
            width: 200px;
            height: 150px;
            background: orange;
            clear: left;
        }
        /* new-box위에 box가 떠있는 것을 확인할 수 있으니깐 float이 떠있다는게 증명 */
        /* clear를 사용하게 되면 float의 성질을 지우는 기능 즉, 겹쳐져 있는 부분을 내림 
            float을 left로 지정했으면 clear도 left로 지정하면 됨 */

    </style>    
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>

    <div class="new-box">5</div>
    
</body>
</html>

Cancel Float

Cancel Float(clear-fix)

부모 태그는 자식 태그가 float을 진행하면 자식 태그를 인식하지 못할 때가 존재
인식을 하지 못하면 레이아웃이 깨질 수 있음

clear-fix라는 스타일을 지정해서 부모 태그에서 자식 태그를 인식 시켜주는 것

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            width: 700px;
            padding : 20px;
            border: 3px solid red;
            
            /* overflow:hidden; float된 자식을 품을 수 있는 방법  */
            /* overflow: hidden; */
        }

        .box{
            width: 200px;
            height: 150px;
            border: 3px solid green;
            background-color: yellow;
            font-size: 50px;
            float: left;
        }
        .clear-box{
            /* overflow:hidden; float된 자식을 품을 수 있는 방법  */
            clear: both;
        }
        .clearfix::after{
            content : '';
            display: block;
            clear: both;
        }
        /* 부모클래스에 클래스이름(clearfix)을 하나 더 줌 */
    </style>
</head>
<body>
    <!-- .container>.box{$}*2 -->
    <div class="container clearfix"> 
        <div class="box">1</div>
        <div class="box">2</div>
        
        <!-- <div class="clear-box"></div> -->
    </div>
</body>
</html>

Layout

float을 통해 해당 페이지의 Layout을 지정할 수 있음

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <style>
        h1 {
            font-size: 36px;
            font-weight: bold;
            margin: 20px;
            text-align: center;
        }
        h2 {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding : 10px;
        }
        p{
            font-size: 14px;
            line-height: 1.3em;
            padding: 10px;
        }
        .container {
            border: 3px solid orange;
            width: 800px;
            margin : 0 auto;
        }

        header{
            border: 3px solid yellow;
        }
        nav{
            border: 3px solid purple;
            width : 150px;
            height: 200px;
            float : left;
        }
        
        section{
            border: 3px solid green;
            margin-left : 153px;
        }

        .clearfix::after{
            content: '';
            display: block;
            clear : both;
        }

        footer{
            border: 3px solid blue;
        }
    </style>

</head>

<body>
    <h1>float 속성을 이용한 레이아웃</h1>

    <div class="container">
        <header>
            <h2>header 영역</h2>
        </header>
        <div class="main-content clearfix">
            <nav>
                <h2>nav 영역</h2>
            </nav>

            <section>
                <h2>section 영역</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu felis commodo, mattis tellus eu,
                    hendrerit purus. Fusce commodo velit elit, cursus elementum erat luctus id. Vestibulum volutpat
                    gravida augue, quis accumsan velit tincidunt tristique. Integer nec urna facilisis, eleifend erat
                    non, consectetur lacus. In rutrum porta dolor, ac scelerisque neque eleifend at. Etiam quis rutrum
                    orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in efficitur massa.
                </p>
            </section>
        </div>

        <footer>
            <h2>footer 영역</h2>
        </footer>
    </div>

</body>

</html>

float은 Box를 가로로 배치하는데 유용한 기능인 것 같다.

Let's Just Go

안녕하세요! 공부한 내용을 기록하는 공간입니다.

이전 포스트

Chap1 CSS

다음 포스트