반응형

웹 페이지를 만들다 보면 요소들을 정렬하거나 배치하는 게 중요해집니다.
이번 글에서는 **박스 모델(Box Model)**이 뭔지, 그리고 정렬의 핵심 Flexbox는 어떻게 사용하는지 쉽게 설명해 드릴게요.

✅ 1. Box Model이란?

모든 HTML 요소는 기본적으로 사각형 박스(Box) 형태로 구성되어 있습니다.
이 박스는 크게 4가지 영역으로 나뉘어요:

┌───────────────────────────────┐
│          margin               │
│  ┌─────────────────────────┐  │
│  │         border          │  │
│  │  ┌───────────────────┐  │  │
│  │  │     padding       │  │  │
│  │  │  ┌─────────────┐  │  │  │
│  │  │  │  content    │  │  │  │
│  │  │  └─────────────┘  │  │  │
│  │  └───────────────────┘  │  │
│  └─────────────────────────┘  │
└───────────────────────────────┘

💬 구성 설명:

  • content: 실제 내용(텍스트, 이미지 등)
  • padding: 내용과 테두리 사이의 공간
  • border: 요소의 테두리
  • margin: 요소 바깥 여백 (다른 요소와의 거리)

✅ 2. 박스 모델 예제

<style>
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
  margin: 30px;
  background-color: lightyellow;
}
</style>

<div class="box">나는 박스 모델입니다!</div>

총 가로 크기 = width + padding * 2 + border * 2
= 200 + 40 + 10 = 250px

🔍 Tip: box-sizing: border-box;을 쓰면 border, padding을 포함한 크기로 계산돼요. (실무에선 필수!)

✅ 3. Flexbox란?

Flexbox는 박스를 가로/세로로 쉽게 정렬할 수 있게 해주는 CSS 레이아웃 시스템입니다.
복잡한 float 없이도, 가로 정렬 / 가운데 정렬 / 간격 조정이 매우 쉬워져요!

✅ 4. Flexbox 기본 문법

.container {
  display: flex;
}

Flexbox는 **부모 요소에 display: flex**를 주는 게 시작입니다.

✅ 주요 속성들 (기초)

속성 설명
justify-content 주축 방향 정렬 (가로 방향)
align-items 교차축 방향 정렬 (세로 방향)
flex-direction 아이템 정렬 방향 (row, column)
gap 아이템 간 간격

✅ Flexbox 예제

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  padding: 20px;
}

.item {
  background-color: teal;
  color: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

justify-content: space-between → A와 C가 양 끝, B는 중간
align-items: center → 세로 방향 가운데 정렬

✅ 언제 Box Model, 언제 Flexbox?

상황 쓰는 기술
요소 간 여백 조정 Box Model (margin, padding)
레이아웃 정렬 Flexbox
세로 정렬이 필요할 때 Flexbox
가운데 정렬 Flexbox가 훨씬 쉬움

마무리 🎉

  • Box Model은 HTML 요소의 기본 구조
  • Flexbox는 그 박스들을 쉽게 정렬하고 배치하는 방법

둘은 함께 쓰이는 경우가 많고, 이걸 이해하면 CSS 레이아웃 절반은 먹고 들어갑니다!
다음에는 Flexbox 심화편이나 Grid 레이아웃, 또는 반응형 웹으로 이어가면 좋아요.

반응형

'WEB > CSS' 카테고리의 다른 글

[CSS 선택자 정리] HTML 요소를 선택하는 방법, 제대로 알아보자  (0) 2025.03.31
[CSS 기초] HTML에 스타일 입히기 – CSS 완전 초보 탈출  (1) 2025.03.28
반응형

✅ 기본 선택자

1. 태그 선택자

HTML 태그 이름으로 요소를 선택합니다.

p { color: blue; }

→ 모든 <p> 태그의 글자가 파란색으로 바뀝니다.

2. 클래스 선택자 (.)

클래스명을 가진 요소를 선택합니다.

.box {  background-color: lightgray; }
<div class="box">이건 박스입니다.</div>

 

✅ 그룹 선택자

쉼표(,)로 여러 요소를 한 번에 선택할 수 있어요.

h1, h2, h3 {  color: orange; }

✅ 자손/후손 선택자

1. 자손 선택자 (>)

바로 아래의 자식 요소만 선택합니다.

.container > p {  color: red; }

 

✅ 속성 선택자

특정 속성을 가진 요소를 선택할 수 있어요.

input[type="text"] {  border: 1px solid #ccc; }

 

✅ 의사 클래스 선택자 (기초편)

  • :hover → 마우스를 올렸을 때
  • :first-child → 첫 번째 자식
  • :last-child → 마지막 자식
button:hover {  background-color: yellow; }

💻 실습 예제

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      color: white;
      background-color: teal;
      padding: 10px;
    }

    #main-title {
      font-size: 30px;
      text-align: center;
    }

    .container > p {
      color: purple;
    }
  </style>
