Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ko/docs/Web/HTML/Reference/Elements/div below:

<div>: ì½˜í…ì¸ êµ¬ë¶„ 요소 - HTML: Hypertext Markup Language

Baseline Widely available

HTML <div> 요소는 플로우 콘텐츠를 담는 일반적인 컨테이너입니다. CSS를 통해 직접 스타일을 적용하거나 플렉스박스 같은 레이아웃 모델이 부모 요소에 적용되지 않는 한, 해당 요소 자체는 콘텐츠나 레이아웃에 아무런 영향을 주지 않습니다.

<div class="warning">
  <img
    src="/shared-assets/images/examples/leopard.jpg"
    alt="An intimidating leopard." />
  <p>Beware of the leopard</p>
</div>

.warning {
  border: 10px ridge #f00;
  background-color: #ff0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.warning img {
  width: 100%;
}

.warning p {
  font: small-caps bold 1.2rem sans-serif;
  text-align: center;
}

"순수한" 컨테이너로서 <div> 요소는 본래 아무런 의미를 갖지 않습니다. 대신, 콘텐츠를 그룹화해서 class나 id 속성을 사용해 쉽게 스타일을 지정하거나, lang 속성을 사용해 문서의 일부가 다른 언어로 작성되었음을 표시하는 등의 용도로 사용됩니다.

이 요소는 전역 특성을 포함합니다.

참고 :>align 속성은 더 이상 사용되지 않는 구식 속성이므로 사용하지 않습니다. 대신, <div> 요소를 정렬하거나 배치할 때는 CSS Grid나 CSS Flexbox 같은 CSS 속성이나 기술을 사용하는 것이 좋습니다.

• <div> 요소는 <article>나 <nav> 같은 다른 시맨틱 요소를 사용할 수 없는 경우에만 사용해야 합니다.

<div> 요소는 암시적으로 generic의 역할을 가지며, none이 아닙니다. 이로 인해 특정 역할을 가진 자식 요소가 있어야 제대로 동작하는 일부 ARIA 조합 선언에서는 영향을 줄 수 있습니다.

<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

이 예제는 <div> 요소에 CSS 스타일을 적용해 그림자 박스를 만듭니다. "shadowbox"라는 스타일을 적용하기 위해 <div>에 class 속성을 사용한 점에 주목하세요.

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

• 시맨틱 구획 요소: <section>, <article>, <nav>, <header>, <footer>
• 문장 콘텐츠에 스타일을 적용할 수 있는 <span> 요소

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4