티스토리 뷰
HTML에서 사용하는 스타일 특성(attributes)
HTML 태그의 스타일을 설정하는건 style 특성을 사용하면 할 수 있습니다.
style 특성은 아래와 같은 문법을 따릅니다.
<tagname style="property:value;">
이 style attribute에서, property는 CSS의 property이고, value는 CSS의 value입니다.
배경색 바꾸기(Background Color)
style의 color라는 특징은 HTML의 배경을 바꿉니다. 사용법은 다음과 같습니다.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>위 태그로 문서를 작성하면, 브라우저의 뒷배경이 하늘색으로 바뀝니다.
powderblue와 같은 140가지의 표준 색상명이 아닌, HEXA Code로 된 색상도 추가가 가능합니다.
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
글자 색상(Color)
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>폰트(Font)
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>폰트 크기(Font Size)
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>정렬(align)
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>Chapter Summary
- Use the style attribute for styling HTML elements
- Use background-color for background color
- Use color for text colors
- Use font-family for text fonts
- Use font-size for text sizes
- Use text-align for text alignment
Text Style을 지정하는 태그들
<b> - 진하게
<strong> - 강조(진하게랑 같은듯)
<i> - 이탤릭채(기울여쓰기)
<em> - 강조된 텍스트(기울여쓰기)
<mark> - 형광펜 칠하기
<small> - 작은 텍스트
<del> - 취소선
<ins> - 밑줄
<sub> - 아래첨자
<sup> - 윗첨자인용(Citation)을 하는 방법
짧은 인용
짧은 인용을 하는 방법엔 <q> tag를 사용하는 방법이 있습니다. <q> tag를 사용하면 <q>TEXT</q>의 TEXT 양 옆에 인용부호가 붙게 됩니다.
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
문단 들여쓰기 인용
문단을 들여쓰기해서 인용하고 싶은 경우엔 <blockquote>를 사용하면 됩니다. blockquote엔 cite attribute를 사용할 수 있는데, cite attribute는 인용한 페이지나, 어디에서 인용했는지를 기록하는 용도입니다.
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>축약어(abbreviation) 인용구
WHO같은 축약어 사용할 때, 마우스를 위에 대면 tooltip을 표시해 해설을 달 수 있는 기능입니다.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
주석(Comments)
<!-- Write your comments here -->
'개발 > HTML,CSS' 카테고리의 다른 글
| HTML Paragraphs(문단) (0) | 2019.07.03 |
|---|---|
| HTML Heading(제목) (0) | 2019.07.03 |
| HTML의 특징 (0) | 2019.07.03 |
| HTML 소개 (0) | 2019.07.03 |
댓글