HTML 문서를 꾸미기 위해서 사용한 방법
HTML 문서에 정보를 태그들을 사용하여 나열하고 보니 글자의 크기나 색상 혹은 글씨체 등을 변경하기를 원했고 CSS가 아직 태어나기 전에 사용되었던 방법이다.
#. 기본 사용 방법
<태그명 style="속성명:값;">
*마지막 세미콜론은 한 문장을 마무리하는 점 이라고 보면된다.
01. Background Color (배경색)
<body style="background-color:powderblue;">
<h1>제목의 배경색 변경</h1>
<p>내용의 배경색 변경</p>
</body>
📍출력물
제목의 배경색 변경
내용의 배경색 변경
02. Fonts (글꼴)
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
📍출력물
This is a heading
This is a paragraph.
03. Text Size (글자 크기)
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
📍출력물
This is a heading
This is a paragraph.
글씨 크기를 지정할때는 크기를 지정하는 어떤 값이든 입력이 가능하다.
04. Text Alignment (글자 정렬)
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:right;">Right Aligned paragraph.</p>
📍출력물
Centered Heading
Right Aligned paragraph.
기본값은 왼쪽(left) 정렬이다.
05. Font Color (글자 색상)
<h1 style="color:#123456;">색상 변경된 제목</h1>
<p style="color:tomato;">Centered paragraph.</p>
📍출력물
색상 변경된 제목
색상 변경된 내용.
Tips.
위에 기재된 속성들은 5가지 이지만 사실상 CSS 의 속성들을 알고 있다면 스타일과 관련된 모든 속성들을 사용할 수 있다. 우리는 이와같이 html 문서의 태그안에 기재하는 ‘스타일’속성을 내부 스타일이라고 부른다.
⭐️지난 포스팅에 이어서 html 문서에 정보를 작성할 때 여러가지 스타일을 주어서 강조거나 꾸밀 수 있도록 해주는 태그들에 대해서 알아보았습니다.
