티스토리 간편 유용 HTML 모음 추가 10개

 

11. 탭 기능

 

<style>
    .tab-content {
        display: none;
    }
    .tab-content.active {
        display: block;
    }
</style>

<div>
    <button onclick="showTab('tab1')">탭 1</button>
    <button onclick="showTab('tab2')">탭 2</button>
</div>
<div id="tab1" class="tab-content active">
    탭 1 내용
</div>
<div id="tab2" class="tab-content">
    탭 2 내용
</div>

<script>
    function showTab(tabId) {
        var tabs = document.querySelectorAll('.tab-content');
        tabs.forEach(tab => tab.classList.remove('active'));
        document.getElementById(tabId).classList.add('active');
    }
</script>

 

사용법: 탭을 여러 개 만들고 각 탭에 대한 내용을 tab-content 클래스 안에 추가하세요.

 

12. 컬러 박스

 

<div style="background-color:#ff5722; color:white; padding:10px; border-radius:5px;">
    컬러 박스 내용
</div>

사용법: background-color와 color를 원하는 색상으로 변경하고 내용을 입력하세요.

 

13. 구분선

 

<hr style="border-top:2px solid #000;">

 

사용법: 구분선의 두께와 색상을 원하는 대로 수정하세요.

 

14. 접이식 패널

 

<style>
    .panel {
        display: none;
        background-color: #f1f1f1;
        padding: 10px;
        margin-top: 5px;
    }
</style>

<button onclick="togglePanel()">접이식 패널</button>
<div id="panel" class="panel">
    패널 내용
</div>

<script>
    function togglePanel() {
        var panel = document.getElementById('panel');
        panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
    }
</script>

 

사용법: 버튼 클릭 시 보여질 패널 내용을 panel 클래스 안에 입력하세요.

 

15. 강조 박스

 

<div style="border-left:5px solid #4caf50; background-color:#e8f5e9; padding:10px;">
    <strong>강조:</strong> 중요한 내용을 여기에 입력하세요.
</div>

 

사용법: border-left의 색상과 background-color를 원하는 대로 수정하고 내용을 입력하세요.

 

16. 마우스 오버 효과

 

<a href="http://www.example.com" style="color:blue;" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">링크에 마우스를 올려보세요!</a>

 

사용법: 링크에 마우스를 올리면 색상이 변경됩니다. onmouseover와 onmouseout 속성을 사용하여 원하는 색상으로 조정하세요.

 

17. HTML5 비디오 삽입

 

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

 

사용법: src에 비디오 파일 경로를 입력하고, 비디오 파일 형식에 맞게 type을 수정하세요. controls 속성은 재생, 일시정지 등의 컨트롤러를 표시합니다.

 

18. 아코디언 스타일 메뉴

 

<button onclick="myFunction()">메뉴 열기</button>
<div id="myDIV" style="display:none;padding:20px;background-color:lightgray;">
  여기에 숨겨진 내용을 입력하세요.
</div>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

 

사용법: 버튼을 클릭하면 숨겨진 내용이 표시되거나 숨겨집니다. 스크립트를 조정하여 추가 기능을 구현할 수 있습니다.

 

19. 사진 갤러리

 

<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.flex-container > div {
  margin: 10px;
  text-align: center;
}
</style>

<div class="flex-container">
  <div><img src="image1.jpg" alt="이미지1" style="width:100%;"></div>
  <div><img src="image2.jpg" alt="이미지2" style="width:100%;"></div>
  <div><img src="image3.jpg" alt="이미지3" style="width:100%;"></div>
</div>

 

사용법: 각 <div> 태그 안에 원하는 이미지 경로를 입력하고, CSS를 통해 갤러리 레이아웃을 조정할 수 있습니다.

 

20. 복사 금지 기능

 

<div oncopy="return false" oncut="return false" onpaste="return false">
  이 텍스트를 복사할 수 없습니다.
</div>

 

사용법: 이 HTML 구조는 사용자가 텍스트를 복사하거나 자르거나 붙여넣기를 하려고 할 때 이를 방지합니다. 모든 웹 브라우저에서 완벽하게 작동하지는 않을 수 있으므로 주의가 필요합니다.

---

티스토리 간편 유용 HTML 모음 + 소제목 꾸미기 추천 글

TISTORY 폰트 관련 스타일을 적용할 수 있는 유용한 HTML 코드 5개