HTML 32
폰트어썸 아이콘 깨져서 나올 때 해결 방법 (Font Awesome)
폰트어썸 아이콘이 깨져서 나올 때 해결 방법을 알아봅시다. 1. 폰트 어썸 https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com ① 폰트 어썸 아이콘 폰트 어썸에서는 아이콘을 html 코드로 가져와 사용이 가능한 사이트입니다. 코드로 되어있기 때문에 css 적용도 가능하다는 장점이 있죠. - ② 폰트 어썸 사용법 폰트 어썸이 처음이시라면 아래 버튼을 눌러 자세한 사용방법을 확인해 주세요. 폰트어썸 사용하기 2. 폰트 어..
티스토리 표에 이미지 넣는 방법
보통 티스토리 표 넣으실 때 위쪽에 있는 테이블 메뉴를 사용하시죠? 그런데 티스토리 테이블에서는 이미지 추가가 안됩니다. 분명 이미지를 넣을 경우가 생기는데 말이죠. 인간은 언제나 해결책을 찾아내는 법이죠 지금부터 티스토리 표에 이미지 넣는 방법을 알려드리겠습니다. 1. 티스토리 표 만들기 표 만들기 티스토리에서 표를 만드는 방법은 다들 알고 계시죠? 글쓰기에 들어와서 상단 메뉴에서 저런 표 모양을 선택하고 원하는 칸만큼 드래그해주시면 됩니다. 적당히 표를 만들어줄게요. - 표 제작 이런 식으로 일단 이미지를 제외한 부분에 내용을 적어줍니다. 저는 대충 만들어볼게요. - 2. 표에 이미지 넣기 HTML 모드 티스토리 글쓰기에서 상단 오른쪽을 보시면 기본 모드 버튼이 있는데 클릭하면 아래쪽에 HTML이 있..
og 태그 미리보기 이미지 넣기
og 태그를 이용해 링크의 미리 보기 이미지, 설명, 제목을 넣어보겠습니다. 1. og 태그 og 태그를 이용한 미리 보기 화면 og 태그가 무엇이냐면 위의 이미지처럼 카톡이든 어디서 링크를 보낼 때 미리보기로 나오는 이미지, 제목, 설명을 설정해주는 태그입니다. html에 메타태그로 추가해주시면 됩니다. - og 태그 사용 이 메타태그 3줄을 복사해서 og 이미지 넣기 위의 코드처럼 넣었는데 이미지가 뜨지 않으신다면 flask 설치가 안되어있어서 그럴 수도 있습니다. flask를 설치해주시거나 간단하게 위의 예시처럼 이미지 주소를 그냥 적어주세요. 이상으로 og 태그를 이용해 미리 보기 이미지를 넣는 방법을 알아보았습니다. 도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다. [같이 보면 좋은 포스팅] ..
HTML 코드 검사 해보기
HTML 코드를 작성하다가 오류가 발생했다거나 혹은 유효한 태그가 맞는지 확인해 보고 싶을 때 사용할 수 있는 사이트가 있습니다. 1. W3C Marcup https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org 바로 W3C Markup 사이트입니다. 코드를 검사할 수 있는 방법은 세 가지가 있습니다. URI 주소를 넣는..
마우스를 올리면 그려지는 테두리 애니메이션 구조를 살펴보자(html)
기능보다 디자인 측면에 비중을 두는 작업인 오늘의 포스팅입니다. 어떤 홈페이지에 들어갔을 때, 마우스를 올리면 안쪽에 테두리가 천천히 그려지는 모습을 혹시 본 적 있으신가요? 저는 그게 멋있어 보였거든요. 그래서 css로 구현을 해보려고 합니다!! 오늘은 html 구조부터 살펴볼게요. 1. 미리 보기 ① 효과 이해하기 - 마우스를 올렸을 때 표시된 저부분이 한 번에 나타나는 것이 아니라 - 왼쪽에서부터 천천히 오른쪽으로 그려져서 테두리를 그리는 효과를 만들 거예요. http://ssimplay.com/ SSIMPLAY ssimplay.com 실제 적용 모습은 포트폴리오 사이트에서 확인해주세요. 2. html 구조 생각하기 설명하기에 앞서 이 모든 내용은 제가 했던 방법을 알려드리는 것으로 정답이 아니라 ..
