[html] <p>와 <div>의 차이점은 무엇입니까?

Html / 글쓴이

<p>와 <div>의 차이점은 무엇입니까?

그것들을 서로 바꿔서 사용할 수 있습니까? 응용 프로그램은 무엇입니까?

답변

이전 코드는

<p class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></p>

그래서 나는 그것을

<div class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></div>

쉬운 수정이었습니다. 위 코드의 CSS는

.item {
    position: relative;
    border: 1px solid green;
    height: 30px;
}

.item .name {
    position: absolute;
    top: 0px;
    left: 0px;
}

.item .price {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

따라서 div 태그에는 다른 요소가 포함될 수 있습니다. P는 그렇게하도록 강요해서는 안된다.

답변

그들은이 의미 론적 차이 – <div>소자는 반면, 데이터의 컨테이너를 묘사하도록 설계 <p>요소는 콘텐츠의 단락을 설명하기 위해 설계된다.

시맨틱은 모든 차이를 만듭니다. HTML은 마크 업 언어로, 마크 업 소비자에게 의미있는 방식으로 컨텐츠를 “마크 업”하도록 설계되었습니다. 대부분의 개발자는 문서의 의미가 기본 스타일이며 브라우저가 이러한 요소에 적용되는 렌더링이라고 생각하지만 그렇지 않습니다.

컨텐츠를 마크 업하도록 선택한 요소는 컨텐츠를 설명 해야합니다. 어떻게 보이는지에 따라 문서를 표시하지 마십시오. 문서를 기반으로 표시하십시오.

일반 컨테이너가 필요한 경우 순전히 레이아웃 목적그런 다음을 사용하십시오 <div>. 콘텐츠 단락을 설명하는 요소가 필요한 경우을 사용하십시오 <p>.

참고 : 그것은 중요 둘 것을 이해 <div>하고 <p>있는 블록 수준 요소 대부분의 브라우저가 비슷한 방식으로 그들을 치료하는 것을 의미는.

답변

모든 좋은 대답이지만 아직 언급하지 않은 한 가지 차이점이 있습니다. 이것이 브라우저가 기본적으로 렌더링하는 방식입니다. 주요 웹 브라우저는 <p>단락 위와 아래에 여백이 있는 태그를 렌더링합니다 . <div>태그는 전혀 어떤 여백없이 렌더링됩니다.

답변

<p> 단락을 나타내며 의미 적 의미가 있습니다.

<div> 단순히 다른 컨텐츠를위한 블록 컨테이너입니다.

안으로 들어갈 수있는 것은 <p>들어갈 수 <div>있지만 그 반대는 사실이 아닙니다. <div>태그는 블록 레벨 요소를 자식으로 가질 수 있습니다.<p>요소는 할 수 없습니다.

Tae HTML DTD를 보라 .

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ELEMENT P - O (%inline;)*            -- paragraph -->

답변

두 요소 사이의 유일한 차이점은 의미론입니다. 기본적으로 두 요소 모두 CSS 규칙을 표시합니다. block (따라서 블록 수준)이 적용됩니다. 더 이상은 없습니다 (일부 경우 약간의 추가 마진 제외). 그러나, 전술 한 바와 같이, 이들은 시맨틱 측면에서 크게 상이하다.

그만큼 <p>그 이름이 어느 정도 알 수 있듯이 요소는, 단락입니다. 그러므로,<p> 단락 텍스트 블록을 만들 때 사용해야합니다.

<div>이 의미 론적으로 의미가 그리고 당신은 블록 – 필요할 수 있습니다 일반적으로 아무것도 사용할 수 있기 때문에 가장 일반적으로 사람들은 레이아웃 내에서 사용 – 요소는, 그러나, 의미 론적 의미하기 때문에 일반적인 블록 레벨 요소로 사용할 수있는 거의있다 에 대한 레벨 요소.

자세한 내용을 보려면 링크

답변

DIV 는 다른 DIV 요소를 포함하여 다른 블록이나 인라인 요소를 포함 할 수있는 일반 블록 수준 컨테이너이며 P 는 단락 (텍스트)을 래핑하는 것입니다.

답변

W3.org에서 디자인 한 표준을 보는 것이 좋습니다. 주소는 다음과 같습니다. http://www.w3.org/

“DIV”태그는 “P”태그를 래핑 할 수 있지만 “P”태그는 “DIV”태그를 래핑 할 수 없습니다. 지금까지이 차이를 알고 있습니다. 다른 차이점이 더있을 수 있습니다.