관리 메뉴
개발일기
[css] hn 태그의 폰트 수정 / 연결선택자 본문
<실습문제1-1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 폰트 활용</title>
<style>
h1 {
font-style: italic;
font-family: 'consolas font';
}
p{
font: 16px 'Times New Roman';
}
.weight1 {
font-weight: 900;
}
.size span {
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>Consolas font</h1>
<hr>
<p class="weight1">font-weight 900</p>
<p class="size">현재 크기의 <span>1.5배</span> 크기로</p>
</body>
</html>
hn 태그의 폰트 수정
문제의 첫번째 줄 consolas font는 h1태그를 사용하여 css에 font-style과 family를 주었다.
그런데 속성을 두번 주기 번거로워서 font 속성만으로도 작성할 수 있는지 확인해봤다.
font: italic 100% 'consolas font';
이렇게 font size를 100%로 줄 경우 h1 사이즈 그대로 출력될 줄 알았으나
더 작은 사이즈로 출력이 되었는데,
그 이유는 font-size는 브라우저 기준으로 16px의 100%가 출력 된 것이다.
1rem, 1em 도 마찬가지.
h1사이즈로 맞추려면 더 번거로워지므로 font-size, font-family 이렇게 주는게 낫다.
연결선택자
'1.5배'에 스타일을 주기 위해 .size span을 사용.
span태그는 size클래스 안에 위치하므로
.size span 또는 .size>span은 가능하나 .size+span은 사용할 수 없다.
(띄어쓰기) : 상위요소 하위요소
> : 부모요소 > 자식요소
+ : 형제요소 중 첫번째 동생요소만을 선택
'HTML, CSS' 카테고리의 다른 글
| [새싹 프론트엔드] 목록 태그 - list style, 내비게이션 바 (0) | 2022.10.25 |
|---|---|
| [css] 글자/이미지 가로로 가운데 정렬하기(display, text-align) (0) | 2022.10.22 |
| [css] 위치속성 정리 - position, z-index, overflow, float (0) | 2022.10.22 |
| [css] :first-child, :last-child, :nth-child(n) / 동적 가상 클래스 (0) | 2022.10.19 |
| [새싹 프론트엔드] HTML 글자, 이미지, 링크, 공간분할 태그 (0) | 2022.10.17 |
'HTML, CSS' Related Articles
more
