회복맨 블로그

           
  • 홈
  • 방명록
  • 분류 전체보기 (422)
    • LG V50 ThinQ (2)
    • 에디터 (105)
      • 서브라임 텍스트(SublimeText) (36)
      • 브라켓 에디터(Brackets edit.. (17)
      • 아톰(Atom) (20)
      • 에디트플러스(EditPlus) (1)
      • 웹스톰(WebStorm) (11)
      • 비주얼 스튜디오 코드(Visual.. (20)
    • Github 사용법 (29)
    • Gulp 사용법 (6)
    • 웹팩(webpack) 사용법 (1)
    • javascript (29)
    • jQuery (17)
    • css (5)
    • 마크업 부터 시작하는 UI (17)
      • 컨트롤바 슬라이더 (4)
      • 반응형 라이트박스 슬라이더 (1)
      • 포지션 체인지 메뉴 (1)
      • 초기랜덤이미지슬라이더 (1)
      • 마우스 휠 사용한 UI (2)
      • 페이징 UI (1)
      • 트윈맥스(TweenMax) (7)
    • ajax (0)
    • 반응형 웹 만들기 (1)
    • 카페24 기본 사용법 (1)
    • Web..? (3)
    • ChromeBrowser 확장프로그램 (3)
    • 음악 :) (18)
    • 조별 프로젝트(4조) (0)
    • 일상.. (50)
    • apmsetup (3)
    • MySQL & PHP 학습 (57)
      • 정리 그리고 체크! (22)
      • 연습문제 (19)
      • mac(맥) xampp 설정 (5)
      • MySQL 기초연습 (1)
      • xampp 한글 설정 (10)
    • Mac(맥) 유용한 프로그램, App (4)
    • 읽을거리 (8)
    • 메모 (19)
      • PHP (18)
      • 보관용 (0)
    • 게임 (41)
    • 앵귤러(Angular) (0)
    • 노드(Node js) (1)
    • 리액트(React) (2)

반응형 웹 만들기 1건이 검색되었습니다.

미디어 쿼리

반응형 웹 만들기2015. 3. 24. 13:48

맨 먼저 미디어 쿼리.보통 표준 브라우저는 css 에 @media (최소 너비값){바뀌어 지게될 속성}을 넣는데 이거 띄어쓰기 잘 해야 한다.예를들어div 박스가 100x100 의 사이즈를 가지고 있고 빨간색의 박스가 있는데 브라우저의 너비가 1200px 이상일 경우의 css div{width:100px;height:100px;background-color:red;} 만약에 이것이 브라우저의 크기를 줄였을때. 예를들어 900px 의 width를 브라우져가 가졌을땐@media (min-width:900px){width:50px;height:50px;background-color:blue;}라고 한번 입력해보자. 위 코드는 미디어 타입을 지정 안했기에 IE9 이상에서만 변화를 확인 할 수 있다.

‹ Prev 1 Next ›
반응형

카테고리

  • 분류 전체보기 (422)
    • LG V50 ThinQ (2)
    • 에디터 (105)
      • 서브라임 텍스트(SublimeText) (36)
      • 브라켓 에디터(Brackets edit.. (17)
      • 아톰(Atom) (20)
      • 에디트플러스(EditPlus) (1)
      • 웹스톰(WebStorm) (11)
      • 비주얼 스튜디오 코드(Visual.. (20)
    • Github 사용법 (29)
    • Gulp 사용법 (6)
    • 웹팩(webpack) 사용법 (1)
    • javascript (29)
    • jQuery (17)
    • css (5)
    • 마크업 부터 시작하는 UI (17)
      • 컨트롤바 슬라이더 (4)
      • 반응형 라이트박스 슬라이더 (1)
      • 포지션 체인지 메뉴 (1)
      • 초기랜덤이미지슬라이더 (1)
      • 마우스 휠 사용한 UI (2)
      • 페이징 UI (1)
      • 트윈맥스(TweenMax) (7)
    • ajax (0)
    • 반응형 웹 만들기 (1)
    • 카페24 기본 사용법 (1)
    • Web..? (3)
    • ChromeBrowser 확장프로그램 (3)
    • 음악 :) (18)
    • 조별 프로젝트(4조) (0)
    • 일상.. (50)
    • apmsetup (3)
    • MySQL & PHP 학습 (57)
      • 정리 그리고 체크! (22)
      • 연습문제 (19)
      • mac(맥) xampp 설정 (5)
      • MySQL 기초연습 (1)
      • xampp 한글 설정 (10)
    • Mac(맥) 유용한 프로그램, App (4)
    • 읽을거리 (8)
    • 메모 (19)
      • PHP (18)
      • 보관용 (0)
    • 게임 (41)
    • 앵귤러(Angular) (0)
    • 노드(Node js) (1)
    • 리액트(React) (2)

공지사항

최근에 올라온 글

  • ›웹퍼블리셔가 사용하기 좋⋯
  • ›[비주얼 스튜디오 코드(Vi⋯
  • ›[비주얼 스튜디오 코드(Vi⋯
  • ›[비주얼 스튜디오 코드(Vi⋯
  • ›a 태그 이미지 다운로드
  • ›[study] 제로초 리액트 기⋯
  • ›PS4 드래곤볼Z 카카로트⋯
  • ›[study] 제로초 리액트 기⋯
  • ›쉐도우 아레나 2차 CBT 테⋯
  • ›닌텐도 스위치 랑그릿사 1⋯

최근에 달린 댓글

  • ›잘되네요 ㅎㅎ 이걸 응용해서⋯
  • ›방문해 주셔서 감사합니다 :D
  • ›도움됬습니다.감사합니다.
  • ›방문해 주셔서 감사합니다 :D
  • ›사랑합니다.
  • ›소리 최대로해도 않들려요.⋯
  • ›alert 과 prompt 는 웹브로우⋯
  • ›세로 스크롤과 달리 가로 스⋯
  • ›도움이 됐습니다. 가로 스크⋯
  • ›찾고 있었는데 ... 최고입니⋯

방문자

전체 : 1,860,116

오늘 : 86

어제 : 1,478

04-20 03:48
  • 홈
  • 방명록

Copyright © 회복맨 블로그 / designed by dev.golrazo.com

티스토리툴바