css - 박스모델 기초

박스모델 코드 종류

1. border-width:5px;

- 테두리의 두께

2. border-color:green;

- 테두리의 색

3. border-style:solid;

-테두리의 스타일

4. display:inline;

- display설정

- block(크게), inline(자기 크기에 맞게), none(안보이게)

5. inline element, block level element

- inline : a

- block level element : h1

6. margin:4px;

- 박스 사이의 간격

7. padding:20px;

- 박스안 사이의 간격

8. width:140px;

- 박스의 넓이

9. 중복 제거 코드

a, h1{
      border:4px red solid;
      }

코드

<!<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> My Pumkinni Blog </title>
    <style media="screen">
      /*
      inline element
      */
      a{
        border-width:5px;
        border-color:green;
        border-style:solid;
        color:red;
        text-decoration: none;
      }
      /*
      block level element
      */
      h1{
        font-size:xxx-large;
        text-align:center;
        border-width:5px;
        border-color:green;
        border-style:solid;
        display:inline;
        /* block, inline, none*/
      }

    </style>
  </head>
  <body>
    <h1><a href="https://pumkinni.tistory.com/"><font color='green'>Pumkinni </font></a></h1>
    <ul>
      <li><a href='https://pumkinni.tistory.com/category/%EB%B0%B1%EC%A4%80' target="_blank" class='saw active'> 백준 </a></li>
    </ul>
    <br>
    <h2> 그냥 와서 블로그 좀 구경혀 </h2>
    <p>
      <br>
      <!--아직 뭐 대단한거 하나 없지만 차차 한 계단씩 밟아가며 올라가길 바래<br>
      -->너무 가까이 봐서 조급해하지 말고 너무 멀리봐서 들뜨지는 말자구<br>
      작게 하나씩 이뤄 가는거야 <br>긍정적이게 살아가면 행복할거야
    </p>
    <p>
      <img src="sunrise.JPG" width="70%"><br><br>
      <strong>행복하자 우리 모두</strong>
    </p>

  </body>
</html>

결과

코드2

!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> </title>
    <style>
    h1{
      text-align: center;
      text-decoration: none;
      font-size: 50px;
      border:4px red solid;
      margin:20px;
      padding: 20px;
      width:300px;
    }
    </style>
  </head>

  <body>
    <h1>pumkinni</h1>
    <h1>two</h1>
  </body>
</html>

결과2