1. HTML 블록(blocks)과 인라인(inline) 요소
HTML 요소의 종류에 따라서 블록 또는 인라인으로 표시된다. 블록은 새로운 줄에서 시작되어 갈수있는 한 화면 끝까지 나타난다. 인라인은 새로운 줄에서 시작되지 않고 필요한 만큼만의 넓이를 차지하며 화면에 나타난다.
- 블록(block elements)
| Hello! |
이렇게 새로운 줄에서 시작되서 화면에 갈 수 있는 한 끝까지 표시된다. 블록요소에 해당하는 태그는 다음과 같다.
: <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
- 인라인(inlie elements)
I want to say
| "Hello!" |
to you!
(가로로 써지면 좋았겠지만) 암튼, "Hello!"처럼 지정된 구역에만 적용되는 요소가 있다.
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
이 중에서 주요한 것 몇 가지만 살펴보자.
- <div>
HTML 요소를 담는 상자로 문서를 구분지어주는 역할로 생각하면 된다. style, id, class등의 속성을 보통 함께 사용하기도 한다.
<div style="background-color:indigo; color:white; padding: 5px;">
<h2> Korea </h2>
<p> Korea is ... </p>
</div>
- <span>
<div>가 큰 전체 영역을 설정했다면, <span>은 특정한 영역만 설정하는 것이다. 역시 style, id, class등의 속성을 보통 함께 사용하기도 한다.
<h1> What is <span style="color: indigo;"> span</span>?</h1>
2. HTML 계층(class) 속성
Class를 계층이라고 해석하는게 맞을지, 종이라고 하는게 맞을지, 부류라고 하는게 맞을지... 모르겠지만 계층이 가장 나은거 같다. 같은 특징을 지니고 있는 요소들을 class로 묶고 같은 스타일을 부여해 줄 때 사용한다. 예를 들어, 동일한 스타일을 반복적으로 사용하지 않고 <style>에 정의하면 여러번 쓸 필요 없이 각 헤딩마다 사용할 수 있다.
- 블록 요소에 class적용하기
class로 지정할 요소를 스타일에서 적용하는데, 이 때 '.클래스 이름' 형식으로 적는다.
<html>
<head>
<style>
. cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Seoul</h2>
<p>Seoul is the capital of South Korea</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France</p>
</div>
</body>
</html>
클래스는 여러개 지정할 수 있으며, 클래스 이름을 조합할 수도 있다.
<style>
.cities {
background-color: orange;
color: white;
}
.main {
text-align: center;
}
</style>
... <h2 class="cities main"> Korea </h2>
- 인라인 요소에 class 적용하기
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h2> Seoul is the <span class="note"> capital </span> of Korea</h2>
<p> What other <span class="note"> cities </span> you know of Korea?</p>
</body>
</html>
'디지털 노마드를 꿈꾸며 > HTML' 카테고리의 다른 글
| HTML 헤드: 타이틀, 스타일, 링크, 메타, 스크립트, 베이스 (0) | 2020.03.19 |
|---|---|
| HTML 식별속성, 아이프레임, 자바스크립트, 파일경로 (0) | 2020.03.19 |
| HTML 표, 목록 (0) | 2020.03.18 |
| HTML 링크, 이미지, 이미지맵, 배경이미지, 그림요소 (0) | 2020.03.17 |
| HTML 색상, CSS (0) | 2020.03.16 |
댓글