HTML 요소를 사용하는 방법

HTML <span> 사용 방법 알아보기 요소.

HTML <span> 요소는 텍스트를 마크업하는 데 사용되는 일반 인라인 컨테이너 요소입니다. 다른 요소 내부에서 자주 사용됩니다.

<span> 텍스트의 일부를 나머지 부분과 다르게 보이게 하는 데 자주 사용됩니다.

예:

<p>My hat is <span style="color:red">red.</span></p>

<span>를 사용할 수도 있습니다. class를 통해 동일한 스타일 속성 값을 공유하는 요소 그룹화 .

예를 들어 레시피를 작성 중이고 특정 색상으로 구성 단어인 텍스트 블록의 모든 단어를 강조하고 싶다고 가정해 보겠습니다.

<p>
  To make my delicious garlic butter you need just four ingredients,
  <span class="ingredient">butter</span>,
  <span class="ingredient">garlic</span>,
  <span class="ingredient">salt</span> and
  <span class="ingredient">black pepper.</span>
</p>

그런 다음 CSS 클래스를 다음과 같이 만들 수 있습니다.

.ingredient {
  color: green;
}

재사용 가능한 클래스 사용의 현명한 점은 요소 단어가 시각적으로 어떻게 보여야 하는지에 대해 마음이 바뀌면 해당 .ingredient에서 스타일을 한 번만 변경할 수 있다는 것입니다. 클래스 및 효과는 모든 <span>에서 발생합니다. 이 클래스를 사용하는 요소입니다.

예를 들어 색상 대신 굵은 글꼴을 사용하여 재료를 강조한다고 가정해 보겠습니다.

.ingredient {
  font-weight: bold;
}

<span> 요소의 일반적인 특성으로 인해 의미가 없는 요소. 따라서 이 요소는 사용하기에 더 적합한 다른 요소가 없는 경우에만 사용해야 합니다.

<span> 요소는 <div>와 유사합니다. , 요소이지만 주요 차이점은 기본적으로 <span> 인라인 요소이고 <block> 블록 수준 요소입니다. 그러나 CSS를 사용하여 요소 기본 스타일을 재정의할 수 있습니다.