최원종의 개발 블로그

HTML_CSS 1강 (모든 요소는 박스) 본문

HTML_CSS/HTML_CSS

HTML_CSS 1강 (모든 요소는 박스)

chl6698 2026. 4. 20. 17:07 
웹 페이지의 모든 HTML 요소는 사각형 박스이다

텍스트, 이미지, 버튼, 심지어 줄바꿈 태그까지 모두 박스 모양을 가지고 있다

 

실습 코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>모든 요소는 박스다 - 1</title>
    <style>
      * {
        border: 2px solid red;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>나의 첫 박스 모델</h1>
      <p>이 글자도 박스 안에 살고 있어요.</p>
      <button>클릭 버튼</button>
    </div>
  </body>
</html>

 

핵심 개념: 웹 페이지를 디자인할 때, 화면을 "예쁜 그림"으로 보지 말고 "박스의 조합"으로 봐야 한다

 

큰 박스 → 작은 박스 분해 (Top-Down)

웹 페이지를 만들 때는 큰 구조부터 작은 구조로 분해합니다.
이를 Top-Down 방식이라고함

 

 

 

Top-Down방식 이유

작은 것부터 만들면 나중에 배치할 때 문제가 생깁니다.
큰 틀을 먼저 잡으면, 작은 요소들은 자연스럽게 자리를 찾습니다.
마치 서랍장을 먼저 사고, 그 안에 물건을 정리하는 것과 같습니다.

사이트 박스 확인 예시

document.querySelectorAll('*').forEach(el => el.style.outline = '1px solid red');

 

'HTML_CSS > HTML_CSS' 카테고리의 다른 글

HTML_CSS 6강 (Flexbox & 배경)  (0) 2026.04.22
HTML_CSS 5강 (핵심 개념 - CSS 5단계 설계 순서)  (0) 2026.04.21
HTML_CSS 4강(CSS 선택자 & 박스모델)  (1) 2026.04.21
HTML_CSS 3강(display, 단위, 색상)  (0) 2026.04.20
HTML_CSS 2강 (인스타그램 프로필 만들기)  (0) 2026.04.20
'HTML_CSS/HTML_CSS' Related Articles more