HTML5웹프로그래밍 7강 - CSS 박스 모델과 테두리
HTML의 모든 요소는 사각형 박스로 배치되며, 안정적인 웹 레이아웃은 박스의 크기·간격·표시·위치를 정확히 이해하는 데서 시작한다. 이 글에서는 박스 모델과 여백, 크기, position, Flexbox와 Grid, 넘침 처리, 테두리·외곽선·그림자까지 7강의 핵심을 정리한다.
1. CSS 박스 모델과 크기 계산
1.1 박스 모델의 네 영역
HTML의 모든 요소는 사각형 박스로 취급된다. 박스는 안쪽에서 바깥쪽으로 content → padding → border → margin의 네 영역으로 구성된다. 박스는 웹 레이아웃의 기본 단위이고, 박스 모델은 요소의 크기와 간격을 예측하여 레이아웃의 안정성을 확보하는 핵심 체계이다.
| 영역 | 의미 | 배경·상호작용 |
|---|---|---|
| content | 텍스트와 이미지가 들어가는 실제 내용 영역 | width, height로 기본 크기를 제어한다. |
| padding | 내용과 테두리 사이의 안쪽 여백 | 배경이 적용되고 클릭 영역에 포함된다. |
| border | 패딩과 마진 사이의 경계선 | 요소의 시각적 외곽을 만든다. |
| margin | 테두리 바깥의 다른 요소와의 간격 | 항상 투명하고 클릭 영역에 포함되지 않는다. |
개발자 도구를 열어 Elements 패널의 Computed 영역을 보면 네 영역의 실제 크기를 시각적으로 확인할 수 있다. 레이아웃 오류가 생기면 요소의 선언값만 보지 말고 계산된 박스 크기와 마진·패딩을 함께 확인해야 한다.
1.2 box-sizing
box-sizing은 width와 height에 어느 영역까지 포함할지를 정한다. 기본값인 content-box에서는 설정한 너비가 content만을 뜻하므로 패딩과 테두리를 추가하면 눈에 보이는 박스가 더 커진다. border-box에서는 설정한 너비 안에 content, padding, border가 모두 포함되어 전체 크기를 예측하기 쉽다.
패딩이나 테두리를 추가해도 외곽 크기가 유지되므로 의도하지 않은 줄바꿈과 레이아웃 이탈을 줄인다.
*, *::before, *::after {
box-sizing: border-box;
}너비 100px, 좌우 패딩 합 20px, 좌우 테두리 합 10px인 박스를 생각하자. content-box의 눈에 보이는 너비는 130px이고 content는 100px이다. border-box의 외곽 너비는 100px으로 유지되고 content 너비가 70px로 줄어든다. 마진은 두 방식 모두 외곽 크기 밖에 더해진다.
2. margin과 padding
2.1 margin 단축 속성
margin은 요소와 다른 요소 사이의 투명한 바깥 여백이다. 배경색이 적용되지 않고 클릭 영역에서도 제외된다. 값의 개수에 따른 방향 규칙은 다음과 같다.
| 선언 | 적용 방향 |
|---|---|
margin: 20px; | 상·우·하·좌 모두 20px |
margin: 20px 10px; | 상하 20px, 좌우 10px |
margin: 20px 10px 30px; | 상 20px, 좌우 10px, 하 30px |
margin: 10px 20px 30px 40px; | 상 → 우 → 하 → 좌의 시계방향 |
마진과 패딩의 백분율은 상하 방향까지 모두 부모 요소의 너비를 기준으로 계산한다. 따라서 margin-top: 10%은 부모 높이의 10%가 아니다. 수직 여백에 백분율을 쓰면 예상이 어려울 수 있어 주의한다.
2.2 마진 병합
일반 흐름의 블록 요소가 위아래로 맞닿으면 수직 마진이 더해지지 않고 큰 값 하나만 적용될 수 있다. 위 요소의 margin-bottom: 30px과 아래 요소의 margin-top: 20px이 만나면 실제 간격은 50px이 아니라 30px이다. 좌우 마진에는 이 현상이 발생하지 않는다.
부모의 첫 자식에 margin-top이 있고 부모와 자식 사이에 border, padding, 내용 같은 경계가 없으면 자식의 마진이 부모 바깥으로 병합될 수도 있다. 부모에 작은 padding이나 border를 주거나 새로운 레이아웃 문맥을 만들면 해결할 수 있지만, 반복 요소의 수직 간격은 Flexbox나 Grid의 gap으로 관리하는 방식이 더 명확하다.
gap을 사용하고, 세부 위치 보정에만 margin을 사용한다. 한 방향의 마진만 사용하는 규칙도 마진 병합으로 인한 혼란을 줄인다.2.3 margin을 이용한 중앙 정렬
고정 너비나 최대 너비가 있는 블록 요소를 가로 중앙에 놓으려면 좌우 마진을 auto로 지정한다. 브라우저가 남는 좌우 공간을 같은 크기로 나누기 때문이다. 너비가 없거나 인라인 요소인 경우에는 이 방법이 기대대로 동작하지 않는다.
.container {
width: 800px;
margin: 0 auto;
}2.4 padding의 특징과 활용
padding은 content와 border 사이의 안쪽 여백이다. 배경색과 배경 이미지가 패딩 영역까지 적용되고 패딩을 클릭해도 해당 요소가 선택되므로 버튼의 클릭 영역을 키우는 데 중요하다. 마진과 달리 병합되지 않는다. 값의 개수와 방향 규칙은 margin과 같다.
| 선택 기준 | padding | margin |
|---|---|---|
| 배경 | 여백에도 배경이 필요할 때 | 투명한 외부 간격이 필요할 때 |
| 클릭 | 여백도 클릭되어야 할 때 | 여백이 클릭되지 않아야 할 때 |
| 경계 | 테두리 안쪽 공간 | 테두리 바깥 공간 |
| 대표 용도 | 버튼, 카드 내부 여백 | 요소 사이 거리 |
버튼은 고정 width와 height보다 텍스트 주변에 padding을 주고 min-width를 설정하는 편이 긴 문구와 반응형 환경에 안전하다. 비율 박스는 백분율 padding이 부모 너비를 기준으로 계산된다는 성질을 활용할 수 있다. 16:9 비율이라면 padding-top: 56.25%를 사용하며, 현대 CSS에서는 aspect-ratio: 16 / 9로 더 직접적으로 표현할 수도 있다.
3. width, height와 크기 안전장치
3.1 width와 height
블록 요소의 width: auto는 기본적으로 부모의 사용 가능한 너비를 채운다. 반면 인라인 요소는 콘텐츠만큼의 너비를 차지하며 width와 height가 적용되지 않는다. width: 100%는 부모 콘텐츠 너비와 같은 값을 강제로 지정하므로 content-box에서 패딩과 테두리를 더하면 부모 밖으로 넘칠 수 있다.
height: auto는 자식 콘텐츠의 높이에 맞춰 자동으로 늘어난다. 텍스트 양이 달라지는 웹에서는 고정 높이가 콘텐츠를 자르거나 넘치게 만드는 원인이 되므로 높이를 내용에 맡기거나 min-height를 사용하는 편이 안전하다. 높이의 백분율은 부모 높이가 명시되어 있어야 기준을 계산할 수 있다.
3.2 min-*와 max-*
max-width는 요소가 지나치게 넓어지는 것을 막는 상한선이고, min-width는 지나치게 좁아지는 것을 막는 하한선이다. 반응형 컨테이너에는 width: 100%, max-width, margin: 0 auto 조합이 자주 사용된다.
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}min-height는 콘텐츠가 적어도 확보할 최소 높이를 정하고, 내용이 늘면 박스도 커지게 한다. 첫 화면을 뷰포트 높이만큼 확보하려면 min-height: 100vh를 사용할 수 있다. max-height는 상한을 넘는 콘텐츠를 자르거나 밖으로 내보낼 위험이 있으므로 overflow: auto나 hidden 같은 처리 정책과 함께 사용해야 한다.
콘텐츠 길이와 화면 크기가 변하는 웹 환경에서는 상한·하한과 넘침 정책을 함께 설계해야 한다.
4. position, 오프셋과 z-index
4.1 position의 다섯 값
| 값 | 기준점 | 원래 공간 | 대표 활용 |
|---|---|---|---|
static | 일반 문서 흐름 | 차지함 | 일반 텍스트와 블록 배치 |
relative | 자신의 원래 위치 | 유지함 | 미세 이동, absolute 자식의 기준점 |
absolute | static이 아닌 가장 가까운 조상 | 제거됨 | 배지, 드롭다운, 툴팁, 겹침 |
fixed | 뷰포트 | 제거됨 | 고정 헤더, 상담 버튼, TOP 버튼 |
sticky | 스크롤 컨테이너 | 유지함 | 스크롤 중 특정 지점부터 고정 |
static은 기본값으로 top, left, z-index 같은 위치 속성을 무시한다. relative는 원래 자리를 남긴 채 이동하며, 가장 중요한 활용은 absolute 자식의 위치 기준을 제공하는 것이다. absolute와 fixed는 문서 흐름에서 제거되므로 다른 요소가 그 자리를 없는 것으로 취급한다.
sticky는 일반 흐름을 따라가다가 지정한 경계에 닿으면 부모 범위 안에서 고정된다. 작동하려면 top: 0처럼 위치 오프셋을 하나 이상 지정해야 한다.
4.2 top, right, bottom, left와 inset
오프셋 속성은 static이 아닌 요소를 기준점에서 얼마나 떨어뜨릴지 정한다. top과 bottom을 동시에 주고 height도 고정하면 top이 우선하며, left와 right를 동시에 주고 width도 고정하면 left가 우선한다. inset은 네 방향 오프셋을 margin과 같은 시계방향 문법으로 한 번에 지정한다. inset: 0은 네 방향을 모두 0으로 지정한 것과 같다.
.card {
position: relative;
}
.badge {
position: absolute;
top: 10px;
right: 10px;
}transform: translate()가 더 유리하다.4.3 z-index
z-index는 겹친 요소가 사용자에게 보이는 앞뒤 순서를 정한다. 값이 큰 요소가 위에 보이지만 일반적으로 position이 static이 아닌 요소에서 작동한다. z-index가 없으면 같은 조건에서 HTML 뒤쪽에 그려진 요소가 앞의 요소를 덮는다.
자식의 z-index가 매우 커도 부모의 쌓임 맥락이 경쟁 요소의 부모보다 낮으면 바깥 경쟁 요소 위로 올라가지 못할 수 있다. 무작정 큰 숫자를 늘리는 인플레이션을 막기 위해 sticky, dropdown, modal, toast 같은 계층을 CSS 변수로 미리 정의하는 방식이 권장된다.
5. display, Flexbox와 Grid
5.1 display 값 비교
| 값 | 배치 특징 | 크기 지정 | 주요 용도 |
|---|---|---|---|
block | 새 줄에서 시작하고 가용 너비를 채움 | 가능 | 문서 구조와 레이아웃 뼈대 |
inline | 텍스트 흐름 안에서 옆으로 배치 | width·height 불가 | 문장 속 링크·강조 |
inline-block | 옆으로 흐르면서 블록 크기 유지 | 가능 | 버튼, 배지, 간단한 가로 메뉴 |
flex | 한 주축 중심의 1차원 배치 | 가능 | 내비게이션과 UI 세부 정렬 |
grid | 행과 열의 2차원 배치 | 가능 | 페이지 구조와 카드 격자 |
none | 화면과 문서 흐름에서 제거 | - | 조건부 숨김, 토글 UI |
inline과 inline-block은 모두 옆으로 흐르지만 inline-block은 width, height, 상하 여백을 적용할 수 있다. block은 자기 박스의 성격을 정하는 반면 flex와 grid는 부모가 자식을 어떻게 배치할지를 정하는 컨테이너 역할이 강하다.
5.2 Flexbox
Flexbox는 한 방향을 중심으로 자식들을 유연하게 배치하는 1차원 레이아웃이다. 주축은 아이템이 놓이는 방향이고 교차축은 그에 수직인 방향이다. 기본 주축은 가로이다.
| 부모 속성 | 역할 | 주요 값 |
|---|---|---|
flex-direction | 주축 방향 | row, column, 각 reverse 값 |
justify-content | 주축 정렬 | flex-start, center, flex-end, space-between |
align-items | 교차축 정렬 | stretch, center, flex-start, flex-end, baseline |
flex-wrap | 아이템 줄바꿈 | nowrap, wrap |
gap | 아이템 사이 간격 | 길이 값 |
자식의 flex-grow는 남는 공간을 얼마나 가져갈지, flex-shrink는 공간이 부족할 때 얼마나 줄어들지, flex-basis는 팽창·수축 전 기본 크기를 정한다. flex: 1은 일반적으로 1 1 0%로 해석되어 내용 길이와 관계없이 남는 공간을 같은 비율로 나누는 데 자주 쓰인다. flex: none은 늘어나지도 줄어들지도 않는 고정 아이템에 사용한다.
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.search { flex: 1; }
.icon { flex: none; }5.3 Grid
Grid는 행과 열을 동시에 다루는 2차원 레이아웃이다. 부모에 display: grid를 지정하고 grid-template-columns와 grid-template-rows로 트랙의 개수와 크기를 정한다. fr은 남는 공간의 비율이며 1fr 1fr 1fr은 세 열을 같은 비율로 나눈다.
gap은 행과 열 사이 간격을 지정한다.grid-template-areas는 영역 이름으로 레이아웃 설계도를 표현한다.grid-column과grid-row는 칸 번호가 아니라 시작선과 끝선 번호를 사용한다.span 2는 현재 위치에서 두 칸을 차지한다는 뜻이다.repeat(3, 1fr)은1fr을 세 번 반복한다.minmax(200px, 1fr)은 최소 200px을 보장하고 남는 공간을 확장한다.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}auto-fit과 minmax를 함께 사용하면 미디어쿼리 없이도 화면 너비에 따라 열 수가 자동으로 바뀌는 카드 목록을 만들 수 있다. 전체 페이지 레이아웃은 header, menu, main, aside, footer 같은 이름을 grid-template-areas로 배치하면 구조를 코드에서 직관적으로 읽을 수 있다.
6. 넘침, 표시, float와 resize
6.1 overflow
| 값 | 넘친 콘텐츠 처리 |
|---|---|
visible | 기본값. 박스 밖으로 그대로 보인다. |
hidden | 넘친 부분을 자르고 스크롤바를 만들지 않는다. |
scroll | 넘침 여부와 관계없이 스크롤바를 만든다. |
auto | 넘칠 때만 스크롤바를 만든다. |
clip | 넘친 부분을 자르고 프로그래밍 방식 스크롤도 막는다. |
overflow-x와 overflow-y로 방향별 제어가 가능하다. 가로 카드 목록은 부모에 display: flex, overflow-x: auto를 주고 자식 카드에 flex-shrink: 0을 지정해야 카드가 찌그러지지 않고 가로 스크롤이 생긴다.
6.2 visibility와 숨김 방식
| 방식 | 눈에 보임 | 공간 차지 | 클릭 가능 |
|---|---|---|---|
display: none | 아니요 | 아니요 | 아니요 |
visibility: hidden | 아니요 | 예 | 아니요 |
opacity: 0 | 아니요 | 예 | 예 |
visibility: collapse는 테이블 행이나 열에서 공간까지 제거하는 특수 용도로 쓰이고 일반 요소에서는 hidden처럼 동작한다. 투명한 요소가 클릭되는 문제를 막으려면 단순히 opacity만 0으로 만드는 방식을 주의해야 한다.
6.3 float와 clear
float는 현대의 일반 레이아웃 도구가 아니라 신문 기사처럼 이미지 주위로 텍스트가 흐르게 하는 용도이다. 값은 left, right, none이 있다. clear는 float의 영향을 끊으며 both는 양쪽 float를 모두 해제한다. 가로·세로 UI 배치에는 Flexbox나 Grid를 사용한다.
6.4 resize
resize는 사용자가 요소 가장자리를 드래그하여 크기를 바꾸게 한다. 값은 none, both, horizontal, vertical이며 overflow가 visible이 아닌 값으로 함께 지정되어야 작동한다. 너무 작거나 커져 레이아웃을 망치지 않도록 min-width, max-width, min-height, max-height로 범위를 제한한다.
7. 테두리, 둥근 모서리, 외곽선과 그림자
7.1 border의 세 요소
테두리는 두께, 스타일, 색상의 세 요소로 구성된다. 단축 속성은 border: 두께 스타일 색상;이며, 스타일이 없으면 테두리가 보이지 않을 수 있다. 대표 스타일은 solid, dashed, dotted, double, none이다. double은 충분한 두께가 있어야 두 선이 구분된다.
.card {
border: 1px solid #e0e0e0;
}
blockquote {
border-left: 5px solid blue;
}border-top, border-right, border-bottom, border-left로 방향별 단축 속성을 지정할 수 있다. 밑줄에는 border-bottom, 인용문 강조에는 border-left가 자주 쓰인다. 여러 테두리가 만나는 지점이 대각선으로 나뉘는 성질과 투명 테두리를 이용하면 CSS 삼각형을 만들 수 있다.
7.2 border-radius
border-radius는 박스 모서리를 둥글게 만든다. 한 값은 네 모서리에 모두 적용되고 네 값은 왼쪽 위부터 시계방향으로 적용된다. px은 박스 크기가 달라져도 고정된 둥글기를 유지하며 버튼과 카드에 알맞다. 백분율은 박스 크기에 비례하고 정사각형에 50%를 주면 원이 된다.
- 원: 정사각형에
border-radius: 50% - 알약 모양: 직사각형에
border-radius: 9999px - 비대칭 타원:
가로 반지름 / 세로 반지름슬래시 문법 사용
원형 프로필 이미지의 부모에는 border-radius: 50%와 overflow: hidden을 지정하여 네모난 이미지가 모서리 밖으로 나오지 않게 한다. 이미지에는 object-fit: cover를 적용하면 박스를 빈 공간 없이 채우면서 넘치는 부분을 잘라낼 수 있다.
7.3 outline
outline은 border 바깥에 겹쳐 그려지며 레이아웃 공간을 차지하지 않는다. 네 방향을 따로 제어할 수 없지만 outline-offset으로 테두리와의 거리를 조정할 수 있다. 키보드 포커스 표시와 접근성, 레이아웃을 밀지 않는 디버깅 선에 유용하다.
7.4 box-shadow
box-shadow는 요소에 깊이감과 입체감을 준다. 기본 문법은 offset-x offset-y blur spread color이며 마지막에 inset을 붙이면 안쪽 그림자가 된다.
| 구성 값 | 의미 |
|---|---|
| offset-x | 양수는 오른쪽, 음수는 왼쪽으로 이동 |
| offset-y | 양수는 아래, 음수는 위로 이동 |
| blur | 가장자리의 흐림 정도 |
| spread | 그림자 크기의 확장 또는 축소 |
| color | 그림자 색과 투명도 |
| inset | 바깥 그림자를 안쪽 그림자로 전환 |
투명한 검정색과 넓은 blur를 사용하면 배경에 자연스럽게 섞인다. 쉼표로 여러 그림자를 동시에 적용할 수 있고, blur를 0으로 한 다중 그림자는 복고풍 3D 효과를 만든다. spread가 음수이면 그림자가 요소보다 작아져 떠 있는 느낌을 줄 수 있다.
8. 핵심 개념 정리
- 박스는 content, padding, border, margin 순으로 구성된다.
border-box는 설정 너비에 패딩과 테두리를 포함해 크기 예측을 쉽게 한다.- padding은 배경과 클릭 영역에 포함되는 안쪽 여백이고 margin은 투명한 바깥 간격이다.
- 수직 마진은 병합될 수 있으며 반복 요소의 간격은
gap으로 관리하는 것이 명확하다. - 고정 높이보다 자동 높이와
min-height를 우선하고 max-height에는 overflow 대책을 둔다. - absolute는 위치가 지정된 가장 가까운 조상을 기준으로 하며 fixed는 뷰포트를 기준으로 한다.
- Flexbox는 1차원, Grid는 2차원 레이아웃에 강하다.
display: none은 공간까지 제거하고visibility: hidden은 공간을 남긴다.- float는 텍스트 흐름 용도이며 일반 레이아웃에는 Flexbox나 Grid를 사용한다.
- border는 공간을 차지하지만 outline은 차지하지 않으며, box-shadow는 오프셋·번짐·퍼짐으로 입체감을 만든다.
시험 직전 최종 점검
박스 전체 너비 계산에서 box-sizing을 먼저 확인하고, margin과 padding은 배경·클릭·경계 위치로 구분한다. position은 기준점과 원래 공간 유지 여부, display는 줄바꿈과 크기 지정 가능 여부를 표로 비교한다. Flex의 주축·교차축과 Grid의 선 번호, 숨김 방식의 공간·클릭 차이도 반드시 점검한다.
9. 예상문제 20선
1. CSS 박스 모델을 안쪽에서 바깥쪽 순서로 바르게 나열한 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
내용을 padding이 감싸고, 그 밖에 border와 margin이 차례로 위치한다.
2. 설정한 width 안에 content, padding, border를 모두 포함하는 값은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①border-box는 지정 크기 안에 패딩과 테두리를 포함하여 외곽 크기를 유지한다.
3. margin의 특징으로 옳지 않은 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
마진은 항상 투명하며 요소의 배경은 content와 padding 영역에 적용된다.
4. 위 요소의 margin-bottom이 30px, 아래 요소의 margin-top이 20px이고 수직 마진이 병합되면 실제 간격은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
병합된 수직 마진은 단순히 더하지 않고 일반적으로 큰 값 하나가 적용된다.
5. 요소의 배경과 클릭 영역을 포함하는 안쪽 여백은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
padding은 content와 border 사이에 위치하며 배경과 클릭 가능 영역에 포함된다.
6. 블록 요소를 가로 중앙에 배치하기 위한 조건으로 적절한 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
남는 좌우 공간을 auto 마진이 같은 크기로 나눠 가지려면 블록에 계산 가능한 너비가 있어야 한다.
7. absolute 요소의 위치 기준이 되는 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
absolute는 static이 아닌 가장 가까운 조상 박스를 기준으로 오프셋을 계산한다.
8. 스크롤과 관계없이 브라우저 창의 같은 위치에 고정되는 position 값은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
fixed는 뷰포트를 기준으로 하고 문서 흐름에서 제거되어 스크롤해도 화면의 같은 위치에 남는다.
9. sticky가 고정 동작을 시작하려면 필요한 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③
sticky는 어느 경계에 도달했을 때 붙을지 알려주는 top, bottom 등의 오프셋이 필요하다.
10. 애니메이션으로 요소를 이동할 때 top과 left보다 권장되는 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
transform 이동은 레이아웃 재계산 부담이 적고 주변 요소 배치에 영향을 주지 않아 애니메이션에 유리하다.
11. 옆으로 흐르면서 width와 height를 지정할 수 있어 버튼에 적합한 display 값은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
inline-block은 인라인처럼 한 줄에 배치되지만 블록처럼 크기와 상하 여백을 조절할 수 있다.
12. Flexbox에서 주축 방향의 아이템 배치를 정하는 속성은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④justify-content는 주축 정렬을, align-items는 교차축 정렬을 담당한다.
13. flex: 1에 대한 설명으로 가장 적절한 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②flex: 1은 아이템들이 남는 공간을 유연하게 같은 비율로 나누는 데 자주 쓰인다.
14. Grid에서 grid-column: 1 / 3의 의미는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
Grid의 시작·끝 값은 칸 번호가 아니라 선 번호이므로 1번 선부터 3번 선 사이의 두 열을 차지한다.
15. 내용이 박스를 넘을 때에만 스크롤바를 만드는 값은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③overflow: auto는 내용이 넘칠 때만 필요한 방향의 스크롤바를 만든다.
16. 눈에는 보이지 않지만 원래 레이아웃 공간을 유지하고 클릭은 되지 않는 방식은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
visibility hidden은 요소를 보이지 않게 하지만 공간은 유지하고 클릭은 막는다.
17. resize 속성이 작동하기 위해 함께 필요한 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ④
resize는 overflow: auto처럼 visible이 아닌 overflow 설정과 함께 사용해야 작동한다.
18. 정사각형 요소를 완전한 원으로 만드는 선언은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ①
가로와 세로가 같은 정사각형의 네 모서리를 50%만큼 둥글게 하면 원이 된다.
19. border와 outline의 차이에 대한 설명으로 옳은 것은?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ②
outline은 박스 외부에 겹쳐 표시되어 주변 레이아웃을 밀지 않으며 outline-offset도 사용할 수 있다.
20. box-shadow를 안쪽 그림자로 바꾸는 키워드는?
정답입니다.
오답입니다. 답안을 다시 선택해 보세요.
정답 및 해설 보기
정답: ③inset 키워드를 추가하면 바깥쪽 그림자가 요소 안쪽으로 들어간 그림자로 바뀐다.
댓글
댓글 쓰기