HTML파일의 tag(태그)와 id, class 속성

Psj·2020년 10월 20일
0

html/css

목록 보기
3/6

<h1>,<h2>,<h3>,<h4>,<h5>

h는 heading의 앞글자를 딴 태그로 제목같은 것들의 텍스트를 나타낼때 사용하는 태그이다.
                                  <h1>내용</h1>
이렇게 사용을하며 h1 태그가 내용 글자가 가장 크게 표현되고
h1, h2, h3, h4, h5 이렇게 숫자가 커지는 태그일수록 내용의 글자가 순서대로 작게 표현된다.

<span>

                                 <span>내용</span>

<span>태그에는 보통 텍스트를 넣습니다.

<P>

                                   <p>내용</p>

<p>태그의 p는 paragraph의 앞글자를 딴것으로 이 태그 또한 텍스트를 주로 넣는데 문단을 통으로 넣을때 주로 사용합니다.

그렇다면 <span>태그와 차이점이 무엇인가?

<span>이름: 다니엘</span>
<span>직업: 백엔드 개발자</span>

결과

이름: 다니엘직업:백엔드 개발자

<span>태그는 이렇게 코드내에서 줄을 바꿔도 한줄로 나오지만


<p>p태그란 무엇인가?</p>
<p>아자!!</p>

결과
p태그란 무엇인가?
아자!!

<p>태그는 이렇게 줄바꿈이 일어나게 된다.

<a>

<a href="https://naver.com">네이버로 사이트 이동!</a>

<a>태그는 클릭하면 화면을 이동하게 하는 태그로 주로 href속성과 같이 사용하여 웹사이트를 이동하게 사용합니다.

<div>

div태그는 division의 줄임말로 섹션을 나눌때 사용하는 태그입니다.
div태그로 특정 태그들을 감싸면 감싸진 부분은 하나의 섹션이되어 레이아웃의 형태가 위아래로 쌓이는 형식으로 변환됩니다.

id 속성

<p id="name">김개발</p>

id속성은 위와같이 태그중에서 특별히 따로 수정하고 싶은 태그에 이름을 붙여주는것으로 같은이름은 중복으로 사용할 수가 없습니다.

예를들어 개발을하다보면 p태그를 사용될 경우가 정말 많을텐데 김개발이라는 글이 들어간 p태그만 폰트크기나 폰트색상을 변경하고 싶을때 name이라는 특정아이디를 호출하여 해당되는 태그를 수정합니다.

class 속성

<p class="name">김개발</class>

id와 같은 기능을 하지만 class태그는 같은 이름을 중복하여 사용할 수 있다. 그래서 name이라는 이름을 가진 클래스의 속성을 변경하면 같은 name이라는 이름을 가진 모든 클래스의 속성이 변경된다.

profile
Software Developer

0개의 댓글