티스토리 모바일에서 제공되는 인기글의 썸네일의 세로 사이즈를 긴 형태라 임의로 크기를 정사각형으로 줄이면 이미지가 아래 부분이 잘린다. 그래서 원형으로 하기 보다는 원래 크기 그대로 이용해 다시 구성해 보았다. 이미지 배치 형태는 코드랍을 참고했다. SONYLOVE 인기글
SECRET
2018. 6. 4. 12:17
블로그들을 보다 보면 글 중간 중간 이모티콘을 사용하여 기분을 나타낸다거나 글과 관련된 이미지들을 삽입하여 글을 작성하기도 한다. 블로그에서 자체적으로 제공하기도 하지만 그렇지 않은 경우도 있다. 정작 나는 네이버에서 사용하는 이모티콘의 사용을 그리 좋아하지는 않는다. 글들이 동일한 이모티콘의 사용으로 다 비슷하게 보인다. 남들과 똑같아지고 싶지는 않다. HOW !!!!!! 남들과 다른 이모티콘을 사용할 수 있는 방법이 있다. 다행히 인터넷 상에는 무료로 이미지나 이모티콘을 제공하는 사이트들이 있어 원하는 이미지를 가져다가 블로그에 활용할 수 있다. 내가 아이콘이나 이미지를 즐겨 사용하는 곳은 Freepik 과 Flaticon 이다. 두 사이트 모두 다양한 이미지 자료들을 제공하고 있다. 제공되는 그대로..
SECRET
2018. 2. 10. 16:54
문득 든 생각인데 타이틀 부분의 배경에 이미지를 삽입할 생각만 했었는데 이미지가 아닌 원모양을 css로 배치해 보면 어떨까 싶은 생각이 들어 시도해본다. 타이틀 클래스에 before 나 after 를 활용해서 레이어 하단에 원을 배치하면 쉽게 추가할 수 있다. 원 뿐만 아니라 애니메이션도 가능하고 원하는 건 뭐든지...SVG 를 이용한 그림 그리기 효과도 괜찮을꺼 같다. 반응형에 맞게 원 크기를 변경하는게 좀 문제긴 하지만... 원에 포함된 텍스트와 포함되지 않은 벗어난 부분의 텍스트의 색상을 달리 해야 할거 같다.
SECRET
2018. 1. 20. 14:35
전주 여행 1 전주 여행 전주 여행 2 전주 여행 2 전주 여행 3 Cosmin Capitanu Forefathers Julien Lavallee Mike | Creative Mints Cosmin Capitanu Forefathers Julien Lavallee Mike | Creative Mints Forefathers Cosmin Capitanu Forefathers Julien Lavallee Mike | Creative Mints Cosmin Capitanu Forefathers Julien Lavallee Mike | Creative Mints Cosmin Capitanu Forefathers Julien Lavallee Mike | Creative Mints Forefathers Cosmin..
SECRET
2017. 9. 26. 03:14
글상자를 만드는 방법은 여러가지가 있다. 선 (line)을 이용할 수도 있고 padding 을 이용한 공간을 박스로 이용할 수도 있다. 여기서는 이미지를 배경으로 글상자를 만들어 보려고 한다. 그럼 글상자를 만들어 보자 border-image 자체만으로는 크롬외에는 작동하지 않는다. 사파리나 파폭에서 제대로 보려면 -webkit- 을 추가로 사용해야 한다. 이미지 글상자 만들기 이미지 글상자 만들기는 border-image 를 활용하는 것이다. 테두리가 있는 PNG 나 SVG 이미지를 이용해 테두리를 다양하게 만들 수 있다. 비공개 전환 이 블로그 내에 공개된 내용 외에 사용된 보이지 않는것들을 소스 보기를 통해 볼 수 있다고 해서 마음대로 가져가도 된다는 의미가 아니다. .
SECRET
2017. 9. 2. 14:19