[DAY - 5] 구글 폰트, border-radius, box-shadow/text-shadow, overflow, text-overflow, background

• 구글 폰트
• border-radius
• box-shadow/text-shadow
• overflow
• text-overflow
• background

• text-align: center;=tac
• width=w
• height=h
• border: 1px solid #000;=bd

 

1) 구글 폰트

구글 폰트를 css 파일에 적용시키는 방법을 배웠다.

https://fonts.google.com/

Google Fonts

Noto Sans Korean

 

마음에 드는 폰트를 고른 후 우측에 + 버튼을 누른다. (옆 숫자는 font-weight)

여러 폰트를 한 번에 받을 수 있다.

 

100~900 모두 담긴 모습

 

@import를 선택한 뒤 <style> 안쪽 텍스트를 복사한다.

reset.css나 본인이 적용시킬 css 파일 맨 위에 붙여 넣는다.

 

 

그리고 @import 밑에 있는 css rules를 복사한 뒤 body 부분에 붙여 넣으면 적용된다.

 

 

 

2) border-radius

모서리를 둥글게 할 때 사용한다.

        .con-box .box1 {
            border-radius: 20px 15px 30px 40px;
        }
        .con-box .box2 {
            border-radius: 20px 10px
        }
        .con-box .box3 {
            border-radius: 10% 30% 20% 50%
        }
        .con-box .box4 {
            width: 100px;
            border-radius: 50%
            /* 부모 박스와 높이를 같게 하면 원을 만들 수 있다 */
        }
        .con-box .box5 {
            border-radius: 0 30% 30% 0
        }
        .con-box .box6 {
            border-radius: 40% 40% 0 0
        }

border-radius

 

border-radius: 좌상 우상 우하 좌하

위 순서의 모서리가 적용된다.

.con-box .box1 {
    border-top-left-radius: 50px 20px;
    /* 좌상 꼭지점 기준 윗부분 50px, 옆부분 20px */
    border-top-right-radius: 40px 60px;
    border-bottom-right-radius: 40px 50px;
    border-bottom-left-radius: 20px 60px;
}
.con-box .box2 {
    border-radius: 50px 40px 40px 20px / 20px 60px 50px 60px
    /* box1와 같은 결과 */
}

위 코드처럼 한 번에 속기법으로 사용할 수도 있다.

 

3) box-shadow / text-shadow

box-shadow: 가로 세로 블러 색상

text-shadow: 가로 세로 블러 색상

단위로 px, % +, - 사용 가능

        .con-box {
            width: 600px;
            margin: auto;
        }
        .con-box .box {
            width: 250px;
            height: 100px;
            border: 1px solid #000;
            text-align: center;
            line-height: 100px;
            margin: 20px;
            display: inline-block;
            /* 밑으로 나열되지 않고 박스 크기 만큼 옆으로 나열 */

            font-size: 40px;
            text-transform: uppercase;
            font-weight: 700;
        }
        .con-box .box1 {
            box-shadow: 10px 10px 0 #dcdcdc;
            text-shadow: 4px 4px 0 #dcdcdc;
        }
        .con-box .box2 {
            box-shadow: -10px -10px 10px #333;
            text-shadow: 4px 4px 4px orange;
        }
        .con-box .box3 {
            box-shadow: 0 0 15px black;
            text-shadow: 3px 3px 10px yellow;
        }
        .con-box .box4 {
            box-shadow: 5px 5px 0 red, 
                        10px 10px 0 green,
                        15px 15px 0 pink;

            text-shadow: 2px 2px 0 red,
                        4px 4px 0 green,
                        6px 6px 0 pink;
                /* 여러개 적용 가능 */
        }
        .con-box .box5 {
            /* box-shadow: inset 5px 5px 0 #dcdcdc; */
            /* box-shadow: inset 0 0 10px #333; */
            box-shadow: 0 0 0 15px #dcdcdc;
        }
        .con-box .box6 {
            box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        }

 

box/text-shadow

 

테스트 6번 그림자와 같이 안쪽으로 적용시킬 수 있는데, box-shadow: inset를 사용하면 되고 text-shadow에는 사용이 불가능하다.

 

4) overflow

