본문 바로가기
LEARN/HTML | CSS

[CSS] 10~13 그리드 , 미디어 쿼리

by 아이엠제니 2022. 1. 27.

 

 

 

생활코딩 [WEB2 - CSS] STUDY 기록

10. 그리드 소개

 

디자인적인 용도로만 사용하는 태그

div, span

div는 block level element

span은 inline element

 

 

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #grid {
      border: 5px solid pink;
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    div {
      border: 5px solid gray;
    }
  </style>
</head>

<body>
  <!-- div 디자인적인 용도로만 사용하는 무색무취의 태그
        block level element 이기 때문에 화면 전체를 쓴다
        span 태그는 inline element  -->
  <div id="grid">
    <div>NAVIGATION</div>
    <div>ARTICLE</div>
  </div>
</body>

</html>

 

 

 

11. 그리드 써먹기

<!doctype html>
<html>

<head>
  <title>별 헤는 밤</title>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
    }

    a {
      color: black;
      text-decoration: none;
    }

    .saw {
      color: gray;
    }

    #active {
      color: red;
    }

    h1 {
      font-size: 45px;
      text-align: center;
      border-bottom: 1px solid gray;
      margin: 0;
      padding: 20px;
    }

    ol {
      border-right: 1px solid gray;
      width: 100px;
      margin: 0;
      padding: 20px;
    }
    #grid {
      display: grid;
      grid-template-columns: 150px 1fr;
    }
  </style>
</head>

<body>
  <h1><a href="index.html">윤동주 시인 시</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html" class="saw">서시</a></li>
      <li><a href="2.html" class="saw" id="active">별 헤는 밤</a></li>
      <li><a href="3.html">쉽게 쓰여진 시</a></li>
    </ol>
    <div>
      <h2>별 헤는 밤</h2>
      <h4><a href="https://m.search.naver.com/search.naver?ie=UTF-8&query=%EC%9C%A4%EB%8F%99%EC%A3%BC&sm=chr_hty" target="_blank" title="윤동주 시인 검색 결과">윤동주</a></h4>

      <img src="star.jpg" width="100%">
      <p style="margin-top: 40px;">계절이 지나가는 하늘에는가을로 가득 차 있습니다.나는 아무 걱정도 없이가을 속의 별들을 다 헬 듯합니다.가슴 속에 하나 둘 새겨지는 별을이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요내일 밤이 남은 까닭이요아직 나의 청춘이 다 하지 않은 까닭입니다.별 하나에 추억과별 하나에 사랑과별 하나에 쓸쓸함과별 하나에 동경과별 하나에 시와별 하나에 어머니, 어머니,어머님, 나는 별 하나에 아름다운 말 한마디씩 불러 봅니다. 소학교 때 책상을 같이 했던 아이들의 이름과 패, 경, 옥, 이런 이국 소녀들의 이름과, 벌써 아기 어머니된 계집애들의 이름과, 가난한 이웃 사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, '프랑시스 잠', '라이너 마리아 릴케' 이런 시인의 이름을 불러 봅니다.이네들은 너무나 멀리 있습니다.별이 아스라이 멀 듯이.어머님,그리고 당신은 멀리 북간도에 계십니다.나는 무엇인지 그리워이 많은 별빛이 내린 언덕 위에 내 이름자를 써 보고흙으로 덮어 버리었습니다.딴은 밤을 새워 우는 벌레는부끄러운 이름을 슬퍼하는 까닭입니다.그러나 겨울이 지나고 나의 별에도 봄이 오면무덤 위에 파란 잔디가 피어나듯이내 이름자 묻힌 언덕 우에도자랑처럼 풀이 무성할거외다.</p>
    </div>
  </div>
</body>

</html>

 

 

 

<!doctype html>
<html>

<head>
  <title>별 헤는 밤</title>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
    }

    a {
      color: black;
      text-decoration: none;
    }
    h1 {
      font-size: 45px;
      text-align: center;
      border-bottom: 1px solid gray;
      margin: 0;
      padding: 20px;
    }

    ol {
      border-right: 1px solid gray;
      width: 100px;
      margin: 0;
      padding: 20px;
    }
    #grid {
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    #grid ol {
      padding-left: 33px;
    }
    #grid #article {
      padding-left: 25px;
    }
  </style>
