메뉴얼

  • Q: [CSS] CSS object-fit 속성 2019.12.04
    A:

    object-fit 속성은 IMG, VIDEO 태그의 크기를 컨테이너에 맞게 자정하는데 사용됩니다.


    브라우저 지원

    테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.

    Propertyicon-chrome1.png icon-edge.png icon-firefox1.png icon-safari1.png icon-opera1.png
    object-fit31.016.036.07.119.0

    정의(Definition)

    • object-fit 속성은 <img>, <video> 태그의 크기를 정의합니다.

    문법(Syntax)

    object-fit: fill | contain | cover | scale-down | none

    속성(Property)

    속성값설명
    fill컨텐츠 사이즈 크기에 맞게 설정합니다.
    contain컨텐츠의 가로 값을 기준으로 맞게 설정합니다.
    cover컨텐츠 화면 사이즈에 맞게 설정합니다.
    scale-down컨텐츠 크기 보다 작게 설정합니다.


    Original

    FILL

    CONTAIN

    COVER

    NONE

    SCALE-DOWN




    object-fit: fill;
    object-fit: contain;
    object-fit: cover;
    object-fit: none;
    object-fit: scale-down;
    


    Facebook [ko]댓글 

  • Q: [CSS] Css 텍스트 외곽선 처리하기, Stroke 2019.11.28
    A:
    CSS를 사용하여 텍스트에 외곽선, stroke 효과를 주는 방법을 알아봅니다.

    외곽선은 텍스트를 강조하는 효과적인 방법입니다. 간단하게 css를 사용하여 사용하는 것이 가능한데 가장 간단한 방법은 아래처럼 -webkit-text-stroke를 사용하는 방법입니다.

    -webkit-text-stroke: 1px #000


    다만, 이 방법은 매우 편리한 방법이지만 아쉽게도 표준 방법은 아니라 웹킷 및 모질라 계열의 브라우저에서만 적용됩니다. 사용할 경우 아래처럼 css에 적용하시기 바랍니다.
    .text-stroke {
      -webkit-text-stroke: 1px #000;
    }

    이제 텍스트에 외곽선이 선명하게 나타납니다.

    그렇다면 또 다른 방법을 알아봅니다.


    # -webkit-text-stroke 크로스 브라우징 방법아래와 같은 방법을 사용하면 텍스트음영효과인 text-shadow를 이용하여 비슷한 효과를 만들 수 있습니다. 아래 코드를 봐주세요.

    .text-stroke {
        color: #f00;
        text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;  
    }


    이 방법은 text-shadow가 적용되는 대부분의 브라우저에서 구현됩니다. 매우 효과적인 방법입니다.

    # 실제 외곽선 적용된 예제보기
    만약 아래와 같은 html에 위 css를 적용하여 외곽선을 직접 구현해보겠습니다.

    <span class="text-stroke">THEVOS</span>


    위 코드의 실행결과는 아래와 같습니다.

    THEVOS

    Facebook [ko]댓글 

Board Pagination Prev 1 Next
/ 1