본문 바로가기 메뉴 바로가기

기록은 기억을 지배한다

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

기록은 기억을 지배한다

검색하기 폼
  • 분류 전체보기 (138)
    • 알고리즘&자료구조 (11)
    • HTML+CSS (3)
    • React (3)
    • Python (16)
    • Java (2)
    • DataBase (1)
    • 클라우드 (3)
    • Ubuntu(Linux) (23)
    • 영상처리 (12)
    • ML | DL (29)
    • MLOps (3)
    • 개발 기타 (28)
    • 개인 기타 (4)
  • 방명록

Responsive (1)
[CSS]반응형 웹 media query

반응형 웹이란 웹을 이용하는 브라우저의 크기에 따라 다르게 표시하는 것을 의미한다. CSS 내부에서 @media 쿼리를 이용하여 구현할 수 있다. 위와 같이 소스를 구성하였다. 의 기본 속성은 파란색 배경과 하얀 글씨이다. 여기서 @media 쿼리문을 이용하여 스크린의 width값이 700px 보다 큰 작은 경우에는 배경을 빨간색과 검은 글씨로 바뀌도록 하였다. 여기서 max-width:700px 가 의미하는 것은 screen_width700px를 의미하므로 스크린의 크기가 최소 700px까지 아래의 속성을 적용한다. 위의 사진이 스크린의 크기를 조정하여 출력된 결과이다.

HTML+CSS 2019. 1. 5. 00:36
이전 1 다음
이전 다음
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

Blog is powered by Tistory / Designed by Tistory
  • 분류 전체보기 (138)
    • 알고리즘&자료구조 (11)
    • HTML+CSS (3)
    • React (3)
    • Python (16)
    • Java (2)
    • DataBase (1)
    • 클라우드 (3)
    • Ubuntu(Linux) (23)
    • 영상처리 (12)
    • ML | DL (29)
    • MLOps (3)
    • 개발 기타 (28)
    • 개인 기타 (4)

  • 방명록

티스토리툴바