[WEB2] CSS 박스 모델 2

Rae-eun Yang·2022년 3월 6일

생활코딩 WEBn

목록 보기

17/21

본격적으로 박스 모델을 활용해서 웹페이지를 꾸며보겠습니다.

우선 처음의 html 파일입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    a {
      color:black;
      text-decoration: none;
    }
    h1 {
      font-size:45px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" class="saw" id="active">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <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>
</body>
</html>

여기서 제목과 목록 그리고 본문을 선으로 나누어주고 싶다면 어떻게 할까요?
style 태그의 content, padding, border, margin 속성을 수정해보겠습니다.

  <style>
    body {
      margin : 0px;
    }
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    a {
      color:black;
      text-decoration: none;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom : 1px solid gray;
      margin : 0px;
      padding : 20px;
    }
    ol {
      border-right:1px solid gray;
      width : 100px;
      margin : 0px;
      padding : 20px;
    }
  </style>