실습과제
100XP
텍스트 꾸미기 연습
HTML 태그를 직접 사용해봅시다.
홈페이지가 아래 그림처럼 구현되도록, 비어있는 style 코드를 채워주세요.
<h1> 태그는 가운데로 정렬하고, lime 색깔로 칠해주세요.
<h2> 태그는 오른쪽으로 정렬하고, hotpink 색깔로 칠해주세요.
<h3> 태그는 오른쪽으로 정렬하고, blue 색깔로 칠해주세요.
<p> 태그에는 ‘웹사이트’라는 단어가 두 번 나오는데요, 이 단어를 굵게 써주세요.
<p> 태그에 있는 글자 중 <i> 태그로 감싸진 ‘HTML’과 ‘JavaScript’ 글자의 폰트를 64px로 바꾸고, green 색깔로 칠해주세요.
purple check icon셀프채점
다음 항목들이 제대로 페이지에서 구현이 되었나요?
웹사이트 라는 단어가 두 번 모두 굵게 표시된다.
이름과 이메일이 오른쪽으로 정렬된다.
본문에 있는 HTML, JavaScript만 폰트 크기가 64px로 커진다. (제목의 HTML은 폰트 크기가 커지지 않는다)
글자의 색상 및 크기가 도면과 전체적으로 일치한다.
과제 해설close solution tab
우리에게 주어진 조건은 총 5개입니다.
하나씩 살펴볼게요.
#1. h1 태그는 가운데로 정렬하고, lime 색깔로 칠해주세요.
h1 {
text-align: center;
color: lime;
}
#2. h2 태그는 오른쪽으로 정렬하고, hotpink 색깔로 칠해주세요.
h2 {
text-align: right;
color: hotpink;
}
#3. h3 태그는 오른쪽으로 정렬하고, blue 색깔로 칠해주세요.
h3 {
text-align: right;
color: blue;
}
#4. p 태그에는 ‘웹사이트’라는 단어가 두 번 나오는데요, 이 단어를 굵게 써주세요.
<b>웹사이트</b>
#5. p 태그에 있는 글자 중 i 태그로 감싸진 ‘HTML’과 ‘JavaScript’ 글자의 폰트를 64px로 바꾸고, green 색깔로 칠해주세요.
p i {
font-size: 64px;
color: green;
}
이렇게 할 수 있겠죠?
그래서 코드로 정리해보면 아래와 같습니다.
<!DOCTYPE html>
<meta charset="utf-8">
<title>Codeit</title>
<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>
<style>
h1 {
text-align: center;
color: lime;
}
h2 {
text-align: right;
color: hotpink;
}
h3 {
text-align: right;
color: blue;
}
p i {
font-size: 64px;
color: green;
}
</style>
'교육 > [Codeit]웹 퍼블리싱' 카테고리의 다른 글
| 링크 (0) | 2020.11.27 |
|---|---|
| <html><head><body> 태그 (0) | 2020.11.27 |
| 기본 HTML 태그 정리 (0) | 2020.11.23 |
| <b>, <i>태그 정리 (0) | 2020.11.23 |
| 기본 css 속성 정리 (0) | 2020.11.23 |