WEB2 - CSS 9 — Taking an extra step

728x90

CSS(Cascading Style Sheets)

박스 모델 써먹기

다시 2.html로 돌아와서 아래와 같은 디자인 계획안처럼 해보려 한다.

이전 과정까지는 없는 가로와 세로줄을 제목과 목차, 내용을 정리하려한다.

어떻게 해야 할까?

① 가로줄 만들기

먼저는 가로줄을 만들기 위해서는 테두리를 사용해야 한다. 그렇다면 누구에게 테두리를 주어야 하는가?

h1 태그에 테두리를 주어야 한다.

    h1 {
      font-size:50px;
      text-align:center;
      border-bottom:1px solid gray;
      }

테두리의 아래쪽만 선을 줄 것이기 때문에 border-bottom: 1px solid gray;

테두리 아래쪽에 선을 주고 보니 뭔가 위치가 애매하다. (생활코딩님 강의에서 h1의 위쪽과 아래쪽의 공간?이 다르다.)

문제를 해결하기 위해 이전 강의에서 배웠던 검사로 들어간다. 그리고 h1태그를 클릭하여 누구로 인해 위쪽과 아래쪽이 불균형 한지를 찾아보자. 문제는 margin값이었던것.

마진값을 없애자.

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

마진값을 없애고 보니 WEB网络라는 텍스트와 테두리가 너무 붙어있다.

적당히 떨어뜨리기 위해 padding값을 주자.

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

② 세로줄 만들기

세로줄을 누가 가지고 있는가? ol태그 가지고 있다.

ol태그에 오른쪽 테두리 주기

ol {
  border-right: 1px solid gray;
  }

문제는 ol태그는 화면 전체를 쓰는 block level element이기 때문에 오른쪽 끝에 위치한다.

width값으로 조정하기

ol {
  border-right: 1px solid gray;
  width:200px;
  }

width값으로 조정하고 나니 세로줄과 가로줄 사이에 여백이 발생한다. 다시 개발자도구, 검사로 들어간다.

검사로 들어가 ol태그를 클릭해보니 margin값이 있기 때문이라는 문제를 발견.

margin값을 조정하여 가로줄과 세로줄 붙이기 (여백 없애기)

ol {
  border-right: 1px solid gray;
  width:200px;
  margin:0;
  }

margin값을 조정하여 붙이니 목차들이 너무 붙어있다. 보기좋게 띄어보자.

ol태그에 padding값으로 조정하기

ol {
  border-right: 1px solid gray;
  width:200px;
  height: 150px;
  margin:0px;
  padding: 40px;
  }

이렇게 한 다음, 가로줄이 화면 전체에 쭉 그어져있지 않고 테두리 여백이 발생한다.

개발자도구, 검사로 들어가 확인해보니 body태그가 margin값이 있음으로 인한 문제임을 발견.

body값 margin값을 0으로 하여 가로줄 화면전체 꽉 채우기

body {
    margin:0px;
    }

이렇게 하고 나니 얼추 디자인계획안과 비슷하게 제목과 목차 부분을 디자인한 것 같다.

<!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>
<!--
<h1><a href="index.html" title="到百科"><font color="red">WEB网络</font></a></h1>
<h2>计算机语言-常见语言</h2>
<ol>
<li><a href="1.html" title="到HTML意义"><font color="red">HTML超文本标记语言</font></a></li>
<li><a href="2.html" title="到CSS意义"><font color="red">CSS层叠样式表</font></a></li>
<li><a href="3.html" title="到JavaScript意义"><font color="red">JavaScript</font></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>

가로줄과 세로줄을 만들었고 이제 내용을 오른쪽 위 여백으로 올려보자.

저작자표시

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

WEB2 - CSS 11 (2)	2021.09.02
WEB2 - CSS 10 (10)	2021.09.01
WEB2 - CSS 8 (4)	2021.07.06
WEB2 - CSS 6 to 7 (2)	2021.07.05
WEB2 - CSS 1 to 5 (9)	2021.07.03

CSS(Cascading Style Sheets)

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

티스토리툴바