#3 HTML 태그 (div,span )

 

안녕하세요  HTML 세번째 게시물입니다.

 

1. <div>와 <span>

<div>와 <span>태그를 비교하며 보겠습니다.

둘은 각각 블록과 인라인 성질을 가집니다. 해서 기본적으로 보게되면

 

입력 코드와 실행 결과입니다.

보시다시피 블록형인 div는 한 줄을 전체 사용하기 때문에 줄바꿈이 일어난 것 처럼 보이고

span태그는 인라인형 이기 때문에 줄바꿈이 일어나지 않고 컨텐츠 만큼의 자리를 차지합니다.

 

또 다른 예제를 보겠습니다.

 

역시 코드와 실행결과 입니다. 글은 지코의 아무노래의 가사구요 각각 id를 주고 style을 주었습니다.

border를 넣으면 div같은경우 전체 블록에 border가 들어가게 되는거구요

span같은 경우 본인의 컨텐츠 전부에 border가 들어가게 되네요.

 

 

2. id 와 class

쉽게 말하면 태그에 이름을 붙혀주는 건데요. 거기서 그치지 않고 효과를 주거나 호출할 때 등 사용 가능합니다.

위의 예제에서도 보았듯이 <div>, <span>에 효과를 준 것이 보이시죠? 저렇게 style로 효과를 주는 것도 가능합니다.

 id와 class는 앞으로 포스팅 해가면서 보도록 하죠.

 

 

 

여기까지입니다.

고생하셨습니다.