여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 모바일 앱 구축
w3.css – 모바일 앱 구축
2개월전 작성
2개월전 수정

 

w3.css

모바일 앱 구축

영화 2014

겨울 왕국

애니메이션에 대한 반응은 우스꽝스러웠습니다.


우리 별의 결점

만지고, 움켜쥐고, 정말 잘 만들어졌습니다.


어벤저스

마블과 디즈니 모두에게 큰 성공을 거두었습니다.

푸터

기본 모바일 페이지 만들기

W3.CSS의 프로 버전은 모바일 앱에 적합하다.
작고 매우 빠르다.

예제
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<body>

<!-- Content here -->

</body>
</html>
기본 예시
예제 보기

콘텐츠 추가

예제 – 클래식 HTML 요소 사용
<div class="w3-container">
  <h1>Movies 2014</h1>
</div>

<div class="w3-cell-row">
  <div class="w3-cell">
    <img src="img_avatar.jpg">
  </div>
  <div class="w3-cell w3-container">
    <h3>Frozen</h3>
      <p>The response to the animations was ridiculous.</p>
  </div>
</div>

<div class="w3-container">
  <h3>Footer</h3>
</div>
기본 예시
예제 보기
예제 – 의미론적 HTML 요소 사용
<header class="w3-container">
  <h1>Header</h1>
</header>

<div class="w3-cell-row">
  <div class="w3-cell">
    <img src="img_avatar.jpg">
  </div>
  <div class="w3-cell w3-container">
    <h3>Frozen</h3>
      <p>The response to the animations was ridiculous.</p>
  </div>
</div>

<footer class="w3-container">
  <h3>Footer</h3>
</footer>

</body>
</html>
기본 예시
예제 보기

색상 테마 추가

예제
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
예제
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-red.css">
기본 예시
예제 보기

더 많은 스타일 추가

예제
<img class="w3-circle" src="img_avatar.jpg" alt="avatar">

<h3 class="w3-text-theme">Frozen</h3>
기본 예시
예제 보기

측면 탐색 추가

예제
<nav class="w3-sidebar w3-bar-block w3-card" id="mySidebar" style="width:30%">
<div class="w3-red">
  <a href="javascript:void(0)" onclick="closeSidebar()"
  class="w3-button w3-display-topright w3-xlarge">X</a>
    <div class="w3-padding-large w3-center">
      <img class="w3-circle" src="img_avatar.jpg" alt="avatar">
   </div>
  </div>
<a class="w3-bar-item w3-button" href="#">Home</a>
<a class="w3-bar-item w3-button" href="#">Friends</a>
<a class="w3-bar-item w3-button" href="#">Messages</a>
</nav>

<script>
function openSidebar() {
  document.getElementById("mySidebar").style.display = "block";
}

function closeSidebar() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>
기본 예시
예제 보기

고정 탐색, 머리글 및 바닥글

예제
<header class="w3-top">

<nav class="w3-top">

<footer class="w3-bottom">
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그