WebDevelop 수업 - Day8 CSS 속성 (3)

김지원·2022년 6월 21일

CSS html

WebDevelop2

목록 보기

8/34

backgorund-color

: 배경 색상 지정

Literal(리터럴) : red, blue, orange, black, white 등

RGB

: rgb(a, b, c) 함수 이용. 각 빨간색, 초록색, 파란색의 정도를 ( 0~ 255 ) 나타낸다.

RGBA

: rgba(a, b, c, d) 함수 이용. 위 rgb(a, b, c) 함수 처럼 사용하되, d 값은 0% ~ 100%의 값으로 불투명도 지정.

0% : 완전 투명 ~ 100% : 완전 불투명

HEX

: #rrggbb형식으로 사용.

rgb 함수에서 사용하는 값을 16진수로 전환하여 사용하는 방식.

가령, rgb(255, 255, 255) 는 #ffffff와 같다.

HEX(0)

: #rrggbboo 형식으로 사용. 기본 HEX 사용 방법과 같으나 뒤에 불투명도를 지정하는 oo값을 함꼐 사용한다. ( 00 부터 ff 까지 )

<style>
        div:nth-child(1) {
            width: 300px;
            height: 300px;
            background-color: rgba(255, 0, 0, 50%);
            position: absolute;
            z-index: 1;
        }
        div:nth-child(2) {
            top: 150px;
            left: 150px;
            width: 300px;
            height: 300px;
            background-color: rgb(50, 100, 200);
            position: absolute;
        }
</style>
<body>
    <div></div>
    <div></div>
</body>

불투명도 조절 예시

background-image

: 배경 이미지를 삽입할 때 사용한다. url 함수와 함께 사용한다.

url("주소")

<style>
        div:nth-child(1) {
            width: 500px;
            height: 500px;
            background-color:lightpink;
            background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9TarsuTkaSmS-wdn5OL_lucLQArRnmWPr0Q&usqp=CAU);
        }
</style>

background-repeat

: 배경 이미지 반복 설정

repeat : 반복되게 한다.(기본값)

repeat-x : 가로축으로만 반복되게 한다.

repeat-y : 세로축으로만 반복되게 한다.

no-repeat : 반복되지 않게 한다.

background-repeat: no-repeat; 추가

background-position

: 배경 이미지 위치 설정

background-position: a ; 양방향에 대한 설정

background-position: x y ; x축 y축에 대한 설정

background-position: center; 추가

background-size

: 배경 크기 설정

(리터럴) : 가로크기 설정. 세코크기는 이미지 비율에 맞게 증가

(리터럴) (리터럴) : 가로 / 세로 크기 지정. 이미지 비율 문제 발생 가능

auto (리터럴) : 세로크기 설정. 가로 크기는 이미지 비율에 맞게 증감

contain : 이미지가 잘리지 않는한도 내에서 가장 크게 표시

cover : 요소의 빈 부분 없이 이미지를 표시할 수 잇는 가장 작은 크기 ( 요소 벗어날 수 있음)

background-size: contain; 추가

border

: 테두리
border: 2px solid rgb(0, 0, 0);
굵기, 스타일, 색상 순으로 지정한다. 스타일은 아래와 같다.

solid : 실선

dotted : 짧은 점선

dashed : 점선

border-top, border-right, border-bottom, border-left 사용 가능.

border-radius

: 테두리 부드럽게

border-top-right-radius, border-bottom-right-radius,
border-bottom-left-radius, border-top-left-radius 사용가능.

<style>
        div {
            width: 100px;
            height: 50px;
            border: 2px solid rgb(0, 0, 0);
            border-radius: 15px;
        }
</style>

border-radius: 20px 5px 20px 5px; 사용 예시

box-shadow

box-shadow : ( x축 오프셋 ) ( y축 오프셋 ) ( 퍼짐 반경 ) ( 그림자 반경 ) ( 색 )

그림자를 만들기 위함. 오프셋은 이동범위를 뜻한다.

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: rgb(200, 255, 250);
            box-shadow: 0 0 16px 1px black;
        }
</style>

