[HTML] 📚 <p> <div> <span> 태그정리

태그 : div 태그는 body 문서 안에서 각 영역의 세션을 구분 정의 한다. : 구역을 나누는 태그. 가로줄 전체를 다 차지. 너비가 100% Layout 구조 틀을 만들고 CSS를 통해 위치 및 layer을 구분등 HTML요소의 컨테이너 역할을 한다.

또한 javascript를 통해 특정 작업을 수행하고 여러 유형의 동적인 효과를 줄수도 있다.

: 일반적으로 텍스트에 색칠, 크기, 좌우간격을 조절하는데 사용된다.

: css속성 inline 이 자동으로 적용되어있다.

와의 차이
: block level element (줄 바꿈 O) : inline level element (줄 바꿈 X) display 속성을 사용해서
를 inline 으로 바꾼다던지 을 block 으로 바꾸는 것도 가능은 하다.

Display 요소값의 특징(Block, Inline)
Display 요소는 두개의 특징을 가진다

Block-level Element : 왼쪽에서 오른쪽으로 하나의 가로 영역(Block) 전체를 차지하는 태그들

Inline-level Element : 자기의 고유 영역이 없이 그저 자신이 둘러싸고 있는 내용들의 양에 따라 길이가 결정되어 지는 태그들

Block-level 요소
Block 레벨은 아래 그림과 같이 한 부분을 통째로 블럭처럼 사용하는 것이다.

새로운 Block 요소는 새로운 라인에서 Block을 시작한다.

그래서 두 Block간에는 겹치는 일이 없다.

p-div-span

Block-level 요소 종류는 아래와 같다.

p-div-span
Inline-level 요소
Inline-level 요소는 문단 중간에 들어간다고 생각하면 된다.

새로운 라인에서 시작하지 않는다.

또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

p-div-span

inline 특징을 가지는 태그나 속성값은 아래와 같이 많다.

block vs inline
Hello World에 빨간색 네모박스는 span을 사용한 것이다. 단락을 차지하지않아 중간에 들어가 저렇게 일부분을 꾸밀수가 있다.

p-div-span

vs vs

p-div-span 따라서 문자 정보를 줄바꿈을 하면서 작성해야 할 경우

태그를 사용해야 한다.

반면 줄바꿈 없이 사용 영역만 작성하고 다른 블록 요소 등에 포함되어야 할 경우 태그와 같은 인라인 요소를 사용하면 된다.

은

를 포함할 수 없다.

인라인 요소인 태그는 블록 요소인

태그를 하위 태그로 포함시킬 수 없다.

<span>span 태그
<div>div 태그</div>
<p>p 태그</p>
</span>

p-div-span
코끼리를 냉장고에 넣는 것 처럼 더 작은 영역의 요소인 태그가 더 큰 영역을 가진

태그를 포함하려고 하니 레이아웃이 엉망이 된다.

반면 더 영역이 큰 블록 요소인

와

태그는

인라인 요소인 태그를 포함할 수 있다.

div 태그 span 태그

p 태그 span 태그

p-div-span

는

를 포함할 수 없다.

그럼 같은 블록 요소인

태그의 차이점은 무엇일까?

두 태그 모두 문자 정보를 출력할 수 있으며 블록 요소로 자동 줄바꿈으로 단락이 형성된다.

태그는 문자 정보를 입력하는 단락을 구성한다. 아래와 같이

태그 하위에는 다른 블록 요소가 포함되어서는 안된다.

태그 하위에는 , , 등과 같은 인라인 요소만 올 수 있다.

Hello World!
와 같은 형태가 있다면,
Hello World!
와 같은 형태로 변경해야 한다.

는
를 포함할 수 있다.
태그는
태그 처럼 문자 정보를 입력할 수 있지만, 실제 용도는 HTML 문서의 영역별 구분이다.
각 영역의 용도를 구분하는 기능이므로 다른 블록 요소가 하위에 포함될 수 있다.

예를 들어 웹페이지에서 어떤 영역이 헤더 영역이고, 네비게이션 메뉴 영역, 본문 기사 영역 등의 영역 구분을 할 때
태그를 여러겹 겹쳐서 사용한다.

본문

태그의 영역별 구분이 발전되어서 표현된 값이 , 등의 태그이다.
태그의 목적은 영역 구분이므로 하위에
태그와 같은 다른 블록 요소를 포함할 수 있다.
정리하면, 텍스트 정보는
태그 안에 작성한다.

그 밖의 다른 영역을 나누는 용도는
태그를 중복으로 겹쳐서 사용한다.

Author And Source

이 문제에 관하여([HTML] 📚 <p> <div> <span> 태그정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hhyang986/HTML-p-div-span-태그정리

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[HTML] 📚 <p> <div> <span> 태그정리

Author And Source

좋은 웹페이지 즐겨찾기