w3.css 상단 탐색 표시줄 CSS를 사용하여 상단 탐색 모음을 만드는 방법을 알아보자. 상단 탐색 표시줄 만들기 1단계) HTML 추가 <div class=”topnav”> <a class=”active” href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> </div> 2단계) CSS 추가 /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change…

w3.css 호버 탭 CSS 및 JavaScript를 사용하여 마우스 오버 시 탭을 변경하는 방법을 알아보자. 호버링 가능한 수직 탭 생성 1단계) HTML 추가 <div class=”tab”> <button class=”tablinks” onmouseover=”openCity(event, ‘London’)”>London</button> <button class=”tablinks” onmouseover=”openCity(event, ‘Paris’)”>Paris</button> <button class=”tablinks” onmouseover=”openCity(event, ‘Tokyo’)”>Tokyo</button> </div> <div id=”London” class=”tabcontent”> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id=”Paris” class=”tabcontent”> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id=”Tokyo” class=”tabcontent”> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div>   특정 탭 콘텐츠를 여는 버튼을 만든다. 모든 <div>…

w3.css 전체 페이지 탭 CSS 및 JavaScript를 사용하여 전체 브라우저 창을 덮는 전체 페이지 탭을 만드는 방법을 알아보자. 한 페이지 탭 만들기 1단계) HTML 추가 <button class=”tablink” onclick=”openPage(‘Home’, this, ‘red’)”>Home</button> <button class=”tablink” onclick=”openPage(‘News’, this, ‘green’)” id=”defaultOpen”>News</button> <button class=”tablink” onclick=”openPage(‘Contact’, this, ‘blue’)”>Contact</button> <button class=”tablink” onclick=”openPage(‘About’, this, ‘orange’)”>About</button> <div id=”Home” class=”tabcontent”> <h3>Home</h3> <p>Home is where the heart is..</p> </div> <div id=”News” class=”tabcontent”> <h3>News</h3> <p>Some news this fine day!</p> </div> <div id=”Contact” class=”tabcontent”> <h3>Contact</h3> <p>Get in touch, or swing by for a cup…

w3.css 탭 헤더 CSS 및 JavaScript를 사용하여 탭 헤더를 만드는 방법을 알아보자. 토글 가능한 탭 헤더 생성 1단계) HTML 추가 <div id=”London” class=”tabcontent”> <h1>London</h1> <p>London is the capital city of England.</p> </div> <div id=”Paris” class=”tabcontent”> <h1>Paris</h1> <p>Paris is the capital of France.</p> </div> <div id=”Tokyo” class=”tabcontent”> <h1>Tokyo</h1> <p>Tokyo is the capital of Japan.</p> </div> <div id=”Oslo” class=”tabcontent”> <h1>Oslo</h1> <p>Oslo is the capital of Norway.</p> </div> <button class=”tablink” onclick=”openCity(‘London’, this, ‘red’)” id=”defaultOpen”>London</button> <button class=”tablink” onclick=”openCity(‘Paris’, this, ‘green’)”>Paris</button> <button class=”tablink” onclick=”openCity(‘Tokyo’, this,…

w3.css 수직 탭 CSS와 JavaScript를 사용하여 수직 탭 메뉴를 만드는 방법을 알아보자. 탭은 단일 페이지 웹 애플리케이션이나 다양한 주제를 표시할 수 있는 웹 페이지에 적합하다. 토글 가능한 수직 탭 생성 1단계) HTML 추가 <div class=”tab”> <button class=”tablinks” onclick=”openCity(event, ‘London’)”>London</button> <button class=”tablinks” onclick=”openCity(event, ‘Paris’)”>Paris</button> <button class=”tablinks” onclick=”openCity(event, ‘Tokyo’)”>Tokyo</button> </div> <div id=”London” class=”tabcontent”> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id=”Paris” class=”tabcontent”> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id=”Tokyo” class=”tabcontent”> <h3>Tokyo</h3> <p>Tokyo is the capital of…

