모든 요소들 합치기
코드
코드 요약
<body>
<header>
</header>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Twitter Markup</title>
</head>
<body>
<header>
<h1>
<a href="#"><img src="#" alt="Twitter" /></a>
</h1>
<nav>
<h1>Global Navigation Menu</h1>
<ul>
<li>
<a href="#">
<span>Current page</span>
<!-- icon -->
Home
</a>
</li>
<li>
<a href="#">
<!-- icon -->
Explore
</a>
</li>
<li>
<a href="#">
<strong aria-label="5 Unread notifications">5</strong>
<!-- icon -->
Notifications
</a>
</li>
<li>
<a href="#">
<!-- icon -->
Messages
</a>
</li>
<li>
<a href="#">
<!-- icon -->
Bookmarks
</a>
</li>
<li>
<a href="#">
<!-- icon -->
Lists
</a>
</li>
<li>
<a href="#">
<!-- icon -->
Profile
</a>
</li>
<li>
<button type="button">
<!-- icon -->
More
</button>
<!-- Dropdown Menu -->
</li>
</ul>
<button type="button">Tweet</button>
</nav>
</header>
<main>
<header>
<h1>Home</h1>
<button type="button" aria-label="Timeline options">
<!-- Icon -->
</button>
<div>
<h2>Home shows you top Tweets first</h2>
<button type="button">
<strong>See latest Tweets instead</strong>
<span>You'll be switched back Home after you've been away for a while.</span>
</button>
<a href="#">
<!-- Icon -->
View content preferences
</a>
</div>
</header>
<section>
<h1>What's happening</h1>
<form action="#" method="POST">
<img src="#" alt="@frenchkebab" />
<textarea name="" id="" placeholder="What's happening?" maxlength="280"></textarea>
<button type="button" aria-label="Upload files">
<!-- icon -->
</button>
<input type="file" multiple accept="image/*, video/*" />
<button type="button" aria-label="Search GIFS...">
<!-- icon -->
</button>
<button type="button" aria-label="Create a poll">
<!-- icon -->
</button>
<button type="button" aria-label="Choose emoji">
<!-- icon -->
</button>
<strong aria-label="0 out of 280 characters"></strong>
<button type="button" aria-label="Add another Tweet">
<!-- icon -->
</button>
<button type="submit">Tweet</button>
</form>
</section>
<section>
<h1>Your Timeline</h1>
<ol>
<li>
<article>
<h1>A tweet from 김익명</h1>
<header>
<a href="#"><img src="#" alt="김익명" /></a>
<h2>
<a href="#">김익명</a>
</h2>
<dl>
<div>
<dt>Username</dt>
<dd><a href="#">@anonymouskim</a></dd>
</div>
<div>
<dt>Posted</dt>
<dd><a href="#">Dec 25</a></dd>
</div>
</dl>
<button type="button" aria-label="Options">
<!-- Icon -->
</button>
<div>
<button type="button">
<!-- Icon -->
Show less often
</button>
<button type="button">
<!-- Icon -->
Embed Tweet
</button>
<button type="button">
<!-- Icon -->
Unfollow @anonymouskim
</button>
<button type="button">
<!-- Icon -->
Mute @anonymouskim
</button>
<button type="button">
<!-- Icon -->
Block @anonymouskim
</button>
<button type="button">
<!-- Icon -->
Report Tweet
</button>
</div>
</header>
<p>영어를 더 잘하고 싶다. 그러나 공부를 하고 싶지는 않다. 내 삶의 모든 것이 이런 식으로 망해왔다.</p>
<footer>
<button type="button">
<span class="sr-only">Tweet your reply</span>
<strong aria-label="3 replied">3</strong>
</button>
<button type="button">
<span class="sr-only">Retweet</span>
<strong aria-label="3 retweeted">3</strong>
</button>
<div>
<button type="button"> Retweet </button>
<button type="button"> Retweet with comment </button>
</div>
<button type="button">
<span class="sr-only">Like this tweet</span>
<strong aria-label="100 liked">100</strong>
</button>
<button type="button">
<span class="sr-only">Share</span>
</button>
<div>
<button type="button"> Send via Direct Message </button>
<button type="button"> Retweet with comment </button>
</div>
</footer>
</article>
</li>
<li>
<article>
<h1>A tweet from 김익명</h1>
<header>
<a href="#"><img src="#" alt="김익명" /></a>
<h2>
<a href="#">김익명</a>
</h2>
<dl>
<div>
<dt>Username</dt>
<dd><a href="#">@anonymouskim</a></dd>
</div>
<div>
<dt>Posted</dt>
<dd><a href="#">Dec 25</a></dd>
</div>
</dl>
<button type="button" aria-label="Options">
<!-- Icon -->
</button>
<div>
<button type="button">
<!-- Icon -->
Show less often
</button>
<button type="button">
<!-- Icon -->
Embed Tweet
</button>
<button type="button">
<!-- Icon -->
Unfollow @anonymouskim
</button>
<button type="button">
<!-- Icon -->
Mute @anonymouskim
</button>
<button type="button">
<!-- Icon -->
Block @anonymouskim
</button>
<button type="button">
<!-- Icon -->
Report Tweet
</button>
</div>
</header>
<p>영어를 더 잘하고 싶다. 그러나 공부를 하고 싶지는 않다. 내 삶의 모든 것이 이런 식으로 망해왔다.</p>
<footer>
<button type="button">
<span class="sr-only">Tweet your reply</span>
<strong aria-label="3 replied">3</strong>
</button>
<button type="button">
<span class="sr-only">Retweet</span>
<strong aria-label="3 retweeted">3</strong>
</button>
<div>
<button type="button"> Retweet </button>
<button type="button"> Retweet with comment </button>
</div>
<button type="button">
<span class="sr-only">Like this tweet</span>
<strong aria-label="100 liked">100</strong>
</button>
<button type="button">
<span class="sr-only">Share</span>
</button>
<div>
<button type="button"> Send via Direct Message </button>
<button type="button"> Retweet with comment </button>
</div>
</footer>
</article>
</li>
<li>
<!-- Tweet -->
</li>
<li>
<!-- Tweet -->
</li>
<li>
<!-- Tweet -->
</li>
</ol>
</section>
</main>
<aside>
<header>
<h1>Worldwide trends</h1>
<button type="button" aria-label="Options">
<!-- Icon -->
</button>
</header>
<ol>
<li>
<button type="button" aria-label="Options">
<!-- Icon -->
</button>
<div>
<button type="button">
<!-- Icon -->
This trend is spam
</button>
<button type="button">
<!-- Icon -->
This trend is abusive or harmful
</button>
<button type="button">
<!-- Icon -->
This trend is a duplicate
</button>
<button type="button">
<!-- Icon -->
This trend is low quality
</button>
</div>
<a href="#">
<span>1 · Trending worldwide</span>
<strong lang="ko">프렌치케밥</strong>
<span>100k Tweets</span>
</a>
</li>
<li>
<button type="button" aria-label="Options">
<!-- Icon -->
</button>
<div>
<button type="button">
<!-- Icon -->
This trend is spam
</button>
<button type="button">
<!-- Icon -->
This trend is abusive or harmful
</button>
<button type="button">
<!-- Icon -->
This trend is a duplicate
</button>
<button type="button">
<!-- Icon -->
This trend is low quality
</button>
</div>
<a href="#">
<span>2 · Trending worldwide</span>
<strong lang="ko">프렌치케밥</strong>
<span>100k Tweets</span>
</a>
</li>
<li>
<button type="button" aria-label="Options">
<!-- Icon -->
</button>
<div>
<button type="button">
<!-- Icon -->
This trend is spam
</button>
<button type="button">
<!-- Icon -->
This trend is abusive or harmful
</button>
<button type="button">
<!-- Icon -->
This trend is a duplicate
</button>
<button type="button">
<!-- Icon -->
This trend is low quality
</button>
</div>
<a href="#">
<span>3 · Trending worldwide</span>
<strong lang="ko">프렌치케밥</strong>
<span>100k Tweets</span>
</a>
</li>
<li>
<button type="button" aria-label="Options">
<!-- Icon -->
</button>
<div>
<button type="button">
<!-- Icon -->
This trend is spam
</button>
<button type="button">
<!-- Icon -->
This trend is abusive or harmful
</button>
<button type="button">
<!-- Icon -->
This trend is a duplicate
</button>
<button type="button">
<!-- Icon -->
This trend is low quality
</button>
</div>
<a href="#">
<span>4 · Trending worldwide</span>
<strong lang="ko">프렌치케밥</strong>
<span>100k Tweets</span>
</a>
</li>
<li>
<button type="button" aria-label="Options">
<!-- Icon -->
</button>
<div>
<button type="button">
<!-- Icon -->
This trend is spam
</button>
<button type="button">
<!-- Icon -->
This trend is abusive or harmful
</button>
<button type="button">
<!-- Icon -->
This trend is a duplicate
</button>
<button type="button">
<!-- Icon -->
This trend is low quality
</button>
</div>
<a href="#">
<span>5 · Trending worldwide</span>
<strong lang="ko">프렌치케밥</strong>
<span>100k Tweets</span>
</a>
</li>
</ol>
<footer>
<button type="button">Show more</button>
</footer>
</aside>
<footer>
<a href="#" target="_blank">Terms</a>
<a href="#" target="_blank">Privacy policy</a>
<a href="#" target="_blank">Cookies</a>
<a href="#" target="_blank">Ads info</a>
<a href="#" target="_blank"></a>
<button type="button">
More
<!-- Icon -->
</button>
<div>
<a href="#" target="_blank">About</a>
<a href="#" target="_blank">Status</a>
<a href="#" target="_blank">Businesses</a>
<a href="#" target="_blank">Developers</a>
</div>
<span>© 2019 Twitter, Inc.</span>
</footer>
</body>
</html>
Blockchain Dev Journey