• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 그리드에 대해서 공부 !!

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012