HTML - div태그 (블록)과 span태그 (인라인) - 멀티미디어 (4)

HTML - div태그 (블록)과 span태그 (인라인)

멀티미디어 (4)

 오늘은 div태그 (블록)과 span태그 (인라인)에 

대해서 알아 보도록 하겠습니다.

태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)

먼저 HTML에서 

div태그 (블록)과 span태그 (인라인)란?

div태그 (블록)는 과 span태그 (인라인) 는 웹 사이트를 만드는데

무조건 적으로 필요한 태그 입니다.

먼저 div 내용입니다.

div 같은 경우 divide 의 약자로 페이지를

논리적인 세션으로 분리하는데 사용이 되는데  블록 또는 컨테이너라고 설명 하기도 합니다.

예를들어 아래와 같은 h1 태그와 p 태그가 있다고 칠때

<h1> 긴냥 </h1>

<p> 안녕하세요 저는 긴냥 입니다. </p>

이때 위 와 같은 태그 h1 태그와 p 태그를 논리적인 세션으로

묶고 파란색 경계선을 그리고자 할때 어떠한 태그로 h1 태그와 p 태그를

묶어야 하는 이러한 태그를 div 라고 하며 사용법은 아래와 같다.

<div style="border: 3px solid blue">

<h1> 긴냥 </h1>

<p> 안녕하세요 저는 긴냥 입니다. </p>

</div> 

위 이미지는 코드를 그대로 작성 후  html 편집 툴로 웹브라우저로 출력한 모습 입니다.

div 태그로 h1태그와 p태그를 감싼후 div 태그에 style(스타일)이라는 속성을

이용해 선 크기 3px, border(선), 색상 blue (파란) 색을 넣어 div가

어느 정도의 영역을 잡는지 확인해 보았습니다. 

여기서 위 와 같은 속성 style(스타일) 은/는 모든 태그에 적용이 가능 합니다.

이러한 것을 태표적으로 "인라인 스타일" 적용 방식이라고 하는데 이 내용은 

추후에 css (스타일시트)를 본격적으로 다룰때 차차 설명 하도록 하겠습니다. ^^

이 다음 span 태그 입니다.

span 태그는 인라인 요소이며 텍스트를 위한 컨테이너로 사용이 가능 합니다.

예를 들어 바로 위 div 코드 안 텍스트에 어느 부분만 

텍스트 색상을 바꿔서 표시 해보도록 하겠습니다.

<div style="border: 3px solid blue">

<h1> 긴냥 </h1>

<p> 안녕하세요 저는 <span style = "color: blue;">긴냥 <span> 입니다. </p>

</div> 

위 와 같은 코드 작성후 웹브라우저에서 출력을 해보았습니다.

"안녕하세요 저는 긴냥 입니다" 라는 텍스트 중 긴냥 이라는 단어에 span 태그를 작성 후

아까와 같이 style (스타일)이라는 속성을 이용해 글자색을 파란 색으로 변경해 보았습니다.

여기까지 div태그 (블록)과 span태그 (인라인)에 대해서 설명을 해보았는데 

말이 길어지니 조금 어렵게 설명이 된 것 같습니다.

다시 말해 요약해서 보면

div 태그 : 블록 수준의 요소로 html 문서 안에 있는 태그들을 

하나의 컨테이너로 묶어 분활이 가능하게 해주는 태그라고 생각 하시면 될것 같습니다.

(iv태그란 자체적으로 볼때는 특별한 의미가 없는 태그 입니다)

span 태그 : 인라인 수준의 요소로 텍스트를 위한 컨테이너로  이용되며 위 div와 다르게

자신이 필요한 크기만 차지하는 태그 입니다.

(span 태그도 div 태그와 마찬가지 특별한 의미가 없는 태그이며 css를 활용해

텍스트 일부 스타일을 병경 설정 할 떄 주로 사용됩니다.)

여기까지 HTML - div태그 (블록)과 span태그 (인라인)에 대해서 기록해 보았습니다.

다시 한번 말하지만 백번 보는 것 보다 한두번 써보고 실행해 보는것이 이해하기 쉽습니다.

이상 HTML - div태그 (블록)과 span태그 (인라인) - 멀티미디어 (4)에 

관련된 포스팅을 마치도록 하겠습니다.