• Q&A
  • 회원가입
  • 로그인

[responsive] CSS - RES Frameworks - (반응형 프레임워크) - 반응형홈페이지틀

대표적인 반응형 프레임워크

 

1. W3.CSS 활용

2. BS 활용 (= 부트스트랩 활용)

 

※ 프레임워크 : 미리 만들어놓은 틀

 

 

W3.CSS 예제

 

<!DOCTYPE html>

<html>

<title>홈짱닷컴</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>


<div class="w3-container w3-green">

  <h1>홈짱닷컴</h1> 

  <p>Homzzang.com</p> 

</div>


<div class="w3-row-padding">

  <div class="w3-third">

    <h2>HTML</h2>

    <p>홈페이지 기본 뼈대</p>

  </div>


  <div class="w3-third">

    <h2>CSS</h2>

    <p>홈페이지 주요 디자인</p>

  </div>


  <div class="w3-third">

    <h2>JS</h2>

    <p>홈페이지 동적 기능</p>

  </div>

</div>


</body>

</html>


결과보기

 

 

 

BS 예제

 

<!DOCTYPE html>

<html lang="kr">

<head>

  <title>홈짱닷컴</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container">

  <div class="jumbotron">

    <h1>홈짱닷컴</h1>

    <p>Homzzang.com</p> 

  </div>

  <div class="row">

    <div class="col-sm-4">

      <h3>HTML</h3>

      <p>홈페이지 뼈대</p>

    </div>

    <div class="col-sm-4">

      <h3>CSS</h3>

      <p>홈페이지 디자인</p>

    </div>

    <div class="col-sm-4">

      <h3>JS</h3>    

      <p>홈페이지 기능</p>

    </div>

  </div>

</div>


</body>

</html>


결과보기

※ BS 그리드에 대해서 공부 !!

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012