개발 공부 기록하기

DAY 12. 웹 문서 내용을 박스 형태로 정의하기 (with CSS) (1) - 블록 레벨 요소, 인라인 레벨 요소, 박스 모델 본문

프밍/CSS

DAY 12. 웹 문서 내용을 박스 형태로 정의하기 (with CSS) (1) - 블록 레벨 요소, 인라인 레벨 요소, 박스 모델

태영(泰伶) 2022. 11. 7. 23:39

1. 블록 레벨block-level 요소  &  인라인 레벨inline-level 요소

     !   잠깐 복습 TIME : 태그tag vs. 요소element

  • 태그(tag)

           <와 >로 묶인 명령어.

                 ex, <p>, </p>, <h1>, </h1>, <img>, <input>, <form> 등.

 

  • 요소(element)

          태그를 이용해서 만들어낸 웹 페이지 구성 요소. 열린 태그부터 닫힌 태그까지 덩어리를 말한다.

                ex 1, <p>안녕하세요.</p>

                ex 2, <h1>임영웅님이 방송에서 부른 다시 사랑한다면 노래 진짜 좋더라</h1>

                ex 3, <a href="https://www.youtube.com/watch?v=rjlOvKoVubQ">임영웅님이 부른 다시 사랑한다면</a>

 

    복습 내용 출처: https://bskyvision.com/836

 

 

 

블록 레벨 요소block-level element

     tag를 사용해 요소를 삽입했을 때 자기 혼자 한 줄을 차지하는 것. = 요소의 너비가 100%

     블록 레벨 요소의 양 옆에는 다른 요소가 올 수 없다!!

          ex, <hn>, <div>, <p> 등.

 

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>블록 레벨</title>
         <style>
            body * {
              border: 1px solid blue;
            }
            .accent {
              color: red;
              font-weight: bold;
            }
         </style>
      </head>
      <body>
         <h1>시간이란...</h1>
         <div>내일 죽을 것처럼 <p class="accent">오늘</p>을 살고</div>
         <p>영원히 살 것처럼 <br />내일을 꿈꾸어라.</p>
      </body>
   </html>

↓

 

 

 

 

 

인라인 레벨 요소inline-level element

     요소에 들어있는 콘텐츠만큼만 영역을 차지하고, 양 옆으로 다른 요소가 올 수 있다!!

          ex, <span>, <img>, <strong> 등.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>인라인 레벨</title>
         <style>
            body * {
              border: 1px solid blue;
            }
            .accent {
              color: red;
              font-weight: bold;
            }
         </style>
      </head>
      <body>
         <h1>시간이란...</h1>
         <div>내일 죽을 것처럼 <span class="accent">오늘</span>을 살고</div>
         <p>영원히 살 것처럼 <br />내일을 꿈꾸어라.</p>
      </body>
   </html>

↓

위의 블록 레벨 예제와 다른 점은 <p></p>가 <span></span>으로 바뀌었다는 것 뿐이다.

 

 

 

 

 

2. 박스 모델box model 

위에서 학습한 블록 레벨 요소는 모두 '박스 형태'이다.

이런 요소들을 '박스 모델box model 요소'라고 부른다.

 

박스 모델은 다음과 같이 구성되어 있다.

와... 나도 참... 이거 코드로 그려보겠다고 아주 노가다를....ㅋㅋㅋㅋㅋ

 

아, 코드는 아래 참조^^;;

어쩌면 굉장히 단순하게 만든 것일 수도 있는데,

그래도 배운 거 써먹어보려고 노력한 걸 가상히 여겨주세요...ㅠㅠㅠㅠ

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>노가다?</title>
         <style>
            table {
              border: 1px solid black;
              border-collapse: collapse;
              padding: 20px;
              margin: 10px;
            }
            td {
              border: 1px hidden black;
              border-collapse: collapse;
              padding: 20px;
              margin: 10px;
              font-size: 10px;
              text-align: center;
              font-weight: 600;
            }
            .class1 {
              background-color: rgba(111, 168, 220, 30%);
            }
            .class2 {
              background-color: rgba(189, 221, 34, 30%);
            }
            .class3 {
              background-color: rgba(255, 225, 52, 30%);
            }
            .class4 {
              background-color: rgba(237, 207, 253, 30%);
            }
         </style>
      </head>
      <body>
          <table>
             <tr>
                <td colspan="7" class="class4">마진(margin)</td>
             </tr>
             <tr>
                <td class="class4">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td colspan="5" class="class3">테두리(border)</td>
                <td class="class4">&nbsp;&nbsp;&nbsp;&nbsp;</td>
             </tr>
             <tr>
                <td class="class4">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td class="class3">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td class="class2" colspan="3">패딩(padding)</td>
                <td class="class3">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td class="class4">&nbsp;&nbsp;&nbsp;&nbsp;</td>
             </tr>
             <tr>
                <td class="class4">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td class="class3">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td class="class2">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td class="class1" colspan="1">콘텐츠 영역</td>
                <td class="class2">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td class="class3">&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td class="class4">&nbsp;&nbsp;&nbsp;&nbsp;</td>
             </tr>
             <tr>
                <td class="class4">&nbsp;&nbsp;</td>
                <td class="class3">&nbsp;&nbsp;</td>
                <td class="class2" colspan="3">&nbsp;&nbsp;</td>
                <td class="class3">&nbsp;&nbsp;</td>
                <td class="class4">&nbsp;&nbsp;</td>
             </tr>
             <tr>
                <td class="class4">&nbsp;&nbsp;</td>
                <td colspan="5" class="class3">&nbsp;&nbsp;</td>
                <td class="class4">&nbsp;&nbsp;</td>
             </tr>
             <tr>
                <td colspan="7" class="class4">&nbsp;&nbsp;</td>
             </tr>
          </table>
      </body>
   </html>

 

 

아무튼!

1번에서 했던 블록 레벨 요소 예제를 웹 페이지로 켜서

제목 부분에 오른쪽 마우스를 누르면 "검사"를 볼 수 있다.

 

 

 

그러면 웹 페이지를 구성하고 있는 소스 코드를 볼 수 있는 화면(개발자 도구)이 나타난다.

 

본문 부분에서 제목을 클릭하면 Element 부분의 <h1></h1> 요소에 회색 띠가 칠해진다. 아래쪽 Computed 부분에서는 내가 노가다로 그렸던 박스 모델 그림을 볼 수 있다..ㅎㅎㅎ

 

 

개발자 도구 화면 아래쪽의 박스 모델 그림 중 '콘텐츠 영역'에 마우스를 가까이 가져다 댔더니, 해당 요소의 '콘텐츠 영역' 범위가 어디인지 본문에서 색깔로 보여주고 있다.

 

마찬가지로, margin 부분에 마우스 가져다 댔을 때.

 

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 14. 박스 모델 테두리 지정하기(1): border-style, border-width, border-color, border  (0) 2022.11.09
DAY 13. 웹 문서 내용을 박스 형태로 정의하기 (with CSS) (2) - width, height, box-sizing, box-shadow  (0) 2022.11.08
DAY 11. 표 관련 스타일(2): border-spacing, border-collapse  (0) 2022.11.06
DAY 11. 표 관련 스타일(1): caption-side, border  (0) 2022.11.05
DAY 11. 목록 관련 스타일(3): list-style  (0) 2022.11.05
'프밍/CSS' Related Articles more
Comments