w3.css 탭 CSS 및 JavaScript를 사용하여 탭을 만드는 방법을 알아보자. 탭 탭은 단일 페이지 웹 애플리케이션이나 다양한 주제를 표시할 수 있는 웹 페이지에 적합하다. 1단계) HTML 추가 <!– Tab links –> <div class=”tab”> <button class=”tablinks” onclick=”openCity(event, ‘London’)”>London</button> <button class=”tablinks” onclick=”openCity(event, ‘Paris’)”>Paris</button> <button class=”tablinks” onclick=”openCity(event, ‘Tokyo’)”>Tokyo</button> </div> <!– Tab content –> <div id=”London” class=”tabcontent”> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id=”Paris” class=”tabcontent”> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id=”Tokyo” class=”tabcontent”> <h3>Tokyo</h3> <p>Tokyo is the…

w3.css 접이식 / 아코디언 아코디언(접이식 콘텐츠)을 만드는 방법을 알아보자. 아코디언 아코디언은 많은 양의 콘텐츠를 숨기거나 표시하려는 경우에 유용하다. 1단계) HTML 추가 <button class=”accordion”>Section 1</button> <div class=”panel”> <p>Lorem ipsum…</p> </div> <button class=”accordion”>Section 2</button> <div class=”panel”> <p>Lorem ipsum…</p> </div> <button class=”accordion”>Section 3</button> <div class=”panel”> <p>Lorem ipsum…</p> </div> 2단계) CSS 추가 /* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline:…

w3.css 메뉴 아이콘 CSS를 사용하여 메뉴 아이콘을 만드는 방법을 알아보자. 메뉴 아이콘을 만드는 방법 아이콘 라이브러리를 사용하지 않는 경우 CSS를 사용하여 기본 메뉴 아이콘을 만들 수 있다. 1단계) HTML 추가 <div></div> <div></div> <div></div> 2단계) CSS 추가 div { width: 35px; height: 5px; background-color: black; margin: 6px 0; } 예시 설명 width 및 height 속성은 각 막대의 너비와 높이를 지정한다. 검정색을 추가했으며 background-color 상단과 하단 margin을 사용하여 각 막대 사이에 약간의 거리를 만든다. 애니메이션 아이콘 CSS와 JavaScript를 사용하여 메뉴 아이콘을 클릭하면…

w3.css 아이콘 표시줄 CSS로 아이콘 막대를 만드는 방법을 알아보자. 아이콘 표시줄을 만드는 방법 1단계) HTML 추가 <!– Add icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <div class=”icon-bar”> <a class=”active” href=”#”><i class=”fa fa-home”></i></a> <a href=”#”><i class=”fa fa-search”></i></a> <a href=”#”><i class=”fa fa-envelope”></i></a> <a href=”#”><i class=”fa fa-globe”></i></a> <a href=”#”><i class=”fa fa-trash”></i></a> </div> 2단계) CSS 추가 .icon-bar { width: 90px; /* Set a specific width */ background-color: #555; /* Dark-grey background */ } .icon-bar a { display: block; /* Make the links appear below each…

  w3.css 색상 테마 W3.CSS를 사용하면 색상 테마로 애플리케이션을 쉽게 사용자 정의할 수 있다. 영화 2014 겨울 왕국 애니메이션에 대한 반응은 우스꽝스러웠습니다. 우리 별의 결점 만지고, 움켜쥐고, 정말 잘 만들어졌습니다. 어벤저스 마블과 디즈니의 큰 성공 «» 영화 2014 겨울 왕국 애니메이션에 대한 반응은 우스꽝스러웠습니다. 우리 별의 결점 만지고, 움켜쥐고, 정말 잘 만들어졌습니다. 어벤저스 마블과 디즈니의 큰 성공 «» 여러분이 해야 할 일은 미리 정의된(또는 직접 만든) 테마에 대한 링크를 추가하는 것뿐이다. 예제 <link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”> <link rel=”stylesheet” href=”https://www.w3schools.com/lib/w3-theme-indigo.css”> 사전 정의된…