웹 UI 개발 코칭스터디 1기/미니 프로젝트
개념강의 | 7. 레이아웃 - 6) 속성 - position
position 속성을 사용해 아래의 화면을 구현하고자 합니다.
아래의 화면에서 볼 수 있듯이 스크롤을 내려도 상단바는 움직이지 않는데요, (페이스북의 상단바를 생각하면 쉽습니다)
지금까지 배운 내용들을 종합하여 빈칸의 코드를 작성해주세요.
결과)
코드)
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
header {
position: __(1)__;
top: __(2)__;
left: 0;
right: __(3)__;
height: 75px;
padding: 1 __(4)단위__;
color: white;
background: teal;
}
h1, p {
margin: 0;
}
body, html {
height: 200%;
}
* {
____(5)____: border-box;
}
</style>
</head>
<body>
______(6)______
<h1>고정된 영역</h1>
______(6)______
</body>
</html>
|
cs |
1. fixed
2. 0
3. 0
4. %
5. box-sizing
6. header
8번) 오답
(4)번 정답: em 또는 rem
(4)번은 문제에 제시된 화면을 보고 여백 단위 값을 유추할 수 있습니다. 제시된 화면엔 충분한 여백이 존재하므로 절대길이(px, pt)가 아닌 상대길이 단위가 적합함을 알 수 있습니다. %도 상대 단위이지만, 숫자가 1이기 때문에 1%는 화면과 같이 충분한 여백을 갖지 못한다는 것을 알 수 있습니다. 따라서 font-size 기준으로 상대길이를 가지는 단위가 오는 것을 유추해볼 수 있습니다.
- em: font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.
- rem: root의 font-size를 기준으로 값을 환산합니다.
'⌨️ > HTML, CSS' 카테고리의 다른 글
| [HTML, CSS] 기초문법과 실습 (0) | 2023.12.20 |
|---|---|
| [CSS] 속성 - 텍스트 처리 (0) | 2021.01.13 |
| [CSS] 속성 - border (0) | 2021.01.13 |
| [CSS] 문서 구조 선택자 (0) | 2021.01.13 |
| [HTML] 시멘틱 요소 (0) | 2021.01.13 |