블록 요소 태그들

3.1 요소 <p>

블록 요소들은 HTML에서 웹 페이지의 구조와 내용을 구성하는 데 사용돼. 콘텐츠를 논리적인 블록과 세그먼트로 나누는 데 도움을 주지. 이 요소들은 새로운 줄에서 시작되고 가능한 모든 너비를 차지해. 자주 사용되는 세 개의 태그를 더 자세히 알아보자: <p>, <div>, 그리고 <span>.

태그 <p>

태그 <p>는 텍스트의 문단을 만드는 데 사용돼. 이건 블록 요소야: 즉, 각 문단은 새로운 줄에서 시작되고 위아래로 여백을 가져.

사용 예제:

    
      <p>
        이것은 첫 번째 텍스트 문단이야. 문단은 텍스트를 논리적인 블록으로 나누어
        가독성을 개선하는 데 사용돼.
      </p>
      <p>이것은 두 번째 텍스트 문단이야. 각각의 문단은 새로운 줄에서 시작해.</p>
    
  

속성:

• 블록 요소: 새로운 줄에서 시작되고 가능한 모든 너비를 차지해.
• 자동 여백: 보통 브라우저는 문단 전후에 여백을 추가해.
• 중첩 불가: 태그 <p>는 다른 블록 요소를 포함할 수 없어.

CSS를 통한 스타일링:

    
      p {
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 15px;
      }
    
  

3.2 요소 <div>

태그 <div>는 다른 요소들을 그룹화하고 스타일을 적용하는 데 사용되는 범용 블록 컨테이너야. 기본 스타일이 없고 순전히 콘텐츠 구조화를 위해 사용돼.

사용 예제:

    
      <div class="container">
        <h2>블록의 제목</h2>
        <p>div 블록 안의 일부 텍스트.</p>
      </div>
    
  

속성:

• 블록 요소: 새로운 줄에서 시작되고 가능한 모든 너비를 차지해
• 다재다능함: 블록과 인라인 요소를 포함한 어떤 요소도 포함할 수 있어
• 스타일링과 스크립트: 종종 CSS 스타일과 JavaScript 스크립트를 적용하는 데 사용돼

CSS를 통한 스타일링:

    
      .container {
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #f9f9f9;
      }
    
  

3.3 요소 <span>

태그 <span>은 인라인 요소로 블록 요소 안에서 부분적인 텍스트나 다른 콘텐츠를 강조하는 데 사용돼. 기본 스타일은 없고 특정 텍스트 부분에 CSS 스타일과 JavaScript 스크립트를 적용하는 데 사용돼.

사용 예제:

    
      <p>이 텍스트는 하이라이트된 <span class="highlight">단어</span>를 포함하고 있으며 나머지 텍스트와 다릅니다.</p>
    
  

속성:

• 인라인 요소: 새로운 줄을 생성하지 않으며 필요한 너비만 차지해
• 유연성: 텍스트나 다른 요소의 특정 부분에 스타일을 적용하는 데 사용돼
• CSS와 JavaScript와 자주 결합: 텍스트의 특정 부분을 정확히 스타일링하거나 조작하는 데 도움을 줘

CSS를 통한 스타일링:

    
      .highlight {
        color: red;
        font-weight: bold;
      }
    
  

3.4 <div>와 <span> 비교

<div>:

• 블록 요소
• 새로운 줄에서 시작해
• 다른 블록과 인라인 요소를 포함할 수 있어
• 콘텐츠를 그룹화하고 구조화하는 데 사용돼

<span>:

• 인라인 요소
• 텍스트 흐름을 방해하지 않아
• 개별 텍스트 부분에 스타일을 적용하는 데 사용돼
• 강조와 JavaScript 작업에 자주 사용돼

<div>와 <span>의 결합 사용 예제:

    
      .article {
        border: 1px solid #ddd;
        padding: 10px;
      }

      .keyword {
        color: blue;
        font-style: italic;
      }
    
  

    
      <div class="article">
        <h2>아티클의 제목</h2>
        <p>
          이것은 강조된 <span class="keyword">단어</span>가 포함된 아티클 텍스트의 문단이야, 이 단어는 주의를 끌기 위해 강조돼.
        </p>
      </div>
    
  

태그 <p>, <div>, 그리고 <span>은 HTML의 기본적인 구성 요소로, 구조화되고 스타일링되며 상호작용하는 웹 페이지를 만들 수 있게 해줘. 그들의 특징을 이해하고 올바르게 사용하는 것은 편리하고 기능적인 인터페이스를 만드는 데 도움을 줘.