320x100
# 문제
코딩 연습 확인사항: CSS - 폰트와 텍스트
임무: 모든 h1 헤딩이 Arial폰트를 사용하고, 모든 단락의 폰트 크기가 1이 되도록 "styling.css"를 채우세요.
또한 폰트 크기를 0.5로 줄이는 small이라는 id를 만드세요.
"index.html"을 채우세요. 여기에는 최소한 하나의 h1 헤딩, 하나의 단락 및 small을 적용하는 텍스트가 포함되어야 합니다.(div 컨테이너를 사용하세요)
평소와 같이 HTML 헤더도 만드세요. CSS 파일을 추가하는 것을 잊지 마세요.
중요 참고 사항: 위의 임무를 주의 깊게 읽어주세요! 자동화된 코딩 연습 평가 시스템은 정확하게 일치하는 것이 요구되기 때문에 정확하게 동일해야 합니다!
이에 대한 해답은 다음 강의에 있습니다.
# 내 코드
# 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="https://fonts.googleapis.com/css?family=Font+Name">
<link rel="stylesheet" href="styling.css">
<title>Document</title>
</head>
<body>
<h1>Here is H1 area</h1>
<div>Here is div</div>
</body>
</html># styling.css
h1 {
font: arial;
font-size: 100%;
}
#small {
font-size: 50%;
}
결과적으론 답안코드와 다르지 않을것 같긴한데, 그래도 참고할 부분이 있어서 답안코드도 첨부한다.
# 답안코드
# index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<h1>Heading in Arial</h1>
<p>Some paragraph</p>
<div id="small">Some small text</div>
</body>
</html># styling.css
h1{
font-family: Arial;
}
p{
font-size:1em;
}
#small{
font-size:0.5em;
}
css를 쓸때 1em에 해당하는건 내가 영어로 어딘가에 필기해놨던것 같은데 기억이 안나서 다시 적는다
1em은 현재의 폰트 크기며 이것은 font-size 100%와 같은 기능이라고 보면 된다고 한다.
그리고 보통 폰트는 16px로 설정되어있다고 한다.
즉, 2em은 200%, 32px에 해당하는 값이다. (px은 변동될 수 있다. 초기 셋팅값에 따라서)
300x250
'Web > Css' 카테고리의 다른 글
| BOOTSTRAP 적용 기본 API셋팅 (css, javascript) (0) | 2022.09.28 |
|---|---|
| CSS 문제풀이5 - padding, border, margin 개념과 기초활용 (0) | 2022.09.28 |
| css - google API에 연동하여 폰트 사용하기 (0) | 2022.09.28 |
| css 문제풀이3 - div안의 div, class와 id에도 각각 css 먹이기 (0) | 2022.09.28 |
| css 문제풀이2 - div과 span을 구분하여 css적용 (0) | 2022.09.28 |
