2. HTML Tag(p, br, ul, li)와 style 속성

생활코딩 강의를 바탕으로 쓴 글입니다 :)

 

P 태그와 br 태그

<h1>p tag VS br tag</h1>
<p>
  태그 없이 글을 쓰게 된다면 줄바꿈을 해도 적용되지 않습니다. 그래서 태그를 이용해 줄바꿈을 적용해
  봅시다.
</p>
<p>
  p는 paragraph의 약자입니다. 즉 하나의 문단을 만들 때 사용합니다. 태그 내에서 줄바꿈을 하면 적용이
  될까요??
</p>
<p>
  br은 원하는 위치에서 줄바꿈을 할 때 사용합니다. 특징은 닫는 태그가 없습니다. 닫는 태그란 위
  문단에서 p 태그의 끝에 있는 /p가 없다는 뜻입니다.
</p>

 

위 코드를 실행한 화면입니다. p 태그 내에서 줄바꿈을 해도 적용이 되지 않는 것을 확인할 수 있습니다.

하지만 각각의 p 태그마다 줄바꿈이 적용되는 결과를 확인할 수 있습니다.

 

 

br태그는 위의 설명처럼 닫는 태그가 없습니다.

<p>
br 태그에 대해 알아봅시다. 저는 이 다음 문장에서 줄바꿈을 하고 싶습니다.
<br>이렇게 br태그를 사용하면 줄바꿈이 적용됩니다.
</p>

p 태그 내에서 엔터키를 이용해 줄바꿈을 해도 적용이 되지 않았지만,

아래 사진을 통해 br 태그를 통해 줄바꿈을 할 수 있는 것을 확인할 수 있습니다.

 

style 속성

<h1>style 속성</h1>
<div>
  style은 태그의 스타일을 변경할 때 사용합니다. 스타일 변경은 3가지로 할 수 있습니다.
  <ul>
    <li>html 각 태그의 style 속성 이용</li>
    <li>html head 안에서 style 속성 이용</li>
    <li>css 파일을 이용한 style 변경</li>
  </ul>
</div>

 

style 속성과 함께 새로운 태그가 등장했습니다.

우선 style 속성은 태그의 스타일을 변경할 때 사용합니다.

태그의 스타일이란 마진, 배경색, 글자 크기, 위치 등을 프로그래머가 원하는 대로 변경할 수 있습니다.

style을 적용한 태그를 확인하고 ul, li 태그를 알아보도록 하겠습니다.

 

<div>
  태그 내에서 style 속성을 이용해 보겠습니다.
  <p style="margin: 50px">margin을 적용한 문단입니다.</p>
</div>

결과를 보면 'margin을 적용한 문단이 상하좌우로 공백이 생긴 것을 확인할 수 있습니다.

더 자세히 보기 위해 개발자 도구를 활용해보도록 하겠습니다.

 

크롬 창에서 F12버튼을 누르면 개발자 도구가 나오게 됩니다.

그 후 ctrl + shift + c 를 누르거나 빨간 박스를 클릭 후 margin을 적용한 문단에 마우스를 갖다 대 보겠습니다.

위와 같은 화면을 확인할 수 있습니다.

상하좌우로 여백이 생겼으며, 우측 화면에는 margin 이라는 공간에 50이라는 숫자가 적혀 있습니다.

제가 style 속성을 이용해 margin: 50px을 주었기 때문에 위와 같은 결과를 얻게 되었습니다.

 

ul 태그와 li 태그

ul 태그는 unordered list의 약자로 순서가 없는 리스트를 만들 때 사용합니다.

그리고 ul 안에 li 태그가 있습니다.

li 태그는 항목들을 나열할 때 사용하며, list의 약자입니다.

위의 코드를 작성했을 때 나오는 결과 중 ul과 li 부분입니다.

ul이기 때문에 순서가 없는 list로 작성 되었으며, 각 항목 앞에 점들이 생기게 됩니다.

만약 순서를 나타내고 싶으면 어떻게 하면 될까요??

 

바로 ol 태그를 사용하면 됩니다.

ol 태그는 ordered list의 약자로 순서를 나타낼 때 사용합니다.

ol 태그를 사용해 보겠습니다.

<div>
  <ol>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
  </ol>
</div>

이처럼 ol 태그를 사용하면 ul과 달리 항목마다 숫자가 매겨지게 됩니다.

만약 다른 숫자부터 시작하고 싶다면 start 속성을 이용해 원하는 숫자를 집어 넣으면, 해당 숫자부터 번호가 매겨지게 됩니다.

<ol start=10>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
</ol>