반응형
텍스트 꾸미기 연습
HTML 태그를 직접 사용해봅시다.
홈페이지가 아래 그림처럼 구현되도록, 비어있는 style 코드를 채워주세요.
- <h1> 태그는 가운데로 정렬하고, lime 색깔로 칠해주세요.
- <h2> 태그는 오른쪽으로 정렬하고, hotpink 색깔로 칠해주세요.
- <h3> 태그는 오른쪽으로 정렬하고, blue 색깔로 칠해주세요.
- <p> 태그에는 ‘웹사이트’라는 단어가 두 번 나오는데요, 이 단어를 굵게 써주세요.
- <p> 태그에 있는 글자 중 <i> 태그로 감싸진 ‘HTML’과 ‘JavaScript’ 글자의 폰트를 64px로 바꾸고, green 색깔로 칠해주세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Codeit</title>
<style>
h1 {
text-align: center;
}
h2 {
text-align: right;
color: hotpink;
}
h3 {
text-align: right;
color: blue;
}
p i {
font-size: 64px;
color: green;
}
</style>
</head>
<body>
<h1>내 첫 <i>HTML</i> 프로젝트</h1>
<h2>이름: 이윤수</h2>
<h3>이메일: yoonsoo@codeit.kr</h3>
<p>나는 <i>HTML</i>을 좋아한다. 앞으로 이 강의를 듣고, 나만의 <b>웹사이트</b>를 만들어볼 계획이다. 코드잇과 함께라면 무엇이든 가능하리라 믿는다. 아자아자 화이팅!</p>
<p>이번 <i>HTML</i> 수업 뒤에는 무엇이 기다리고 있을까? 설레는 마음으로 이번 과정을 끝낸 후, 다음 <i>JavaScript</i> 수업을 들어 <b>웹사이트</b>를 더 역동적으로 만들어봐야겠다!</p>
</body>
</html>
본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |
|---|---|
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |
| 색상과 배경 (0) | 2021.01.08 |
| 텍스트 관련 스타일 (0) | 2021.01.07 |
| CSS 기초 (0) | 2021.01.07 |