# 문제
코딩 연습 확인사항: CSS - Box모델
임무: Box 모델을 사용하여 5px 너비의 녹색 테두리가 가지며, 중앙 정렬된 단어 "CENTRAL"이 포함된 박스를 만드세요.
박스는 모든 페이지 테두리까지 (더 정확하게는 div 요소까지), 50픽셀의 거리를 가져야 합니다.
평소와 같이 HTML 헤더도 만드세요. CSS 파일을 추가하는 것을 잊지 마세요.
중요 참고 사항: 위의 임무를 주의 깊게 읽어주세요! 자동화된 코딩 연습 평가 시스템은 정확하게 일치하는 것이 요구되기 때문에 정확하게 동일해야 합니다!
이에 대한 해답은 다음 강의에 있습니다.
# 주요 개념
content - padding - border - margin
순으로 내핵에서 외핵으로 가는 느낌으로 생각하면 된다.
# 내 코드
# 이번엔 내가 원하는 대로 적용되지도 않았고 틀렸다.
# index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="master.css">
<title>Document</title>
</head>
<body>
<h1 id="up">UP</h1>
<h1 id="down">DOWN</h1>
</body>
</html># master.css
#up {
text-align: center;
border: 5px;
border-color: green;
margin-bottom: 50px;
}# 답안 코드
# index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="central"> CENTRAL</div>
</body>
</html># styling.css
central{
text-align:center;
border: 5px solid green;
margin: 50px 50px 50px 50px;
}
'Web > Css' 카테고리의 다른 글
| css - fontfamily 사용방법 (1) | 2022.11.14 |
|---|---|
| BOOTSTRAP 적용 기본 API셋팅 (css, javascript) (0) | 2022.09.28 |
| CSS 문제풀이4 - 폰트, 텍스트 (font, text) (0) | 2022.09.28 |
| css - google API에 연동하여 폰트 사용하기 (0) | 2022.09.28 |
| css 문제풀이3 - div안의 div, class와 id에도 각각 css 먹이기 (0) | 2022.09.28 |
