HTML 기본 형식 1

 Heading

웹 페이지에 제목을 나타낸다. <h1> 태그부터 <h6> 태그까지 있으며 h 뒤에 숫자가 커질수록 중요도가 낮아진다(글자 크기가 줄어든다)

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

 

Heading은 기본 글자 크기가 정해져 있지만 style을 이용해 사이즈를 변경할 수도 있다.

Paragraphs

<p>태그를 사용한다. 항상 새로운 줄에서 시작한다. 

HTML Display

추가적인 공백은 브라우저가 자동으로 제거해서 화면에 나타낸다.

<hr>, <br>, <pre> 태그

• <hr>: 내용을 분리할 때 사용된다, 수평선을 화면에 나타낸다

  • empty tag이기 때문에 end tag가 없다

• <br>: 새로운 줄에서 시작하게 해준다

  • empty tag이기 때문에 end tag가 없다

• <pre>: 브라우저가 추가적인 공백을 무시해서 나타내기 때문에, 지정된 형식에 맞게 나타내고자 할 때 이 태그를 사용해서 사용자가 원하는 형식이 유지 될 수 있도록 한다

<pre>
    My Bonnie lies over the ocean.

    My Bonnie lies over the sea.

    My Bonnie lies over the ocean.
   
    Oh, bring back my Bonnie to me.
 </pre>

Styles

style attribute를 사용한다. HTML 문서의 내용의 색, 글씨체, 글씨 크기 등을 변경하여 나타낼 수 있도록 한다. 쉽게 말해서 HTML 문서를 꾸밀 때 사용한다.

<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:60px;">I am big</p>

style attribute는 다음과 같은 문법 구조를 가지고 있다

<tagname style="property:value;">
<!--여기서 property와 value는 css value이다 -->

Background color

CSS background-color property(property가 뭔지 모르면 위 style의 문법 구조를 살필 것)가 배경색을 지정해준다.

<pre style="background-color:pink;">

Text Color

CSS color property가 텍스트의 색을 지정해준다.

배경색도 설정하고, 글자 색도 바꾸고 싶다면 value 부분에 이어서 적어주면 된다 (아래 코드 참고)

<h1 style="background-color:powderblue; color: orangered;" >My First Heading</h1>
<p style="background-color:tomato;" >My first paragraph.</p>

위의 코드 실행 결과

Fonts

CSS font-family property 가 사용하고 싶은 글씨체를 지정해준다. 

글씨체 예시:

차례대로 verdana, courier이다

Text Size

CSS font-size property가 글 크기를 지정해준다. 글자 크기를 px로 설정할 때와 %를 이용해서 설정할 때는 다르다.

Text Alignment

CSS text-align property는 수평 정렬을 지정해준다.

• center, left와 right가 있다