3. 생활코딩으로 CSS 배우기 (3) - 박스모델 써먹기

직접 찍어서 화질이 저런거임 ...

 

그럴듯한 웹페이지처럼 보이기 위해 디자인 하기

 

 

---

1 . border-bottom을 이용하여 밑줄 긋기

<style>
        h1 {
            font-size: 45PX;
            text-align: center;
            border-bottom: 1px solid gray;
        }
    </style>

---

2. margin과 padding을 이용해서 간격 조정하기 (*개발자 도구 이용하여 어떤 값을 조정할지 파악)

---

<style>
      h1 {
            font-size: 45PX;
            text-align: center;
            border-bottom: 1px solid gray;
            margin: 0;
            padding: 20px;
        }
</style>

 

<h1>의 간격이 알맞게 조정되었다

 

---

3. <ol> 태그에 border-right을 이용하여 목록 분류하기

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

이렇게만 하면 오른쪽 맨 끝에 테두리가 생기는 걸 볼 수 있는데

원래의 기획대로 목록 바로 옆에 두고 싶다면 width 를 이용하여 태그 크기를 지정하면 된다.

 

---

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

짜잔~

 

---

4. 테두리와 테두리 사이의 간격 없애기

 

개발자도구를 이용하여 어떤 것 때문에 여백이 발생하는지 파악하기 **

margin 때문이다!

<ol>태그의 마진 값을 없애보자

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

 

---

5. padding 으로 테두리와 목록 사이의 여백 주기

ol {
    border-right: 1px solid gray;
    width: 100px;
    margin: 0;
    padding: 20px;
   }

---

6. 화면에서 여백없이 선을 꽉 채우기

 

상단 테두리 여백이 있는데 margin을 이용해서 화면 전체를 꽉 채우는 선을 완성해보자

---

 body {
      margin: 0;
      }

 

 

 

 

---