기술을 디자인감성을 더하는 디자인해답입니다.

위의 이미지에서 빨간 라인 영역은 배경이미지처리가 아닌 css로 처리한 예입니다. div로 삼각형모양으로 마스킹하는 방법을 알려드리고자 합니다. transform 을 활용하여 만드는 방법입니다. transform의 특성을 먼저 알아보고 가겠습니다. Transform (개체를 변형시키다) 회전 효과, 스케일링(확대/축소) 효과, 기울임 조절, 위치 변경과 같은 변형 처리가 가능합니다. 값에는 translate(), scal(), rotate(), skew() 4종류의 트랜스폼 함수를 사용해, 이동, 확대, 축소, 회전, 경사를 만들수 있습니다. 1. 이동(translate) - translate() 함수는 요소를 X축 방향이나 Y축 방향으로 이동시킬 수 있습니다. - X축 방향값을 플러스로 하면 오른쪽으로..

반응형 웹을 구축하면서 고객의 니즈에 맞춰 추가되는 CSS를 공부하며 성장하고 있는 디자인해답니다. 이미지를 클릭을 유도하기 위해 이미지위에 마우스 오버시 색상이 변하고 짧은 문구까지 나온다면 더욱 클릭이 유도될 수 있습니다. 오늘 추천해드리는 방법은 아주 간단한 CSS 방법으로 백그라운드에 이미지를 넣고 그 위에 오버레이되는 방식으로 글씨를 띄워주는 방식입니다. 소스는 아래와 같이 간단히 진행합니다. 컬러값은 동일한 숫자나 영문일때 3개만 작성해도 적용됩니다. 진짜 간단하고 쉽죠, 아래의 페이지의 적용하는 태그를 작성하면 끝입니다! 마우스 오버시 변환

이미지처럼 모바일에서 반응형웹 페이지를 실행할때 가로 스크롤(수평 스크롤)이 생기는 문제가 발생할때가 있습니다.모바일 기기에서 수평스크롤을 비활성화해서 문제를 해결해 봅시다. 우선 라인에 태그를 추가합니다. 저같은 경우, 위의 메타태그로 한번에 해결이 되었습니다. 아이폰 등 Apple iOS 기기에서 문제가 나타나는 경우 아래의 태그를 추가해 봅니다. safari 에서 가로스크롤 막기 body { over-flow-x : hidden; } 위와 같은 방법도 있습니다. 사파이에서 여전히 가로스크롤이 동작시 html { over-flow-x : hidden; } 다른분의 자료 참고 : 모바일 기기에서 수평스크롤 없애기