[CSS] 생활코딩 4일차

Woohyun Shin·2021년 8월 13일
grid그리드
0

CSS

목록 보기
4/4

Grid

오늘은 목록과 본문을 나누는 작업을 위해서 Grid(그리드)라는 것을 배워볼 것이다.

우리는 디자인이라는 목적을 위해서 어떠한 의미도 존재하지 않는 태그를 사용해야 될 때가 있다. 이때 사용하라고 존재하는 태그가 바로 division의 약자인'div'이다. (block level element)

같은 목적으로 사용하라고 고안된 태그가 하나 더 있는데, 바로 'span'이다. (inline element)

이 두 개의 태그 중에 block 이 필요하냐 inline 이 필요하냐에 따라서 < div >이나 < span >을 사용하면 된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8">
    <title></title>
    <style>
      div{
        border:5px solid gray;
      }
    </style>
  </head>
  <body>
    <div>NAVIGATION</div>
    <div>ARTICLE</div>
  </body>
</html>

두 개의 태그를 나란히 놓기 위해서 우리는 최신 방법인 Grid를 사용할 것이다. 이를 위해서는 두 개의 태그를 감싸는 부모가 태그가 필요하다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="urf-8">
    <title></title>
    <style>
      #grid{
        border:5px solid pink;
        display:grid;
        grid-template-columns:150px 1fr;
        /*화면 전체를 쓰도록 자동으로 조정되는 단위가 fr*/
      }
      div{
        border:5px solid gray;
      }
    </style>
  </head>
  <body>
    <div id="grid">
      <div>NAVIGATION</div>
      <div>ARTICLE</div>
    </div>
  </body>
</html>

caniuse.com 이라는 사이트는 여러 CSS나 HTML 또는 JAVASCRIPT의 기술들 중에서 현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가에 대한 통계를 보여주는 중요한 사이트이다.

<!doctype html>
<html>
<head>
<title>WEB1 - 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;
  }
</style>

</head>

<body>
<h1><a href="index.html">WEB</font></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)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

    마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.

    현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.
  </p>
  </div>
</div>
</body>
<html>

두 가지 태그를 특별한 의미가 없는 태그로 묶기 위해서 우리는 < div >와 < span >을 사용하고, 이 태그를 개별적으로 관리하기 위해 각 div나 span 값에 id를 부여할 수 있다.

또한 위 내용처럼 ol 중에서도 #grid 라는 태그에 속하는 ol 값만을 관리하고 싶다면 #grid ol{} 과 같이 세부적으로 속성을 부여할 수 있다.

  • 디자인을 위한 tag : "div", "span" (block vs inline)
  • 같은 block 내 columns에 크기를 지정하여 배치
    display : grid;
    grid-template-columns : 크기지정1 크기지정2 ...;
  • web browser 기술 채택 통계 사이트 : caniuse.com

반응형 디자인

이번 시간에는 현대적인 웹 애플리케이션을 만드는 데 있어서 굉장히 중요한 요소라고 할 수 있는 반응형 디자인이라고 하는 흐름을 알아보도록 한다.

화면에 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것을 '반응형 웹(Responsive Web)' 또는 '반응형 디자인'이라고 한다.

그래서 우리는 화면에 크기에 따라서 디자인을 다르게 하기 위해서 필요한 미디어 쿼리(Media Query)라는 것을 공부할 것이다.

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

      div{
        border:10px solid green;
        font-size:60px;
      }

      @media(min-width:800px) {/*screen width>800px과 같은 의미, 화면의 최소크기가 800px*/
        div{
          display:none;
        }
      }

    </style>
  </head>
  <body>
    <div>
      Responsive
    </div>
  </body>
</html>

웹 페이지의 넓이가 800px가 될 때까지는 div의 내용이 표시되지만

넓이가 800px이 되는 순간부터 div의 내용이 사라지게 된다.

즉 우리는 이 미디어 쿼리라는 것을 활용하면 화면의 크기나 가로/세로모드, 여러가지 화면의 특성들에 따라서 어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능하다.

이번에 배운 미디어 쿼리는 여러가지 형태의 화면이 존재하는 세상에서 굉장히 중요한 존재라고 할 수 있다.

<!doctype html>
<html>
<head>
<title>WEB1 - 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){

    h1{
      font-size:30px;
      border-bottom:none;
    }
    ol{
      border-right:none;
    }
    #grid{
      display:block;
    }

  }
</style>

</head>

<body>
<h1><a href="index.html">WEB</font></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)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

    마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.

    현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.
  </p>
  </div>
</div>
</body>
<html>

웹 페이지의 넓이가 800px을 넘을 경우에는 우리가 설정한 대로 화면이 표시되지만

웹 페이지의 넓이가 800px보다 작을 경우에는 미디어 쿼리를 이용한 화면이 표시된다.

CSS코드의 재사용

우리는 이때까지 2.html에 적용한 내용을 1.html과 3.html , index.html 이라는 파일에 똑같이 적용시켜야 한다.

그래서 모든 파일에 복사 붙여넣기를 하려고 하다보니까 중복이 생기고, 이러한 중복때문에 번거로움이 생기기 시작한다.

그래서 우리는 이러한 중복을 제거하기 위해 style에 넣은 내용을 style.css 라는 파일에 따로 정리해놓을 것이다.

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){

  h1{
    font-size:30px;
    border-bottom:none;
  }
  ol{
    border-right:none;
  }
  #grid{
    display:block;
  }

}

그리고, 우리는 < link >라는 태그를 통해서 이 웹페이지가 어떤 CSS 파일과 연결되어 있는지를 웹브라우저에게 알려줄 수 있다.

<!doctype html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf=8">
<link rel="stylesheet" href="style.css">
<!-- 2.html이라는 웹페이지는 style.css 파일과 연결(link)되어있고
웹브라우저는 style.css 파일을 다운받아서 이 웹페이지에 적용한다 -->
</head>

<body>
<h1><a href="index.html">WEB</font></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)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

    마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.

    현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.
  </p>
  </div>
</div>
</body>
</html>

이로써 우리는 CSS를 시작할 때 선택자라는 것을 통해 얻을 수 있는 '중복의 제거'라는 효과를 똑같이 만나게 되었다.

이렇게 style.css 파일처럼 별도의 파일로 꺼내서 중복을 제거하게 되면 우리는 웹페이지가 몇천 , 몇억 개든 한 줄만 바꿔도 모든 웹페이지에 적용시킬 수 있는 폭발적 효과를 얻을 수 있다.

그리고 우리가 새로운 웹페이지를 만들 때 이 < link rel="stylesheet" href="style.css" > 라는 한 줄만 추가하면 style.css라는 파일의 내용이 무엇인지를 몰라도 style.css가 갖는 시각적인 기능성을 사용할 수 있게 된다. (재사용성이 높아지고 사용자의 입장에선 내부적인 코딩의 원리를 몰라도 사용할 수 있게 되므로 사용성도 높아진다 +가독성, 유지보수)

profile
Woohyun Shin
조급함보다는 꾸준하게
이전 포스트

[CSS] 생활코딩 3일차

0개의 댓글