logo

HTML 버튼에 링크를 추가하는 방법은 무엇입니까?

대화형 웹 인터페이스를 생성하려면 HTML 버튼에 링크를 추가하는 것이 필수적입니다. 이 문서에서는 실제 예제 및 코드 조각과 함께 인라인 이벤트, 양식 속성, CSS 스타일을 포함한 다양한 방법을 살펴보겠습니다.

먼저 기본 스타일을 사용하여 샘플 HTML 버튼을 만들어 보겠습니다.



HTML
   링크 제목 역할을 하는 HTML 버튼 만들기><style>.GFG { 너비:100px;  높이:50px;  배경:녹색;  테두리:없음;  색상: 흰색;  } 스타일> 머리> <body> <h1>techcodeview.comh1> <button>여기를 클릭하세요 버튼> 본문> html>></pre> </code> <p dir='ltr'><span>이제 필요한 방법과 함께 각 방법을 살펴보겠습니다.</span>  <b>  <strong>통사론</strong>  </b>  <span>그리고</span>  <b>  <strong>예</strong>  </b>  <span>코드.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-macos">맥 운영 체제</a>
</blockquote> <h2><span>HTML 버튼에 링크를 추가하는 방법</span></h2><h3>  <b>  <strong>1. 인라인</strong>  </b>   <b><code class='hljs'> onclick></code></b>   <b>  <strong>이벤트:</strong>  </b>  </h3><p dir='ltr'><span>인라인 onclick 이벤트 사용. JavaScript 함수를 버튼 요소의 onclick 속성과 연결합니다. 클릭하면 함수는 window.location.href를 사용하여 사용자를 지정된 URL로 리디렉션합니다.</span></p> <p dir='ltr'>  <b>  <strong>통사론:</strong>  </b>  </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/bucket-sort-algorithm">버킷 정렬</a>
</blockquote> <pre class='hljs'>Click Here></pre><p dir='ltr'>  <b>  <strong>예</strong>  </b>  <span>: 이 예에서는 CSS로 스타일이 지정된 HTML 버튼을 만듭니다. 클릭하면 인라인 onclick 이벤트를 사용하여 techcodeview.com IDE로 리디렉션됩니다.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>인라인 onclick 이벤트 제목 사용><style>.GFG { 배경색: 흰색;  테두리: 2px 단색 검정;  색상: 녹색;  패딩: 5px 10px;  커서: 포인터;  } 스타일> 머리> <body>   <button>여기를 클릭하세요 버튼> 본문> html>></pre> </code> <p dir='ltr'>  <b>  <strong>산출:</strong>  </b>  </p>  <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt="버튼링크"><p>인라인 onclick 이벤트 예제 출력</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/segmentation-fault-core-dumped-ubuntu">분할 오류 코어가 덤프되었습니다.</a>
</blockquote> <h3>  <b>  <strong>2. 내부에 버튼 태그 사용 <a>꼬리표:</a> </strong>  <a> </a> </b>  <a> </a> </h3><p dir='ltr'> <a><span>이 방법은 앵커 태그 안에 버튼을 만듭니다. 앵커 태그는 웹페이지를 지정된 위치로 리디렉션합니다.</span>  <b>  <strong>아래 코드 조각을 위의 샘플 버튼 코드에 제공된 버튼 요소로 바꿉니다.</strong>  </b>  </a> </p> <a> <p dir='ltr'>  <b>  <strong>통사론:</strong>  </b>  </p> </a> <pre class='hljs'>   Syntax:      Example  : HTML   <html> <head> <title>링크 제목 역할을 하는 HTML 버튼 만들기><style>.GFG { 너비:100px;  높이:50px;  배경:녹색;  테두리:없음;  색상: 흰색;  } 스타일> 머리> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>mea> body> html> 출력을 클릭합니다. Anchor 태그를 Button 링크로 사용합니다. 4. form 태그 사용 또 다른 접근 방식은 요소 내에서 action 또는 formaction 속성을 사용하는 것입니다. 이 방법은 의미상 더 정확하며 양식 내부에서도 잘 작동합니다.   body 태그의 아래 스니펫을 위의 샘플 버튼 코드에 제공된 버튼 요소로 바꿉니다.      나를 클릭하세요 예 : HTML<html> <head> <title>링크 제목 역할을 하는 HTML 버튼 만들기><style>.GFG { 너비:100px;  높이:50px;  배경:녹색;  테두리:없음;  색상: 흰색;  } 스타일> 머리> <body> <h1>techcodeview.comh1><form action='https://ide.techcodeview.com>  <button type='submit'>me버튼 클릭> form> body> html> 출력 : form 태그 사용 참고: 출력은 모든 방법에서 동일합니다.    출력:></pre></article>
                         
                        </div><!--//content-->
                    </div><!--//section-inner-->                 
                </section><!--//section-->
    
            </div><!--//primary-->
            <div class="secondary col-md-4 col-sm-12 col-xs-12">
                  <aside class="info aside section">
                    <div class="section-inner">
                        <h2 class="">범주</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/physics-calculators/">물리학-계산기</a> </li><li> <a href="/dbms-basics/">Dbms 기초</a> </li><li> <a href="/cpp-oops/">Cpp-Oop</a> </li><li> <a href="/quotes/">인용 부호</a> </li><li> <a href="/excel-how/">Excel 사용법</a> </li><li> <a href="/linux-man-pages/">리눅스 매뉴얼 페이지</a> </li><li> <a href="/java-array-programs/">Java 배열 프로그램</a> </li><li> <a href="/ansible-tutorial/">앤서블 튜토리얼</a> </li><li> <a href="/verilog-tutorial/">Verilog 튜토리얼</a> </li><li> <a href="/java-functions/">Java 함수</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Nick Cannon의 순자산 2023, 키, 나이, 영화 및 TV 프로그램</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Nick Cannon의 순자산은 2023년 기준으로 2천만 달러로 추산됩니다. 그러나 L.A. Times와의 인터뷰에서 Cannon은 연간 1억 달러를 벌고 있다고 주장했습니다.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/nick-cannon-s-net-worth-2023"> <i class="fa fa-external-link"></i> 자세히보기</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">재미있는 기사</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/java-foreach-loop">Java forEach 루프</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/apache-spark-tutorial">아파치 스파크 튜토리얼</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/30-oops-interview-questions">30 OOP 인터뷰 질문 및 답변 (2024)</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/surface-area-prism">프리즘의 표면적</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/mouni-roy">무니 로이</a> </strong> </span>
                                    
                                </li><!--//item-->
                               
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
              
                 <aside class="list music aside section">
                    <div class="section-inner">
                        <h2 class="heading">인기 게시물</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/how-get-input-from-user-java">자바 입력</a>
</li><li><a href="/string-concatenation-java">문자열 연결 자바</a>
</li><li><a href="/mysql-show-users-list-all-users">mysql 사용자 목록</a>
</li><li><a href="/how-many-zeros-1-million">100만은 0이 몇 개야?</a>
</li><li><a href="/postgresql-drop-column">postgresql에서 열을 삭제하는 방법</a>
</li><li><a href="/bfs-vs-dfs">DFS 대 BFS</a>
</li> 
                                
                                
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
              
            </div><!--//secondary-->    
        </div><!--//row-->
    </div><!--//masonry-->
    
	    <footer class="footer">
        <div class="container text-center">
                <span>
Copyright ©2025 판권 소유 |  <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">부인 성명</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">회사 소개</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">개인 정보 보호 정책</a>  </span>
        </div>
    </footer>
 
         
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    

    <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>     
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
	
</body>
</html>