실전미션1: 텍스트 직접 코딩해서 꾸며보기
오늘은 그동안 배워온걸 써먹어 볼까 합니다. 실습만 있는거죠.
늘 해왔던대로
1.VS Code 실행시키고
2.html 을 하나 만든다음
3.html:5 기본 양식을 만들고
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>실습</title>
</head>
<body>
</body>
</html>
4.body안에 이렇게 써줍니다.
<body>
<div>
<h2>그들이 링을 채우는 법</h2>
<p>PineApple Watch 사용자들이 활동 링을 어떻게 채우는지 살펴볼까요?</p>
<a href="">동영상 보기</a>
</div>
</body>
5.기본 코딩이 완성 되었어요.
6.이제 예쁘게 꾸며주는 일만 남았네요. 예쁘기 위해선 style을 내야겠죠?
<div style="">
<h2 style="">그들이 링을 채우는 법</h2>
<p style="">PineApple Watch 사용자들이 활동 링을 어떻게 채우는지 살펴볼까요?</p>
<a href="" style="">동영상 보기</a>
</div>
7.먼저 h2부터 꾸며주겠습니다.
<h2 style="
margin:50px 0 0 0;
font-size:40px;
font-weight:600;
font-family: '나눔고딕','NanumGothic',
'맑은고딕','MalgunGothic';
color: #212121;
">그들이 링을 채우는 법</h2>
갑자기 명령어가 많아져서 당황되셨나요?
사실 차분하게 읽어보면 다 아는 말입니다.
<h2 style="
margin:50px 0 0 0; //여백 배웠잖아요? 위로만 50px 여백 주라는
font-size:40px; //폰트 크기를 지정해주는
font-weight:600; //폰트 두깨를 지정해줘요. 200이 최소. 200단위로 커져요.
font-family: '나눔고딕','NanumGothic',
'맑은고딕','MalgunGothic';
//폰트를 지정해줘요. 처음 나온게 1순위, 없으면 그 다음꺼...
//여기서는 나눔고딕이 1순위.
//만약 설치 안되어있다면 윈도우 어디에나 설치된 맑은고딕
color: #212121; //글씨 색상 지정
">그들이 링을 채우는 법</h2>
이해하려고 보니 사실 별거 아니죠?
8.p태그도 마저 꾸며줄게요.
<p style="
margin-top:10px; //위로 여백 10px
font-size:18px; //폰트크기 18px
font-weight:400; //폰트두깨 위에 타이틀보다 얇네요.
color: #424242; //색상
">PineApple Watch 사용자들이 활동 링을 <br />어떻게 채우는지 살펴볼까요?</p>
9.이제 조금 더 그럴싸하게 바꼈나요?
10.버튼도 마저 꾸며줍시다.
<a href="" style="
margin-top:20px;
font-size: 14px;
font-weight: 400;
color: #424242;
text-decoration: none;
//이건 처음 보셨을텐데, 링크를 달면 자동으로 생성되는 밑줄을 지워주는 기능이랍니다.
">동영상 보기</a>
11.그동안 배운것들로 코딩해봤는데 코딩 마냥 어려운건 아니죠?
애플 사이트에 들어가는 배너처럼 텍스트가 꾸며졌죠?
여기에 이미지만 넣어도 꽤 그럴싸한 배너로 변신할거예요.
이 예제는 그대로 잘 남겨두셨다가 다음번에 좀 더 진행해보겠습니다. 조금만 더 배우면 어떤 코딩이든 하실수 있어요.
그리고 코딩을 실전에서 하다보니 뭔가 의문점들이 생겼죠? 그것들을 하나씩 해소시켜 보겠습니다.
다음 강의에서 뵙겠습니다!
2019/08/15 - [프로그램 강좌] - [html08]여백의 미: margin, padding #2
2019/08/14 - [프로그램 강좌] - [html07]여백의 미:margin, padding #1
2019/07/26 - [프로그램 강좌] - [html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨)
2019/07/25 - [프로그램 강좌] - [html05]이미지로 코딩하기2
2019/07/24 - [프로그램 강좌] - [html04]이미지로 코딩하기!
2019/07/11 - [프로그램 강좌] - [html03]CSS가 뭔데? 텍스트 꾸며보기
2019/07/08 - [프로그램 강좌] - [html02]html = head + body
2019/06/22 - [프로그램 강좌] - [html01]코딩은 누구나 할 수 있다?
'프로그램 강좌' 카테고리의 다른 글
| [js]classList 사용방법 (0) | 2019.09.05 |
|---|---|
| [css]keyframe 애니메이션 (0) | 2019.09.04 |
| [html08]여백의 미: margin, padding #2 (0) | 2019.08.15 |
| [html07]여백의 미:margin, padding #1 (0) | 2019.08.14 |
| [Native]TouchableOpacity 버튼기능 & 옵션 (0) | 2019.08.13 |
