코딩 배우기 | Learning Coding | HTML Basics II 두번째
코딩 배우기 | Learning Coding | HTML Basics II 두번째
리스트 만들기에 이어서 이번에는 Styling the fonts! 입니다. 한단계씩 꾸준히 하다보면 결국에는 뭐라도 얻을 수 있겠죠. 코딩 공부를 통해서 제일 먼저 하고 싶은 건 JONESTUDIO.BLOGSPOT.COM 의 업그레이드입니다. 이렇게까지는... 못하더라도 말이죠.
리스트 만들기에 이어서 이번에는 Styling the fonts! 입니다. 한단계씩 꾸준히 하다보면 결국에는 뭐라도 얻을 수 있겠죠. 코딩 공부를 통해서 제일 먼저 하고 싶은 건 JONESTUDIO.BLOGSPOT.COM 의 업그레이드입니다. 이렇게까지는... 못하더라도 말이죠.
HTML Basics II | Styling the fonts! | Codecademy
7/16 Making comments
<!-- Make me into a comment. --><p>But leave me visible to the user!</p>
<!-- comment -->
8/16 Font size
<!DOCTYPE html>
<html>
<head>
<title>First font size change</title>
</head>
<body>
<p style="font-size: 10px"> Some text for you to make tiny! </p>
<p style="font-size: 20px"> Some text for you to make normal size!</p>
<p style="font-size: 40px"> Some text for you to make super big!</p>
</body>
</html>
9/16 Font color
<!DOCTYPE html>
<html>
<head>
<title>Changing the colors!</title>
</head>
<body>
<h1 style="color: green; font-size: 16px;">Big Heading</h1>
<p style="color: violet;">A giant bear and a little duck were friends.</p>
<p style="color: red; font-size: 10px;">But the bear got hungry and ate the duck.</p>
</body>
</html>
| 참고 : Extends color keywords
10/16 Font family
<!DOCTYPE html><html>
<head>
<title>Loving the font changes</title>
</head>
<body>
<h1 style="font-family: Arial">Big title</h1>
<ol>
<li style="font-size: 16px; font-family: Arial">This item is big Arial.</li>
<li style="font-size: 12px; font-family: Verdana">This item is medium Verdana.</li>
<li style="font-size: 10px; font-family: Impact">This item is small Impact.</li>
</ol>
</body>
</html>
| 참고 : Generic font families
11/16 Recap
<!DOCTYPE html>
<html>
<head>
<title>Putting it all together</title>
</head>
<body>
<p style="font-size: 20px; color: blue; font-family: Arial">A truly spectacular paragraph!</p>
</body>
</html>
HTML Basics II | More nice styling! | Codecademy
12/16 Background color
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body style="background-color: brown;">
<h3>Favorite Football Teams</h3>
<ol style="background-color: yellow;">
<li>The Hawthorn Football Club</li>
<li>San Franscisco 49ers</li>
<li>Barcelona FC</li>
</ol>
</body>
</html>
13/16 Aligning the text
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body>
<h3 style="text-align: center;">Favorite Football Teams</h3>
<ol>
<li style="text-align: left;">The Hawthorn Football Club</li>
<li style="text-align: center;">San Franscisco 49ers</li>
<li style="text-align: right;">Barcelona FC</li>
</ol>
</body>
</html>
14/16 Strong words!
<!DOCTYPE html>
<html>
<head>
<title>Viva La Revolution!</title>
</head>
<body>
<p>Do you hear the people <strong>sing</strong>?</p>
<p>No I don't. I'm <strong>too</strong> busy eating cake.</p>
</body>
</html>
15/16 Emphasize words!
<!DOCTYPE html>
<html>
<head>
<title>Some nice practice</title>
</head>
<body>
<p>Hey, don't say <em>that</em>!</p>
<p>I am <em>so</em> tired.</p>
</body>
</html>
16/16 Summary
| HTML is the skeleton of the webpage, and CSS give the skeleton some skin and makeup.