[생활코딩 WEB2] day3

그리드

레이아웃을 디자인하기 위해 필요한 속성 grid!

이런 식으로👇

그리드 사용 방법

display : grid;를 먼저 적용한 후,
grid-template-columns : 150px 1fr; 로 그리드의 크기를 지정해준다.
columns말고도row도 있다. columns는 "열"의 크기, row는 "행"의 크기를 지정한다.

이 때, 150px 1fr은, 선택자 #grid 안에서 나뉘어져 있는 두 개의 div 영역을 각각 지정해준 것이다.

< div > 태그 : 아무런 의미가 없음(정보 묶어주는 용도로만), 디자인만을 위해 사용하는 태그, bolck level element
< span > 태그 : < div >태그와 같은 용도로 쓰임, inline level element

👉 둘의 용도는 같음, display속성에 따라 필요한 태그를 사용하면 됨

fr (fraction) : 숫자의 비율대로 레이아웃을 나눔.
예를 들어 위의 예시처럼 150px 1fr했을 때, 1fr은 150px을 제외한 나머지 모든 영역을 차지하게 됨.
1fr 1fr 1fr이런 식이면, 1:1:1 비율로 나누어지는것.

👇위 사진의 코드

<!DOCTYPE html>
<html>
  <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 id="grid">
      <div>NAVIGATION</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp 
        qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </body>
</html>

반응형 웹디자인

반응형 웹디자인이란, 화면의 크기에 따라서 웹페이지의 각 요소들이 반응하여 동작하게 하는 것
화면의 조건에 따라 동작하는 CSS를 만들 수 있다 ex)휴대폰 가로,세로 회전 기능

이러한 반응형 웹은 Midea Query를 사용해 만들 수 있다.

👉 @media(화면의 조건){ 동작CSS }

코드 예시를 들면,

@media(min-width : 800px){
   div{
      display:none;
      }
   }

즉, 스크린의 최소 크기가 800px일 때(= 스크린의 크기(너비)가 800px보다 클 때), div에 해당하는 display가 none으로 적용된다는 뜻이다.

👇예시 이미지 1) 스크린의 크기가 800px보다 작을 때

👇예시 이미지 2) 스크린의 크기가 800px보다 클 때 이런 식으로 화면의 조건에 따라 CSS가 적용된다.

Media Query응용하기

<!doctype html>
<html>
<head>
<title>WEB - CSS</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;
  }
  @media(max-width:800px){
    #grid{
      display: block;
    }
    ol{
      border-right:none;
    }
    h1 {
      border-bottom:none;
    }
  }
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <div id="article">
      <h2>CSS</h2>
      <p>
        Cascading Style Sheets (CSS) is a style sheet language used for describing 
        the presentation of a document written in a markup language.[1] Although 
        most often used to set the visual style of web pages and user interfaces 
        written in HTML and XHTML, the language can be applied to any XML document, 
        including plain XML, SVG and XUL, and is applicable to rendering in speech,
        or on other media. Along with HTML and JavaScript, CSS is a cornerstone 
        technology used by most websites to create visually engaging webpages, 
        user interfaces for web applications, and user interfaces for many mobile 
        applications.
      </p>
    </div>
</div>
</body>
</html>





Resources

Author And Source

이 문제에 관하여([생활코딩 WEB2] day3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dorii/생활코딩-WEB2-day3

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[생활코딩 WEB2] day3

그리드

그리드 사용 방법

반응형 웹디자인

Media Query응용하기

Author And Source

좋은 웹페이지 즐겨찾기