CSS-L2-021 / 크기와 여백

calc 가변 너비

초급

문제

.box의 너비를 부모 너비에서 40px 뺀 값으로 만드세요.

준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.

확인할 조건

가변 계산 폭

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<div class="parent" style="width:300px"><div class="box">내용</div></div>
</body>
</html>

목표 화면

힌트

calc의 빼기 연산자 양옆에 공백이 필요합니다.

해설·정답 보기

기준 부모의 300px에서 40px를 제외합니다.

.box{width:calc(100% - 40px)}

모르는 문법은 코드 사전에서 ↗

style.css화면·구조 확인

풀이 코드

코드는 이 브라우저에 자동 저장돼요.

풀이 결과

코드를 작성하고 채점하기를 눌러보세요.

학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.

← 같은 난이도 목록 다음 문제: grow 비율 배분 →