반응형
<!DOCTYPE html>
<html>
<head>
<title>id/class example</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<p>세 번째 문단</p>
<p>네 번째 문단</p>
</body>
</html>
태그를 하면 스타일링을 할수 있다.
p태그의 폰트를 64픽셀로 키우고 색깔을 파란색으로 바꾸고싶으면
스타일 태그를 써서
<style>
p{
font-size: 64px;
color: blue;
}
</style>
헤드 위치에 코드를 추가하면 된다
<p>태그는 하나로 묶여있기때문에 다 같이 바뀐다.
세 번째 문단만 크고 파랗게 만들고싶다면?
클래스를 사용한다
일종의 이름 같은 것이다.
<p class="big-blue-text">를 사용한다.</p>
스타일 코드를 사용해보면
<style>
.big-blue-text {
font-size: 64px;
color: blue;
}
</style>
가운데 정렬을 하는 클래스를 추가해보자
<style>
.centered-text {
text-align: center;
}
</style>
728x90
반응형
'교육 > [Codeit]웹 퍼블리싱' 카테고리의 다른 글
| 실습과제. 듀엣가요제 (0) | 2020.12.06 |
|---|---|
| 클래스(class)와 아이디(id) (0) | 2020.12.06 |
| 실습과제 프로필 페이지 (0) | 2020.12.01 |
| 이미지 (0) | 2020.11.27 |
| 링크 (0) | 2020.11.27 |