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;
2017-09-01 07:24:13CSS를 사용해 박스 형태의 인터페이스 테두리(외곽선)를 부드럽게 만들기 위해서 어떻게 해야할까요?# 테두리 외곽선 둥글게 만들기, border-radius과거에는 브라우저의 호환성을 위해 대부분 백그라운드 이미지를 활용하는 방법을 많이 사용했습니다. 하지만 최근에는 대부분의 브라우저가 둥글게 보이도록 만드는 border-radius 속성을 대부분 지원하기 때문에 어렵게 이미지 작업을 하지 않아도 css만으로 간단하게 사용 가능합니다.참고로 테두리를 만드는 스타일인 속성 border가 없더라도 둥글게 표현되니 참고하세요. 아래는 간단한 문법, 사용 방법입니다.border-radius: value위의 방법으로 값을 지정할때는 얼마만큼 둥글게 표현할 것인지를 결정할 수 있습니다. 값은 아래와 같이 픽셀 또는 퍼센트를 입력하여 사용합니다.border-radius: 2px;border-radius: 10px;// 픽셀(pixel) 단위의 값을 지정함bordr-radius: 50%;// 상대
2016-05-09 15:43:53