box-shadow: 50px 0 16px 1px rgba(60, 60, 60, 50%);
=> 1px짜리의 그림자를 16px정도로 퍼트리겠다의 의미를 가진다.

box-sizing

: 요소의 크기 지정에 관한 방법 설정

content-box : 요소의 내부 내용에 따른 크기 지정(기본값)

border-box : 요소의 테두리 내용에 따른 크기 지정

<style>
        div:nth-child(1) {
            width: 100px;
            background-color: black;
            color: white;
        }
        div:nth-child(2) {
            width: 100px;
            height: 20px;
            box-sizing: border-box;
            background-color: red;
            padding: 0 20px;
        }
</style>
<body>
    <div>나는 100px</div>
    <div>아무 내용</div>
</body>

박스 사이징 적용 전

가로가 140px이다.

box-sizing: border-box; 적용 후
=> padding이 box안으로 들어가게된다.
양옆으로 padding 20px을 주더라도 100px로 유지하게 한다.

color

: 글씨 색상

 <style>
        div:nth-child(1) {
            color: rgb(255, 0, 0);
        }
        div:nth-child(2) {
            color: rgb(0, 0, 255);
        }
    </style>
<body>
    <div>가나다</div>
    <div>라바마</div>
</body>

cursor

: 마우스 커서의 모양 지정

default : (기본값) 기본 화살표 모양

poiter : 클릭 손 모양

text : I빔

not-allowed : 금지
등등등......

display

: 요소 표시 상태 설정

none: 보이지 않고 공간도 차지하지 않음

block : 부모 요소의 가로 크기를 한줄 다 차지하게 된다.

inline : 필요한 만큼 공간 차지(width, height 안 먹힘)

inline-block : 필요한 만큼 공간 차지(width, height 작동)

 <style>
        div {
            display: inline-block;
        }
        div:nth-child(1) {
            width: 100px;
            height: 100px;
            background-color: brown;
        }
        div:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
</style>
<body>
    <div></div>
    <div></div>
</body>

display: block;

font

font-family

: 서체 지정

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

클릭!

link 복사해와서 head에 추가한다.

font-family 도 복사해서 style에 추가한다.

font-family: 'Reggae One', cursive;

font-family: 'Nanum Brush Script', 'Reggae One', cursive;

콤마로 구분하는 font-family는 우선순위를 말한다.

말로 예시를 들자면
만약 1번째가 일본어폰트였는데 히라가나 표시를 실패한 단어가 있을 시에
다음 폰트 패밀리로 넘겨져서 해당 폰트를 적용시켜버린다.

font-weight

: 글씨 굵기 설정
가령, font-weight: 400; ....

font-size

: 글씨 크기(pt, px등)

opacity

: 요소 자체의 투명도 설정 0% ~ 100%

단, 내용 전체도 같이 투명해짐으로 배경 투영 목적으로 사용하면 안됨.

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
            opacity: 50%;
            color: black;
        }
</style>
<body>
    <div>글씨글씨글씨</div>
</body>

< 예제 >

: hover시 사진과 글씨가 같은 자리에서 바뀌여야 한다.
- 조건

margin 사용하지 말 것.

top,left 사용하지 말 것.

width와 height 값은 한 번만 사용할 것.

 <style>
        div {
            width: 500px;
            height: 300px;
            background-image: url(https://velog.velcdn.com/images/zirccon/post/7fd1d61e-cc0e-4a58-b87d-12cbb5cdeee8/image.png);
            background-size: cover;
            background-position: center;
            position: relative;
        }


        div:hover {
            background-image: url(https://velog.velcdn.com/images/zirccon/post/8978068e-a0c7-424b-9106-87fafb5acdac/image.png);
        }

        div > span {
            right: 0;
            bottom: 0;
            background-color: coral;
            padding: 5px 20px;
            position: absolute;
        }

        div:hover > span:nth-child(1) {
            display: none;
        }

        div > span:nth-child(2) {
            display: none;
        }

        div:hover > span:nth-child(2) {
            display: inline;
        }
</style>
<body>
    <div>
        <span>촛불입니다!!</span>
        <span>파이리진화!!</span>
    </div>––
</body>