<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML&CSS Basic</title>
<!-- 구글 웹폰트 가져오기 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
<!-- style.css 가져오기 -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 헤더영역 -->
<header>
<h1>HTML & CSS Basics Summary</h1>
<img src="./data/logo.png" alt="HTML5 and CSS3 logo image" />
</header>
<!-- 메인 영역 -->
<main>
<h2>HTML Summary</h2>
<p>
HTML(HyperText Markup Language) is used to define our page content,
structure and meaning. You <span class="bolder">don't</span> use it for styling purposes. Use CSS
for that instead
</p>
<ul id="html-list">
<li class="yellow">HTML uses "elements" to describe(annotate) content</li>
<li>
HTML emements typically have an opening tag, content and then a
closing tag
</li>
<li class="yellow">You can also have void(empty) elements ike images</li>
<li class="yellow">You can also configure elements with attributes</li>
<li>
There's a long list of available elements but you'll gain experience
over time, no worries.
</li>
</ul>
<p>
learn more about all available HTML elements on
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">
the MDN HTML element reference.
</a>
</p>
<h2>CSS Summary</h2>
<p>CSS (Cascading Style Sheet) is used for styling your page content.
<ul>
<li>Styles are assigned via property-value pairs</li>
<li>You can assign styles via the "style" attribute</li>
<li class="yellow">
To avoid code duplication, you typically use global styles(e.g via the "style" element)
instead
</li>
<li>Alternatively, you can work with external stylesheet files which you "lin"k to</li>
<li class="yellow">
When working with CSSm concepts like "inheritance", "specificity" and the "box model"
should be understood.
</li>
</ul>
<p>Learn more about all available CSS properties and values on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">the MDN CSS property reference</a></p>
</p>
</main>
<!-- 푸터 영역 -->
<footer>
<a href="./data/html-css-basics-summary.pdf" target="_blank" >Download PDF Summary</a>
<p>(c)BaeTab</p>
</footer>
</body>
</html>
