개발자_이훈규
천천히, 빠르게. 개발자의 Repository
개발자_이훈규
전체 방문자
오늘
어제
  • 분류 전체보기 (473)
    • 티스토리 (4)
    • 개발자 뉴스 (2)
    • 소프트웨어 (203)
      • C (7)
      • c++ (25)
      • Objective-C (3)
      • Do it! 반응형 웹디자인 (4)
      • openGL (8)
      • Java (24)
      • Jni (3)
      • Android (9)
      • Wordpress (2)
      • 버그 만난 후 느낀점 (2)
      • Git (3)
      • node js (2)
      • window tablet (1)
      • HTML (3)
      • javascript (3)
      • perl (1)
      • AngularJS (0)
      • JSON (0)
      • Docker (3)
      • python (5)
      • jQuery (1)
      • MFC (4)
      • cocos studio (6)
      • Golang (1)
      • SQLite3 (0)
      • Spring Boot (8)
      • thymeleaf (0)
      • Django (0)
      • iOS (3)
      • skia (0)
      • VBA (0)
      • PHP (2)
      • Oracle (1)
      • JSP (0)
      • R (0)
    • TCP IP (2)
    • 금융 (0)
      • 금융 Study (0)
      • 금융 Archive (0)
      • 금융 Article (0)
    • 개인 프로젝트 (7)
      • gif 홈페이지 만들기 (0)
      • study app만들기 (0)
      • 크롤러 만들기 (1)
      • 카툰 홈페이지 만들기 (1)
      • 외주 홈페이지 만들기 (3)
      • 웹 홈페이지 만들기 (0)
      • 미디어 서버 만들기 (0)
      • 소개팅 어플 만들기 (0)
      • 인스타그램 풀스택 클론 코딩(인강 노트) (0)
      • 주식 모의거래 만들기 (1)
    • html php mysql (0)
    • node.Js (2)
    • 일상 (2)
    • 빈공간 uml 공부 (0)
    • Ubuntu(linux) (12)
    • 맥OS (10)
      • android 설치하기 (2)
    • Programming quizzes (0)
    • IoT (구 유비쿼터스) (16)
      • 라즈베리 파이 (11)
      • 아두이노 (5)
    • 하드웨어 (5)
      • 아수스 비보탭 노트8 asus vivotap no.. (2)
      • 크레마 카르타 (3)
    • 분석할 문장, 구문, 코드 (0)
    • 키보드 (1)
      • 해피해킹 (1)
    • 코드 라이언 (0)
    • 전자기기 (4)
    • Ted (0)
    • NAS (0)
    • 알고리즘 (0)
    • 연합인포맥스 (0)
    • 이벤트 응모함 (4)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • 설치
  • C
  • 에러
  • ubuntu
  • 개발
  • C++
  • Example
  • 소스
  • Python
  • 예제
  • 우분투
  • 방법
  • install
  • 코드
  • CODE
  • error
  • 라즈베리 파이
  • Java
  • GIT
  • 설명

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
개발자_이훈규

천천히, 빠르게. 개발자의 Repository

2. 반응형 웹의 맛보기!
소프트웨어/Do it! 반응형 웹디자인

2. 반응형 웹의 맛보기!

2014. 9. 14. 19:03

2. 반응형 웹의 맛보기!



33p~ 34p


가변 그리드에 대해서 간단히 알아보자.


간단히 html에 div tag를 이용해서 네모를 출력할 때,

id로 style을 지정해줄때, 가변 그리드를 사용하려면 하나만 바꾸면 됩니다.


<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
        <style>
            *{margin:0; padding:0;}

            #wrap {
                width:90%;
                height:500px;
                margin:0 auto;
                background:#ff00ff;
                border:4px solid #001;

            }
        </style>
    </head>

    <body>
        <div id="wrap">
        </div>
    </body>
</html>




위의 소스는 보통의 html의 style입니다.
하지만 width에 px를 %로 바꾸면?!

width:90%;






이렇게 바꾸면 갑지가 반응형이 되어버립니다.

자~! 반응형 이제 끝?! 일까요??


아닙니다. 현재 웹이 반응형이긴 하지만 접속하는 기기의 해상도나 화면이 어느 크긴지 모르기때문에 아무런 소용이 없습니다.



이것을 해결해 주는 것이 있는데 이것들은 바로 

미디어 쿼리와 뷰포트 입니다.



일단 맛보기는 여기까지로 하겠습니다.


감사합니다.






2. 반응형 웹의 맛보기! 끝.



저작자표시 비영리 (새창열림)

'소프트웨어 > Do it! 반응형 웹디자인' 카테고리의 다른 글

4. 미디어 쿼리를 써보자.  (0) 2014.09.14
3. 뷰포트란 무엇인가?!  (0) 2014.09.14
1. 실습 예제 준비하기.  (0) 2014.09.14
    '소프트웨어/Do it! 반응형 웹디자인' 카테고리의 다른 글
    • 4. 미디어 쿼리를 써보자.
    • 3. 뷰포트란 무엇인가?!
    • 1. 실습 예제 준비하기.
    개발자_이훈규
    개발자_이훈규
    혼자 꽁양꽁양 개발하면서 놀아요~ - 노트같은 블로그

    티스토리툴바