</head>

<body>
  <h1><a href="index.html">윤동주 시인 시</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html" >서시</a></li>
      <li><a href="2.html">별 헤는 밤</a></li>
      <li><a href="3.html">쉽게 쓰여진 시</a></li>
    </ol>
    <div id="article">
      <h2>별 헤는 밤</h2>
      <h4><a href="https://m.search.naver.com/search.naver?ie=UTF-8&query=%EC%9C%A4%EB%8F%99%EC%A3%BC&sm=chr_hty" target="_blank" title="윤동주 시인 검색 결과">윤동주</a></h4>

      <!-- <img src="star.jpg" width="100%"> -->
      <p style="margin-top: 40px;">계절이 지나가는 하늘에는가을로 가득 차 있습니다.나는 아무 걱정도 없이가을 속의 별들을 다 헬 듯합니다.가슴 속에 하나 둘 새겨지는 별을이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요내일 밤이 남은 까닭이요아직 나의 청춘이 다 하지 않은 까닭입니다.별 하나에 추억과별 하나에 사랑과별 하나에 쓸쓸함과별 하나에 동경과별 하나에 시와별 하나에 어머니, 어머니,어머님, 나는 별 하나에 아름다운 말 한마디씩 불러 봅니다. 소학교 때 책상을 같이 했던 아이들의 이름과 패, 경, 옥, 이런 이국 소녀들의 이름과, 벌써 아기 어머니된 계집애들의 이름과, 가난한 이웃 사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, '프랑시스 잠', '라이너 마리아 릴케' 이런 시인의 이름을 불러 봅니다.이네들은 너무나 멀리 있습니다.별이 아스라이 멀 듯이.어머님,그리고 당신은 멀리 북간도에 계십니다.나는 무엇인지 그리워이 많은 별빛이 내린 언덕 위에 내 이름자를 써 보고흙으로 덮어 버리었습니다.딴은 밤을 새워 우는 벌레는부끄러운 이름을 슬퍼하는 까닭입니다.그러나 겨울이 지나고 나의 별에도 봄이 오면무덤 위에 파란 잔디가 피어나듯이내 이름자 묻힌 언덕 우에도자랑처럼 풀이 무성할거외다.</p>
    </div>
  </div>
</body>

</html>

웹페이지 검사를 통해 구성 확인 후 margin, padding 값 조절하여 수정.

불필요한 코드 제거하는 작업함.

 

 

 

12. 미디어 쿼리 소개

반응형 디자인 (responsive web)

화면의 크기에 따라 웹페이지의 각 요소들이 반응하여 최적화 되어 바뀌는 것.

 

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div {
      border: 5px solid green;
      font-size: 60px;
      }

      @media(min-width: 800px) {
      div {
        display: none;
      }
      }
     </style>
  </head>
  <body>
    <div>Responsive</div>
  </body>
</html>

 800px 이상되면 박스 사라짐

 

 

 

13. 미디어 쿼리 써먹기

2.html

@media(max-width:800px) {
      #grid {
        display: block;
      }
      ol {
        border-right: none;
      }
      h1 {
        border-bottom: none;
      }
    }

800px 아래일 때는 박스가 안 보인다.

800px 이상으로 화면을 키웠을 때 박스가 보인다!

300x250

'LEARN > HTML | CSS' 카테고리의 다른 글

[부스트코스] 1 HTML 이해하기  (0) 2022.03.10
[CSS] 14~15 코드의 재사용 style.css 파일 생성 실습 끝  (0) 2022.01.28
[CSS] 8~9 박스 모델 display block , inline / margin padding  (0) 2022.01.27
[CSS] 6~7 id class 선택자  (0) 2022.01.26
[CSS] 4~5 style 속성 , a 태그  (0) 2022.01.11

관련글

티스토리툴바