WEB2 - CSS 11 — Taking an extra step

728x90

CSS(Cascading Style Sheets)

그리드 써먹기

다시 2.html로 돌아가서 그리드를 써먹어보자.

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - CSS</title>
    <meta charset="utf-8">
  <style>
    body {
      margin: 0px;
    }
    a {
      color: black;
      text-decoration: none;
    }
    #active {
      color: green;
    }
    .saw {
      color: gray;
    }
    h1 {
      font-size:50px;
      text-align:center;
      border-bottom:1px solid gray;
      margin:0;
      padding:20px;
    }
    ol {
      border-right: 1px solid gray;
      width:200px;
      height: 150px;
      margin:0px;
      padding: 40px;
    }
    h3 {
      margin:0px;
      height:50px;
    }
  </style>
  </head>
  <body>
  <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <ol>
      <h3>计算机语言-常见语言</h3>
      <li><a href="1.html" title="到HTML意义" class="saw">HTML超文本标记语言</a></li>
      <li><a href="2.html" title="到CSS意义" class="saw" id="active">CSS层叠样式表</a></li>
      <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
    </ol>
    <h3>-CSS层叠样式表</h3>
      <p style="margin-top:40px;">
        <strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
      </p>
      <p>
        <a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
      </p>
    <img src="coding.jpg" width="50%">
  </body>
</html>

여기서 내가 나란히 놓고 싶은 대상은 <ol>태그와 <h3>,<p> 태그이다.

먼저 독립적인 이 둘 태그를 묶어보자. (<h3>와<p>태그)

~~이때 전 시간에 배운 <h1>,<li>와 같은 의미가 있는 태그가 아닌 무색무취의 태그 <div>를 통해서 묶어보자.~~

    <div>
      <h3>-CSS层叠样式表</h3>
        <p style="margin-top:40px;">
          <strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
        </p>
        <p>
          <a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
        </p>
    </div>

이제 <ol>태그와 <div>태그 두개가 남게 되는데 이 두개를 하나로 묶어서 그리드에 포함되는 하나의 요소로 사용하려면 역시나 이 둘을 감싸는 공통의 부모태그가 필요하다.

<ol>태그와 위의<div>태그를 또 다시 <div>태그로 묶기

    <div>
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义" class="saw">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义" class="saw" id="active">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div>
        <h3>-CSS层叠样式表</h3>
          <p style="margin-top:40px;">
            <strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
          </p>
      </div>
    </div>

다음으로 바깥쪽의 <div>태그를 그리드로 지정하기 위해 id값을 준다.
id값은 gird로 준다.
- 그 다음으로 id가 grid인 태그에 대해서 display지정
- 그 다음으로 grid-template-columns: 150px 1fr (column = 열, row = 행)
  - 여기서 첫 번째 column은 <ol>태그이고 두 번째 column은 안쪽<div>태그

    #grid {
      display:grid;
      grid-template-columns: 150px 1fr;
    }
  </style>
  </head>
  <body>
  <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义" class="saw">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义" class="saw" id="active">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div>
        <h3>-CSS层叠样式表</h3>
          <p style="margin-top:40px;">
            <strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
          </p>
      </div>
    </div>

리로드 후 개발자 도구, 검사를 통해 여백을 디테일하게 다듬어본다.
- <ol>태그는 수정 불필요, 안쪽<div>태그는 수정이 필요해서 id값을 文章으로 준 뒤 수정
  ~~(id값을 중국어로 줘도 들어가진다. 여기 블로그에서는 그냥 텍스트로 나온다.)~~
- 안쪽 <div>태그는 padding-top과 left값을 준다.

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - CSS</title>
    <meta charset="utf-8">
  <style>
    body {
      margin: 0px;
    }
    a {
      color: black;
      text-decoration: none;
    }
    #active {
      color: green;
    }
    .saw {
      color: gray;
    }
    h1 {
      font-size:50px;
      text-align:center;
      border-bottom:1px solid gray;
      margin:0;
      padding:20px;
    }
    ol {
      border-right: 1px solid gray;
      width:200px;
      height: 150px;
      margin:0px;
      padding: 40px;
      padding-bottom: 350px;
    }
    h3 {
      margin:0px;
      height:50px;
    }
    #grid {
      display:grid;
      grid-template-columns: 200px 1fr;
    }
    #文章 {
      padding-top: 40px;
      padding-left: 150px;
    }
  </style>
  </head>
  <body>
  <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义" class="saw">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义" class="saw" id="active">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-CSS层叠样式表</h3>
          <p style="margin-top:40px;">
            <strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
          </p>
          <p>
            <img src="coding.jpg" width="50%">
          </p>
      </div>
    </div>
  </body>
</html>

```
    #grid ol {
      border-right: 1px solid gray;
      width:200px;
      height: 150px;
      margin:0px;
      padding: 40px;
      padding-bottom: 350px;
    }
```
추가적으로 여기서는 <ol>태그가 쓰였지만 본문, 내용에서도 쓰일 수 있기 때문에 혼동이 올 수 있다.
그러므로 grid라는 id값의 태그 밑에 있는 <ol>태그라고 한다면 훨씬 더 의미가 분명해진다.
```
    #grid #文章 {
      padding-top: 40px;
      padding-left: 150px;
    }
```
그리그 밑에 文章부분도 이미 id값을 썼기 때문에 사실은 묶을 필요가 없겠지만 의미를 분명하게 하기 위해서 바깥쪽 <div>의 id값인 grid로 묶는 방법도 나쁜 방법은 아니다.

생활코딩님의 강의를 위해 정리 차원에서 불필요한 태그를 삭제

회색으로 표시하는 .saw, class="saw"
현재 페이지를 나타내는 #active

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - CSS</title>
    <meta charset="utf-8">
  <style>
    body {
      margin: 0px;
    }
    a {
      color: black;
      text-decoration: none;
    }
    h1 {
      font-size:50px;
      text-align:center;
      border-bottom:1px solid gray;
      margin:0;
      padding:20px;
    }
    #grid ol {
      border-right: 1px solid gray;
      width:200px;
      height: 150px;
      margin:0px;
      padding: 40px;
      padding-bottom: 350px;
    }
    h3 {
      margin:0px;
      height:50px;
    }
    #grid {
      display:grid;
      grid-template-columns: 200px 1fr;
    }
    #grid #文章 {
      padding-top: 40px;
      padding-left: 150px;
    }
  </style>
  </head>
  <body>
  <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-CSS层叠样式表</h3>
          <p style="margin-top:40px;">
            <strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
          </p>
          <p>
            <img src="coding.jpg" width="40%">
          </p>
      </div>
    </div>
  </body>
</html>

TIP. 개발자 도구, 검사를 활용하여 CSS를 수정할 때 박스 안에서 해당 값을 더블클릭하여 픽셀 값을 조정해볼 수 있다.

그러나 웹페이지 자체가 수정되는 것은 아니다. (미리보기와 같은 느낌)

저작자표시

'youtube.com|user|egoing2 > WEB2 - CSS' 카테고리의 다른 글

WEB2 - CSS 13 (9)	2021.09.07
WEB2 - CSS 12 (3)	2021.09.06
WEB2 - CSS 10 (10)	2021.09.01
WEB2 - CSS 9 (5)	2021.08.30
WEB2 - CSS 8 (4)	2021.07.06

CSS(Cascading Style Sheets)

'youtube.com|user|egoing2 > WEB2 - CSS' 카테고리의 다른 글

티스토리툴바