여러가지 html 요소
<em> : emphasize의 약자로 강조하고 싶은 텍스트를 삽입하면 텍스트 음성을 읽을 때 강조 + 텍스트로 bold처리가 자동으로 된다. 강조처리를 하고싶을 때 <span>으로 bold 주는 것 보다 더 권장된다.
<string> : <em>과 비슷하지만 억양이 약간 다르다.
<section> : 문장 구분을 용이하게함
예시코드) 다음과 같은 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<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"
/>
<link rel="stylesheet" href="styles/train.css" />
<meta charset="UTF-8" />
<title>HTML & CSS Basics Summary</title>
</head>
<body>
<header>
<h1>HTML & CSS Basics Summary</h1>
<img src="images/html-css.png" alt="HTML and CSS logos" />
</header>
<main>
<ul>
<h2>HTML Summary</h2>
<h3>
HTML(HyperText Markup Language) is used to define our page content,
structure and meaning. You <span>don't</span> use it for styling
purposes. Use CSS for that instead!
</h3>
<li class="highlight">
HTML uses"elements"to describe (annotate) content
</li>
<li>
HTML elements typically have an opening tag, content and then a
closing tag
</li>
<li class="highlight">
You can also have void (empty) elements like images
</li>
<li class="highlight">
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>
<h3>
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
>
</h3>
</ul>
<ul>
<h2>CSS Summary</h2>
<h3>
CSS(Cascading Style Sheets) is used for styling your page content.
</h3>
<li>Styles are assigned via property-value pairs</li>
<li>You can assign style via the "style" attribute</li>
<li class="highlight">
To avoid code duplication, you typically use global styles(e.g. vai
the "style" element) instead
</li>
<li>
Alternatively, you can work wuth external stylesheet files which you
"link" to
</li>
<li class="highlight">
When working wuth CSS, concepts like "inheritance", "specificity" and
the "box model" should be understood.
</li>
<h3>
Learn more about all available CSS properties and values on
<a href="https://developer.mozilla.org/ko/docs/Web/CSS/Reference"
>the MDN CSS property reference</a
>
</h3>
</ul>
</main>
<footer>
<a href="pdfs/html-css-basics-summary.pdf" target="_blank">Download PDF Summary</a>
<p>(c)Ycs's Page</p>
</footer>
</body>
</html>
다음 코드는 중간에 문장이 어디서 나뉘는지 보려면 <ul/><ul> 부분을 찾아서 문장이 나눠진 부분을 찾아야 한다.
이것 보다는 <section>태그로 나누어 주는 것이 다른 사람이 코드를 볼 때 가독성이 좋다.