-
Q:
[CSS] CSS object-fit 속성
2019.12.04
A:
object-fit 속성은
IMG
,VIDEO
태그의 크기를 컨테이너에 맞게 자정하는데 사용됩니다.브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
Property object-fit 31.0 16.0 36.0 7.1 19.0
Original
FILL
CONTAIN
COVER
NONE
SCALE-DOWN
object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down;
-
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>
위 코드의 실행결과는 아래와 같습니다.
THEVOSFacebook [ko]댓글
Facebook [ko]댓글