ABOUT ME

비바리퍼블리카(토스)에서 Frontend Developer로 일하고 있습니다.

  • [CSS]Day8 -background
    Frontend 2019. 2. 9. 22:39

    Day8 -background-

    [1] background

    background-color -> 배경색상 지정

    background-image : url("파일경로"); -> 배경이미지

    background-repeat : repeat/ repeat-x / repeat-y /no-repeat; ->배경이미지 반복 설정

    background-attatchment : scroll / fixed; -> 스크롤에 따른 배경 이미지 처리

    background-position :left/ right/ top/ bottom /center /px값; -> 배경 이미지 위치


    background: 위의 다섯가지 속성을 공백으로 구분하여 일괄 명시. 불필요한 요소는 생략 가능.



    [배경관련 속성 활용]

    - 이미지에 텍스트가 포함된 경우

    1) 원본 텍스트를 HTML안에 명시.
    2) 이미지는 그 안에 배경으로 설정.
    3) 원본 텍스트를 text-indent 속성으로 화면에서 멀리 떨어지도록 설정.

    - 이미지 클립핑  ---> 용량 감소/페이지 로딩 시간 단축

    1) 아이콘, 버튼 등의 이미지를 하나의 이미지 파일에 모두 모아놓기.
    2) 표시할 항목의 크기와 동일한 박스를 준비한다. 그 안에 배경 이미지로 설정.
    3) background-position 속성으로 이미지를 표시하고자 하는 위치까지 이동.



    - background-size 속성:
    배경 이미지의 크기를 변경할 수 있는 속성


    background-size: 가로축크기 세로축크기(px단위값/%단위값);

    background-cover; ---> 가로 크기는 박스 가득/ 세로 크기는 설정된 가로 크기에 따라 비율적으로 표시
    background-contain; ---> 세로 크기는 박스 가득/ 가로 크기는 설정된 세로 크기에 따라 비율적으로 표시



    (CSS3)

    background 이미지 중첩처리

    background: url(img/123.jpg) right 0 repeat-y.
                url(img/456.jpg) no-repeat,
                url(img/789.jpg) repeat-x;

    ---> 위 경우 맨 밑에 적힌 789.jpg가 맨 밑에 깔림

    (CSS3)

    background-image에 Gradient 속성 추가

    -각 브라우저마다 차이를 보이므로 각각 따로 코딩해야 함.

    Webkit(apple) --> safari, chrome, naver whale
    Mozila --> firefox, IE 11, 10(,9, 8), MS Edge
    Opera

    -webkit-gradient: (유형[linear/radial], 시작위치 끝위치, 시작색상, 끝색상);
    -moz-유형-gradient: (시작위치 각도(deg), 시작색상, 종료색상);

    background: -webkit-gradient(linear, left top, left bottom, from(#06f), to(#fff));
    background: -moz-linear-gradient(top, #06f, #fff);

    background: -webkit-gradient(linear, left bottom, right top, from(#06f), to(#fff));
    background: -moz-linear-gradient(bottom 45deg, #06f, #fff);

    background-image: -webkit-linear-gradient(top, #9fd6c2 8%, #57d6c2 74%);
    background-image: -moz-linear-gradient(top, #fce17e 5%, #222 90%);






    [2] Transform


    rotate(돌기): -브라우저접두사-transform: rotate(+-각도);

    * z-index 속성 적용 가능


    scale(크기변경): -브라우저접두사-transform: scale(가로비, 세로비);


    -webkit-transform: scale(0.5, 1.5);

    translate(위치변경): -브라우저접두사-transform: translate(가로좌표, 세로좌표);

    -position: relative;와 비슷하나 이동 좌표 기준이 요소의 중앙임.
    -주변 요소는 위치 변화 사실을 전혀 모르기 때문에 스크롤도 생기지 않음.

    skew(기울게): -브라우저접두사-transform: skew(가로축각도, 세로축각도);




    [3] 애니매이션 효과

    Transition: 가상클래스와 함께 사용 (:hover...)

    -브라우저접두사-transition: 속성명 시간 옵션;


    A {
         ...변경 전 내용...
         -브라우저접두사-transition: all 1s(1000ms) 옵션;
    }
    A:hover {
         ...변경 후 내용...
    }

    * 옵션:

    linear: 전 구간 동일 속도로 재생

    ease: 중간을 빠르게, 시작과 끝 부분 느리게

    ease-in: 시작 부분을 느리게

    ease-out: 끝 부분을 느리게

    ease-in-out: 시작과 끝 부분을 느리게




    ** opacity(투명도) / visibility

    opacity:0;
    visibility:hidden;





    반응형

    'Frontend' 카테고리의 다른 글

    COMMENT