나타내고자 하는 텍스트 박스 크기보다 텍스트가 많으면 사진처럼 밖으로 나오게 되는데 이때 사용하는 코드가 overflow이다.

overflow 미적용

        .con-box .box1 {
            overflow: visible;
        }
        .con-box .box2 {
            overflow: auto;
        }
        .con-box .box3 {
            overflow: scroll;
        }
        .con-box .box4 {
            overflow: hidden;
        }

overflow 적용

visible : 기본값
hidden : 영역까지만 보이기 (많이 사용)
scroll : 스크롤
auto : 회원가입 약관에 주로 사용

 

5) text-overflow

텍스트를 담는 또 다른 방법으론 text-overflow가 있는데 잘린 나머지 부분을 줄임표(...)로 나타나게 된다.

            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            /* 사이즈 만큼만 인식 */
            text-overflow: ellipsis;

text-overflow: ellipsis

이처럼 한 줄로 나타내고 싶을 땐 필요한 조건이 있다.

 

1. 너비값 필수
2.white-space: nowrap; 한 줄
3.overflow: hidden;
4.text-overflow: ellipsis;

이 중 하나라도 사용하지 않으면 적용되지 않는다.

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical
            /* 3줄 까지만 나타내고 (...) */

text-overflow: ellipsis

위와 같이 최대한 나타낼 수 있는 줄을 정할 수도 있다.

display: -webkit-box;
-webkit-line-clamp: 줄 수;
-webkit-box-orient: vertical

하지만 크롬, 사파리, 오페라 브라우저에서만 잘 적용이 된다고 한다.

 

6) background

6-1) background-image: url()

배경에 이미지를 불러올 때 사용한다.

    .box div {
        width: 500px;
        height: 450px;
        border: 1px solid #000;
        margin-bottom: 50px;
        background-image: url(images/GS.jpg);
        background-repeat: no-repeat;
    }
    .a1 {
        background-position:100px 200px;
        /* 배경의 왼쪽 상단 기준 */
    }
    .a2 {
        background-position: 40% 30%;
        /* %는 배경 이미지가 아닌 부모를 기준 */
    }
    .a3 {
        background-position: center top ;
        /* 키워드 : 영역(부모)를 기준 */
    }
    .a4 {
        background-position: 50px;
    }
    .a5 {
        background-position: top 50px left 100px;
    }

box1~5 모두 같은 사진을 불러온 후 background-position을 사용해 배경의 어느 위치에 사진을 넣고 싶은지 정하면 된다.

background-position: x축 y축

각각 x축과 y축을 의미하며 음수도 사용이 가능하다.

    .a1 {
        background-position: -100px 200px;
        /* 배경의 왼쪽 상단 기준 */
    }

6-2) background-repeat

불러온 사진의 반복을 의미하며 여러 장을 바둑판 배열로 나열하고 싶지 않다면 background-repeat: no-repeat를 사용하면 된다.

 

6-3) background-attachment:fixed;

배경 속에 사진을 고정해 휠을 내리거나 올려도 움직이지 않고 따라오게 할 수도 있다.

 

background-attachment:fixed

            background-attachment:fixed;
            /* 배경 고정 */

6-4) background-size

박스 안에 사진을 불러올 때 원하는 크기 혹은 박스크기에 맞게 할 수 있다.

    .a1 {
        background-size: 50% 30%;
        /* background-size: 너비 높이 ; */
    }
    .a2 {
        background-size: contain;
        /* contain : 배경 이미지가 너비 또는 높이에 가까운 쪽에 맞게 */
    }
    .a3 {
        background-size: cover;
        /* cover : 배경 이미지가 너비 또는 높이에 먼 쪽에 맞게 가까운 쪽은 같은 비율로, contain보다 많이 사용 */
    }

background-size

첫 번째 사진처럼 가로 세로를 임의로 조절할 수 있고, 두 번째, 세 번째처럼 같은 비율로 늘렸을 때 박스에 먼저/나중에 꽉 차는 부분을 기준으로 채워 넣을 수 있다.

 

7) tips

tac=text-align: center

w=width (w100 tab/enter = width:100px;)

h=height (h100 tab/enter = height:100px;)

bd=border: 1px solid #000