</head>
<body>
  <h1 id="main-title">CSS 선택자 예제</h1>

  <div class="container">
    <p>이 문장은 자식 요소로 선택됩니다.</p>
    <div>
      <p>이 문장은 후손이지만 자식은 아닙니다.</p>
    </div>
  </div>

  <p class="highlight">이건 강조된 문장입니다.</p>
</body>
</html>

마무리

CSS에서 어떤 스타일을 적용하느냐보다 어떤 요소를 정확하게 선택하느냐가 훨씬 더 중요합니다!
선택자를 잘 쓰면, 복잡한 HTML 구조에서도 원하는 부분만 쏙쏙 골라서 꾸밀 수 있어요.
다음 글에서는 박스 모델(Box Model) 또는 Flexbox로 이어가도 좋아요 😊

반응형

'WEB > CSS' 카테고리의 다른 글

[CSS 레이아웃 기초] Box Model과 Flexbox 한 번에 이해하기  (1) 2025.04.01
[CSS 기초] HTML에 스타일 입히기 – CSS 완전 초보 탈출  (1) 2025.03.28
반응형

웹 개발을 처음 시작한다면, 가장 먼저 배우는 게 바로 HTML입니다.
이 글에서는 HTML이 뭔지, 기본 구조는 어떤지, 자주 쓰는 태그는 어떤 게 있는지 기초부터 차근차근 알려드릴게요. 😊

✅ HTML이란?

HTML (HyperText Markup Language) 는 웹 페이지의 뼈대(구조) 를 만드는 마크업 언어입니다.
HTML은 웹에 보여줄 텍스트, 이미지, 버튼, 링크, 입력창 등 모든 요소를 정의합니다.

✅ HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>내 첫 번째 웹페이지</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>처음 만들어보는 웹 페이지입니다.</p>
  </body>
</html>

💡 설명:

  • <!DOCTYPE html>: HTML5 문서임을 선언
  • <html>: HTML 문서의 시작
  • <head>: 웹페이지 정보 (제목, 문자 인코딩 등)
  • <body>: 실제로 화면에 보이는 콘텐츠

✅ 자주 쓰는 HTML 태그 모음

태그 설명 예시
<h1> ~ <h6> 제목 (숫자가 클수록 작아짐) <h1>제목</h1>
<p> 문단 (paragraph) <p>문단입니다.</p>
<a> 링크 연결 네이버
<img> 이미지 삽입 <img src="image.jpg" alt="이미지 설명">
<ul> / <ol> / <li> 목록 (순서 없는/있는) <ul><li>항목</li></ul>
<br> 줄바꿈 <p>첫 줄<br>두 번째 줄</p>
<input> 입력창 <input type="text">
<button> 버튼 <button>클릭</button>

✅ 실습 예제

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 연습</title>
  </head>
  <body>
    <h1>나의 첫 웹 페이지</h1>
    <p>HTML은 웹의 뼈대를 만듭니다.</p>
    
    <a href="https://google.com">구글로 이동</a><br><br>

    <img src="이미지링크" alt="샘플 이미지"><br><br>

    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

🔍 참고 팁

  • HTML은 시작 태그와 종료 태그가 쌍으로 이루어져 있어요.
    • 예: <p>내용</p>
  • 이미지나 입력 태그처럼 닫는 태그 없이 단독으로 쓰는 경우도 있어요.
    • 예: <img>, <input>, <br>

마무리

처음엔 단순해 보여도, HTML은 웹 개발의 모든 출발점입니다.
CSS, JavaScript도 결국은 HTML 위에서 동작하니까요!
이제 HTML에 익숙해졌다면, 다음은 CSS로 스타일을 입히는 것을 배워보세요! 😄

반응형

+ Recent posts

티스토리툴바