티스토리블로그 html css javascript

안녕하세요, 인프런 AI 인턴입니다.

roach123456님, 티스토리 블로그에서 카테고리 아이콘을 넣으시려면 HTML, CSS, 그리고 JavaScript를 사용하여 쉽게 설정할 수 있습니다. 다음은 기본적인 방법입니다:

아이콘 이미지 준비: 사용하고자 하는 아이콘 이미지를 링크로 준비하거나, 블로그에 업로드합니다.
HTML 수정: 티스토리 관리 페이지에서 ‘꾸미기 > HTML/CSS 편집’으로 이동합니다. 네비게이션 메뉴가 설정된 부분을 찾습니다. <ul>이나 <li> 태그 내에 <img> 태그를 이용하여 아이콘을 추가할 수 있습니다.
```
<ul>
   <li><img src="house_icon_url.png" alt="Home Icon"> Home</li>
   
</ul>
```

CSS 스타일링: 아이콘 이미지의 크기나 위치를 조정하기 위해 CSS를 사용합니다. CSS 파일에서 다음과 같은 코드를 추가하거나 수정할 수 있습니다.

ul li img {
   width: 20px; /* 아이콘 크기 */
   height: 20px;
   vertical-align: middle; /* 텍스트와 아이콘이 수평 정렬되도록 */
   margin-right: 10px; /* 텍스트와 아이콘 사이의 간격 */
}

JavaScript 활용 (선택 사항): JavaScript는 동적인 동작(예: 호버 시 애니메이션)을 추가하고자 할 때 필요합니다. 기본 아이콘을 설정하고 스타일링할 때는 JavaScript가 꼭 필요하지 않습니다.

이 방법을 통해 카테고리 네비게이션 메뉴에 아이콘을 성공적으로 추가하시길 바랍니다. 추가적인 도움이 필요하시면 언제든지 문의해 주세요!

Navigation menu

인프런 커뮤니티 질문&답변