코딩 배우기 | Learning Coding | Social Networking Profile
코딩 배우기 | Learning Coding | Social Networking Profile
지금까지 익힌 내용들을 가지고 간단하게 profile을 만들어봅니다. 사진을 올리고, 나에 대한 리스트를 만들어서 style도 조금씩 바꿔보고 말이죠. 저는 재미있게 따라하고 있는데 어제 밤에 민대표님과 통화중에 술에 취한 목소리로 너무 재미없다고, 안할거라고 하더군요. 배워두면 분명 도움이 될겁니다. 참으세요.
지금까지 익힌 내용들을 가지고 간단하게 profile을 만들어봅니다. 사진을 올리고, 나에 대한 리스트를 만들어서 style도 조금씩 바꿔보고 말이죠. 저는 재미있게 따라하고 있는데 어제 밤에 민대표님과 통화중에 술에 취한 목소리로 너무 재미없다고, 안할거라고 하더군요. 배워두면 분명 도움이 될겁니다. 참으세요.
Social Networking Profile | Listing Your Interests | Codecademy
1/7 Here's what you are building
<!DOCTYPE html><html>
<head>
<title>The Kingest of Kongs</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/da840950.jpg" />
<p>I'm male, 89 years old, and am a giant, Empire State Building-climbing ape.</p>
<ul>
<li><p style="color:red">Interests</p>
<ul>
<li style="font-family:Futura">Bananas</li>
<li style="font-family:Futura">Climbing stuff</li>
<li style="font-family:Futura">HTML</li>
</ul>
</li>
<li><p style="color:red">Jobs</p>
<ol>
<li style="font-family:Futura">Giant ape</li>
<li style="font-family:Futura">Web developer</li>
</ol>
</li>
<li><p style="color:red">Where I Went to School</p>
<ol>
<li style="font-family:Futura">Diddy Kong Jr. High School</li>
<li style="font-family:Futura">Donkey Kong Sr. High School</li>
<li style="font-family:Futura">Harvard University (BA)</li>
<li style="font-size:18px; font-family:Futura">Yale University (JD) (Current)</li>
</ol>
</li>
<li><p style="color:red">Favorite Quotes</p>
<ul>
<li style="font-family:Futura">"If at first you don't succeed, climb a giant building."</li>
<li style="font-family:Futura">"A banana in the hand is worth two on the tree."</li>
</ul>
</li>
</ul>
</body>
</html>
2/7 You have the power!
<!DOCTYPE html>
<html>
<head>
<title>JONE</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
</body>
</html>
3/7 A bit about you
<!DOCTYPE html>
<html>
<head>
<title>JONE</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
<p>35 years old</p>
<p>man</p>
<p>Seoul</p>
</body>
</html>
4/7 Profile sections
<!DOCTYPE html>
<html>
<head>
<title>JONE</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
<p>35 years old</p>
<p>man</p>
<p>Seoul</p>
<ul>
<li>Solopreneur</li>
<li>DVM</li>
<li>JONE STUDIO</li>
<li>Seoul</li>
</ul>
</body>
</html>
5/7 Lists within lists
<!DOCTYPE html>
<html>
<head>
<title>JONE</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
<p>35 years old</p>
<p>man</p>
<p>Seoul</p>
<ul>
<li>Solopreneur</li>
<li>DVM</li>
<li>JONE STUDIO</li>
<li>Seoul</li>
<li>Interests
<ol>
<li>Solopreneur</li>
<li>blogspot</li>
<li>micro business</li>
</ol>
<ul>
<li>health</li>
<li>wealth</li>
</ul>
</li>
</ul>
</body>
</html>
6/7 Fancy up your font
<!DOCTYPE html>
<html>
<head>
<title>JONE</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
<p style="font-family: Arial; font-size: 20px">35 years old</p>
<p>man</p>
<p>Seoul</p>
<ul>
<li>Solopreneur</li>
<li>DVM</li>
<li>JONE STUDIO</li>
<li>Seoul</li>
<li>Interests
<ol>
<li>Solopreneur</li>
<li>blogspot</li>
<li>micro business</li>
</ol>
<p style="color: lightseagreen">----------</p>
<ul>
<li style="font-size: 30px">health</li>
<li style="font-size: 30px">wealth</li>
</ul>
</li>
</ul>
</body>
</html>
7/7 Bold! Italic! Bold!
<!DOCTYPE html>
<html>
<head>
<title>JONE</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
<p style="font-family: Arial; font-size: 20px"><em>35</em> years old</p>
<p>man</p>
<p>Seoul</p>
<ul>
<li>Solopreneur</li>
<li>DVM</li>
<li>JON<strong>E S</strong>TUDIO</li>
<li>Seoul</li>
<li>Interests
<ol>
<li>Solopreneur</li>
<li><em>blogspot</em> blogspot</li>
<li>micro business</li>
</ol>
<p style="color: lightseagreen">----------</p>
<ul>
<li style="font-size: 30px">health</li>
<li style="font-size: 30px">wealth</li>
</ul>
</li>
</ul>
</body>
</html>