05. div / span (영역관련 태그)

div 태그 ★★★★★(외울것!)
- HTML문서에서 부분 또는 섹션을 정의하기 위한 블록요소로 활용됨
- 주로 다른 태그를 감싸는 컨테이너(요소안에 요소가 있는 형태)로 활용됨
- 블록태그로써 감싸면 한줄이 자동으로 띄어지는 효과가 있음.(newline / br)
- 주로 CSS나 JavaScript에서 조작하는 객체로도 활용됨

 

div 영역지정 1

 

<div style="border: black solid 1px ;">블록영역입니다.</div>

 

div 영역지정 2 : 높이,넓이 지정하기

<div style="border: black solid 1px ; width: 300px; height : 100px;">블록영역입니다.</div>

 

div 영역지정 3 : 정렬기능 활용하기

<div style="border: black solid 1px ; width: 300px; height : 100px; text-align: center;">가운데정렬 블록영역입니다.</div>
    <div style="border: black solid 1px ; width: 300px; height : 100px; text-align: right ;">오른쪽정렬 블록영역입니다.</div>
    <div style="border: black solid 1px ; width: 300px; height : 100px; text-align: left ;">왼쪽정렬 블록영역입니다.</div>

 

div 영역지정 4 : 색상 지정하기

    <div style="border: black solid 1px ; background-color: aquamarine; color: coral; width: 300px; height : 100px;">
        배경색은 아쿠아마린이고, <br>글자색은 코랄입니다.
    </div>

 

 

---

span태그
- 문서의 인라인 요소를 그룹화 하는데 사용
- span 으로 감싼 영역은 줄바꿈되지 않고, 가로로 나열 시킬수 있다.

 

 

span영역 지정 1

 

  <span style="border : 1px solid;">스팬은 인라인 요소입니다.</span> 이곳은 일반영역입니다. <br>
    <span style="color: blueviolet;">일반 컨텐츠에서 분리된 영역을 만들수있습니다</span> 이곳은 일반영역입니다

 

span영역 지정 2 :  높이/너비 지정_안되는경우 (특징) 그냥은 안된다!

<span style="border : 1px solid; width: 100px; height: 100px;">
        스팬은 인라인 요소입니다.
    </span> 이곳은 일반영역입니다. <br>

 

 

 

span영역 지정 3 :  높이/너비 지정_되는경우 (특징) 그냥은 안된다!

display : inline-block 속성을 추가하여 inline요소를 block으로 변경해야 너비/높이 지정가능!

<span style="border : 1px solid; width: 200px; height: 100px; display: inline-block;">
        스팬은 인라인 요소이지만, 블록으로 전환된 영역입니다!
    </span> 이곳은 일반영역입니다. <br>

 

 

 

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."