티스토리 뷰

카테고리 없음

WEB2 CSS -3 박스모델, 미디어 쿼리

GrapeMilk 2020. 2. 8. 15:51

1. block level elment (화면 전체 사용)

 - display를 사용하여 inline; 코드를 작성하면, 화면 전체가 아닌 차지하는 부피 만큼 사용할 수 있다.

 - display:none; 화면에서 사라짐 

  h1 {
        border-width:5px;
        border-color:red;
        border-style:solid;
        display:inline;
      }

 

2. inline element (부분 사용)

 - display를 사용하여 black; 코드를 작성하면, 화면 전체 사용가능 

 - 즉 block element와 inline element는 단지 기본값일 뿐 값이 언제든지 바뀔 수 있다. 

  a
      {
        border-width:5px;
        border-color:red;
        border-style:solid;
      }

 

3. 미디어 쿼리

 - 화면의 특성에 따라 어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 함 

 

1) @media(min-width:800px)

 - min-width가 최소800이상이면 중괄호 안의 해당 동작 실행

<<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>


      div {
        border: 10px solid green;
        font-size: 60px;
      }
      @media(min-width:800px) {

        div {
          display: none;
            }
      }
    </style>
  </head>
  <body>
    <div>
      Responsive
    </div>

  </body>
</html>

 

댓글