1. HTML styles
스타일 속성은 style="property:value;"의 형식으로 쓴다.
property에 해당하는 것은 background-color, color(텍스트 컬러), font-family, font-size, text-alignment가 있다.
HTML 문서의 배경색을 바꾸는 방법은 opening tag에 style="background-color=color;"를 삽입한다.
<body style="background-color=blue;">
<p style="backgrond-color=red;">
폰트를 바꾸고 싶다면 역시 opening tag에 style="font-family=verdana;"를 삽입한다.
<body style="font-family=verdana;">
<p style="font-family=verdana;">
텍스트의 크기를 바꾸고 싶다면 opening tag에 style="font-size=number%;"를 삽입한다.
<body style="font-size:100%;">
<p style="font-size:50%;">
텍스트 정렬을 변경하고 싶다면 opening tag에 style="text-align:center;"를 삽입한다.
<body style="text-align:center;">
<p style="text-align:center;">
2. HTML 텍스트 형식(text formatting)
Text formatting은 진하게 표시하는 것(bold), 기울게 표시하는 것(italic) 등 텍스트에 변화를 주는 기능이다. closing tag까지 달아주는 것 잊지 말기!
- <b> - Bold text
- <strong> - Important text
- <i> - Italic text
- <em> - Emphasized text
- <mark> - Marked text
- <small> - Small text
- <del> - Deleted text
- <ins> - Inserted text
- <sub> - Subscript text
- <sup> - Superscript text
<b>, <strong>요소는 bold, strong을 뜻하며 글자체를 굵게 한다.
<p>This is <b>bold</b> text</p>
<p>This is <strong>strong</strong> text</p>
<i>, <em>요소는 italic, emphasize를 뜻하며 글자 기울이게 변화를 준다.
<p>This is <i>italic</i> text</p>
<p>This is <em>emphasize</em> text</p>
하지만 같이 표현된다 하더라도 굳이 다른 요소로 존재하는 이유가 있다. 각각을 사용하는 목적에 주목하자. 글자체 자체의 변화를 주는 요소로 <b>, <i>를 사용하지만, <strong>, <em>을 쓴 부분은 '중요한'요소를 강조하고자 하는 것이다.
<small>, <mark>, <del>, <ins>요소는 각각 텍스트를 작게, 형광펜 표시, 글자 중간에 가로줄, 밑줄로 표시된다.
<p>this is <small>a small text</small></p>
<p>this is <mark>a marked/highlighted text</mark></p>
<p>this is <del>a deleted/removed text</del></p>
<p>this is <ins>an inserted/added text</ins></p>
<sub>, <sup>요소는 각각 아래첨자, 위첨자 적용을 의미한다.
<p>this is <sub>subscripted text</sub></p>
<p>this is <sup>superscripted text</sup></p>
+느낀점
지금 완벽하게 모든 요소, 태그들을 암기한다고 해도 그게 의미가 있을까? 실제로 활용해 보면서 하다보면 익혀질까? 시험을 위해서 지식을 습득했던 시간이 익숙했던 만큼 자율적으로 지식을 습득하는 지금의 과정들이 가끔 낯설때가 있다. 내가 제대로 하고 있는게 맞나? 이렇게 쭉 하면 될까? 얼마 하지도 않았는데 또 고민을 하고 있는건가? 싶고. 아무튼 그냥 하자 우선.
'디지털 노마드를 꿈꾸며 > HTML' 카테고리의 다른 글
| HTML 색상, CSS (0) | 2020.03.16 |
|---|---|
| HTML 인용 요소, 코멘트, (0) | 2020.03.15 |
| HTML 헤딩, 헤드, 문단 (0) | 2020.03.14 |
| HTML 편집기, 기초, 속성 (0) | 2020.03.14 |
| HTML을 위한 첫 걸음: 뜻, 요소, 태그, 웹 브라우저 (0) | 2020.03.13 |
댓글