2019/014

CSS 긴글 말줄임 처리하는 방법 장문의 글에 지정된 줄에서 줄임말 처리를 하고 나머지는 노출하지 않는 방법으로 글목록의 요약 내용이 필요 이상으로 많이 나올 때 이를 처리할 때 유용하게 사용할 수 있는 속성입니다. display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; 말줄임표를 표현하기 위해서 필수적으로 필요한 속성들로 하나라도 빠지게 되면 글줄임 기능을 하지 못하게 됩니다. 첫 번째 줄 두 번째 줄 세 번째 줄 네 번째 줄 첫 번째 줄 두 번째 줄 세 번째 줄 네 번째 줄 실제 줄 수는 4줄이지만 -webkit-line-clamp: 3 속성으로 3번 줄까지만 표현하며 말 줄임표를 넣고 나머지 줄은 요소에서 제외해버리며 마지막 줄에는 적용이 되지 않습니다... 2019. 1. 21.
티스토리 블로그 구글 서치 사이트맵 제출하기 티스토리 블로그 사이트맵 만들어서 구글 서치 등록하는 방법 원활한 구글 검색 노출을 위하여 구글 서치에 블로그를 등록하여 관리는 하는데 사이 맵을 제출하게 되면 봇이 접근하여 크롤링 작업을 보다 유용하게 할 수 있는데요. 티스토리 블로그는 사이트 맵을 지원하지 않기 때문에 만들어주는 사이트의 도움을 받아서 Sitemap을 생성하여야 하는데 Sitemap을 생성해주는 http://www.check-domains.com/sitemap의 도움을 받으면 어렵지 않게 만들어서 제출이 가능합니다. 'Site URL' 주소창에 블로그 주소를 입력하여 주고 'Frequency - Priority' 항목에 'Monthly'로 되어 있는 것을 선택하여 'Always'로 변경하고 'Create Sitemap'를 클릭하면 사.. 2019. 1. 15.
이미지에 화살표 넣는 방법 이미지에 간단하게 화살표 삽입하기 이미지 파일에 화살표를 추가하여 사용자가 특정 위치를 확인하기 편하도록 하는 방법입니다. 다양한 그래픽 툴이 있고 다양한 방법으로 화살표를 표현 가능하지만 이번에 소개할 방법을 픽픽이라는 도구를 이용하여 화살표를 만드는 방법입니다. 픽픽 도구로 이미지 파일을 불러와 도형 도구를 이용하여 원하는 곳에 화살표를 삽입할 수 있습니다. 도형 항목에서 화살표 도구를 선택한 뒤 시작할 위치를 클릭하고 클릭을 유지한 채로 화살표가 향할 곳으로 드래그한 뒤 마우스를 놓으면 생성이 됩니다. 두께, 색상, 투명도등의 자유롭게 변경가능하고 텍스트도 추가가능하여 설명을 붙일수도있습다. 화살표는 직선과 곡선으로 표현이 가능하고 노란색 꼭짓점을 선택하여 위치 변경 및 휘는 량을 조절 가능합니다... 2019. 1. 9.
애드센스 반응형 전체 폭, 영어 광고 차단하기 전체 폭을 차지하는 광고, 해외 광고 차단하기 반응형 애드센스를 사용하는 경우 적용한 페이지의 가로폭에 맞추어 자동적으로 광고 크기가 자동적으로 조절이 되는데요. 미디어 쿼리를 적용하여 페이지 폭에 맞추어 사이즈를 지정한 경우에는 지정해 놓은 크기로 변경이 되지만 미디어 쿼리를 적용하지 않은 경우에는 적용한 웹페이지 요소의 전체 폭에 맞추어 광고가 생성됩니다. PC 아무런 문제가 되지 않지만 모바일 버전에서는 가독성을 위하여 좌, 우 여백을 주었지만 여백을 무시한 체 100% 폭을 차지하여 내용과 조화를 이루지 못하는 모습입니다. 100% 차지하지 못하게 하기 위해서는 코드에 data-full-width-responsive="false" 속성을 부여하여 주면 여백을 무시하는 것을 방지할 수 있습니다. 반.. 2019. 1. 2.

티스토리툴바