TIL -02. HTML tags를 알아보자

이지연·2020년 7월 21일
0
post-thumbnail

HTML에서 태그를 모른다는 건?

xxx안돼요 안돼!XXXX

그 중에서도 헷갈리는 몇가지의 태그가 있다.
나 같은 경우에는 헷갈리는 태그가 있다. 그것과 div태그에 대해 정리를 해보려고 한다.

  1. <span>태그와 <p>태그
  • <span>태그
    1) 주로 텍스트를 넣어준다.
    2) 개행(line break)이 되지 않는다. 한줄로 출력
  • 한줄로 이어서 나오는 요소를 inline-element라 한다.

코드:

<span>오늘은 화장하고 아주 날씨가 굿이다!</span>
<span>코로나만 아니었다면 한강에서 치맥하는 건데...</span>

코드 결과:

오늘은 화장하고 아주 날씨가 굿이다!코로나만 아니었다면 한강에서 치맥하는 건데...

그렇다면 <p>태그를 어떨 것 같나요?

1)<span>와 마찬가지로 주로 텍스트를 넣어줍니다.

한 가지 다른 점이 있다면!?
2)p는 paragraph의 줄임말과 같이 문단을 통으로 넣을 때 씁니다.
그렇게 때문에 줄바꿈이 일어납니다.

코드:

<p>오늘은 2020년 07월 21일이다.그리고 화요일이다.</p>
<p>이상하다.금요일같다.</p>

코드결과:

오늘은 2020년 07월 21일이다.그리고 화요일이다.
이상하다.금요일같다.

이렇게 개행을 하냐, 안하냐의 차이로 이 둘의 운명은 나뉜다.

  1. <div>태그

div는 웹 사이트에서 섹션을 나눌 때 사용한다.

*여기서 섹션이 무엇?이라고 생각할 수 있어 짧게 설명하고 가려고 한다.
(https://developer.mozilla.org/ko/docs/Web/HTML/Element/section) -참고사이트

섹션(section)이란?

  • 일반적으로 우리가 알고 있는 컨테이너 요소들이 아니다.
    문서 개요처럼 명시적으로 나열되어 있는 경우에 주로 쓰이고, HTML문서의 독립적인 구획을 나타낸다.
  • 모든 섹션은 제목을 가져야 한다. 섹션 제목을 감춰야 하는 경우는 hidden속성을 이용한다.
  • 섹션은 <div> 태그와 <span>태그가 있다.
profile
Everyday STEP BY STEP

0개의 댓글