[WEB-002][입문] CSS 박스 모델·선택자·레이아웃 익히기
페이지 정보
본문
[이번 수업]
CSS의 박스 모델, 선택자, Flexbox를 카드 화면으로 배웁니다.
[선수지식]
WEB-001의 HTML 문서와 태그를 알면 됩니다. 별도 서버 없이 웹 브라우저와 텍스트 편집기만 준비하세요.
[학습목표]
1. content·padding·border·margin의 위치를 설명한다.
2. 태그·클래스·자손·가상 클래스 선택자를 구분한다.
3. Flexbox로 카드가 나란히 놓이고 공간이 부족하면 줄바꿈되게 한다.
[핵심개념]
브라우저는 대부분의 HTML 요소를 사각형 상자로 그립니다. 안쪽 content는 글이나 이미지 영역, padding은 내용과 테두리 사이 여백, border는 테두리, margin은 다른 요소와의 바깥 여백입니다. 기본 content-box에서 width는 content만 가리켜 padding과 border를 더하면 상자가 커집니다. box-sizing: border-box를 쓰면 지정한 width에 content·padding·border가 포함되지만 margin은 여전히 밖입니다.
선택자는 CSS를 적용할 요소를 고르는 표현입니다. body는 태그 선택자, .card는 class 선택자, .card h2는 card 안의 h2를 고르는 자손 선택자입니다. .card:hover처럼 상태를 고르는 것은 가상 클래스입니다. id는 문서에서 고유하고 우선순위도 높으므로 반복 디자인에는 class가 관리하기 쉽습니다.
일반 흐름의 블록 요소는 위에서 아래로 놓입니다. 부모에 display: flex를 지정하면 자식이 주축을 따라 정렬됩니다. 기본 주축은 가로이며 gap은 항목 사이 간격입니다. flex-wrap: wrap은 공간이 부족할 때 다음 줄로 보냅니다. flex: 1 1 220px는 220px를 기준으로 카드가 늘거나 줄 수 있다는 뜻입니다.
[따라하기]
index.html을 만들고 저장하세요.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 카드 연습</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; background: #f4f7fb; }
.course-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
max-width: 720px;
margin: 40px auto;
padding: 16px;
}
.card {
flex: 1 1 220px;
padding: 20px;
border: 2px solid #2563eb;
border-radius: 12px;
background: white;
}
.card h2 { margin-top: 0; color: #1e40af; }
.card:hover { background: #eff6ff; }
</style>
<main class="course-list">
<article class="card"><h2>HTML</h2><p>문서의 구조</p></article>
<article class="card"><h2>CSS</h2><p>화면의 모양</p></article>
</main>
</html>
파일을 두 번 클릭하거나 Windows는 start index.html, macOS는 open index.html, Linux는 xdg-open index.html로 엽니다. 넓은 창에서는 카드가 나란히 보이고 좁히면 줄바꿈됩니다. 카드 위에 마우스를 올리면 배경색이 바뀝니다. 개발자 도구의 Elements 또는 Inspector에서 .card를 선택하면 content부터 margin까지의 크기를 확인할 수 있습니다.
[흔한 실수]
첫째, width에 padding과 border가 항상 포함된다고 생각해 화면이 넘칩니다. 둘째, .card h2의 공백을 빼서 아무 요소도 선택하지 못합니다. 셋째, 자식이 아닌 부모에 display: flex를 줘야 함을 놓칩니다. 넷째, 고정 너비만 사용해 작은 화면에 가로 스크롤을 만듭니다.
[보안 주의]
브라우저에 전달된 CSS와 HTML은 누구나 볼 수 있으므로 비밀번호나 API 키를 넣지 마세요. CSS는 사용자 입력의 악성 HTML을 제거하지 못하므로 서버와 출력 단계에서 안전하게 처리해야 합니다. 출처 모를 외부 스타일시트는 내용과 추적 요청을 검토하기 전 연결하지 않습니다.
[직접 해볼 과제]
세 번째 JavaScript 카드를 추가하고 gap을 8px과 32px로 바꿔 보세요. 개발자 도구에서 box-sizing을 잠시 끈 뒤 카드의 실제 너비가 어떻게 달라지는지 기록하세요.
[확인문제]
1. border-box에서 width에 포함되는 영역과 포함되지 않는 영역은 무엇인가요?
2. .card와 .card h2 선택자는 각각 무엇을 고르나요?
3. 공간이 부족할 때 카드를 다음 줄로 보내는 Flexbox 속성은 무엇인가요?
[다음 학습]
순환 커리큘럼의 다음 글은 BACK-002 HTTP 메서드·상태코드·헤더입니다. 웹 트랙에서는 WEB-003 반응형 화면과 모바일 우선 설계로 이어집니다.
[공식 참고 자료]
W3C CSS Box Model Module Level 4
https://www.w3.org/TR/css-box-4/
W3C Selectors Level 4
https://www.w3.org/TR/selectors-4/
W3C CSS Flexible Box Layout Module Level 1
https://www.w3.org/TR/css-flexbox-1/
MDN box-sizing
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
CSS의 박스 모델, 선택자, Flexbox를 카드 화면으로 배웁니다.
[선수지식]
WEB-001의 HTML 문서와 태그를 알면 됩니다. 별도 서버 없이 웹 브라우저와 텍스트 편집기만 준비하세요.
[학습목표]
1. content·padding·border·margin의 위치를 설명한다.
2. 태그·클래스·자손·가상 클래스 선택자를 구분한다.
3. Flexbox로 카드가 나란히 놓이고 공간이 부족하면 줄바꿈되게 한다.
[핵심개념]
브라우저는 대부분의 HTML 요소를 사각형 상자로 그립니다. 안쪽 content는 글이나 이미지 영역, padding은 내용과 테두리 사이 여백, border는 테두리, margin은 다른 요소와의 바깥 여백입니다. 기본 content-box에서 width는 content만 가리켜 padding과 border를 더하면 상자가 커집니다. box-sizing: border-box를 쓰면 지정한 width에 content·padding·border가 포함되지만 margin은 여전히 밖입니다.
선택자는 CSS를 적용할 요소를 고르는 표현입니다. body는 태그 선택자, .card는 class 선택자, .card h2는 card 안의 h2를 고르는 자손 선택자입니다. .card:hover처럼 상태를 고르는 것은 가상 클래스입니다. id는 문서에서 고유하고 우선순위도 높으므로 반복 디자인에는 class가 관리하기 쉽습니다.
일반 흐름의 블록 요소는 위에서 아래로 놓입니다. 부모에 display: flex를 지정하면 자식이 주축을 따라 정렬됩니다. 기본 주축은 가로이며 gap은 항목 사이 간격입니다. flex-wrap: wrap은 공간이 부족할 때 다음 줄로 보냅니다. flex: 1 1 220px는 220px를 기준으로 카드가 늘거나 줄 수 있다는 뜻입니다.
[따라하기]
index.html을 만들고 저장하세요.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 카드 연습</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; background: #f4f7fb; }
.course-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
max-width: 720px;
margin: 40px auto;
padding: 16px;
}
.card {
flex: 1 1 220px;
padding: 20px;
border: 2px solid #2563eb;
border-radius: 12px;
background: white;
}
.card h2 { margin-top: 0; color: #1e40af; }
.card:hover { background: #eff6ff; }
</style>
<main class="course-list">
<article class="card"><h2>HTML</h2><p>문서의 구조</p></article>
<article class="card"><h2>CSS</h2><p>화면의 모양</p></article>
</main>
</html>
파일을 두 번 클릭하거나 Windows는 start index.html, macOS는 open index.html, Linux는 xdg-open index.html로 엽니다. 넓은 창에서는 카드가 나란히 보이고 좁히면 줄바꿈됩니다. 카드 위에 마우스를 올리면 배경색이 바뀝니다. 개발자 도구의 Elements 또는 Inspector에서 .card를 선택하면 content부터 margin까지의 크기를 확인할 수 있습니다.
[흔한 실수]
첫째, width에 padding과 border가 항상 포함된다고 생각해 화면이 넘칩니다. 둘째, .card h2의 공백을 빼서 아무 요소도 선택하지 못합니다. 셋째, 자식이 아닌 부모에 display: flex를 줘야 함을 놓칩니다. 넷째, 고정 너비만 사용해 작은 화면에 가로 스크롤을 만듭니다.
[보안 주의]
브라우저에 전달된 CSS와 HTML은 누구나 볼 수 있으므로 비밀번호나 API 키를 넣지 마세요. CSS는 사용자 입력의 악성 HTML을 제거하지 못하므로 서버와 출력 단계에서 안전하게 처리해야 합니다. 출처 모를 외부 스타일시트는 내용과 추적 요청을 검토하기 전 연결하지 않습니다.
[직접 해볼 과제]
세 번째 JavaScript 카드를 추가하고 gap을 8px과 32px로 바꿔 보세요. 개발자 도구에서 box-sizing을 잠시 끈 뒤 카드의 실제 너비가 어떻게 달라지는지 기록하세요.
[확인문제]
1. border-box에서 width에 포함되는 영역과 포함되지 않는 영역은 무엇인가요?
2. .card와 .card h2 선택자는 각각 무엇을 고르나요?
3. 공간이 부족할 때 카드를 다음 줄로 보내는 Flexbox 속성은 무엇인가요?
[다음 학습]
순환 커리큘럼의 다음 글은 BACK-002 HTTP 메서드·상태코드·헤더입니다. 웹 트랙에서는 WEB-003 반응형 화면과 모바일 우선 설계로 이어집니다.
[공식 참고 자료]
W3C CSS Box Model Module Level 4
https://www.w3.org/TR/css-box-4/
W3C Selectors Level 4
https://www.w3.org/TR/selectors-4/
W3C CSS Flexible Box Layout Module Level 1
https://www.w3.org/TR/css-flexbox-1/
MDN box-sizing
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
- 이전글[BACK-002][입문] HTTP 메서드·상태코드·헤더 읽기 26.08.29
- 다음글[JSTS-002][입문] 타입·함수·스코프·클로저 이해하기 26.08.29
댓글목록
등록된 댓글이 없습니다.