Content

Content (콘텐츠)

원하는 CSS 클래스를 쓸 수 없거나, HTML 태그를 직접 쓰고 싶을 때 content를 컨테이너로 사용해요. 거의 모든 HTML 태그를 처리할 수 있어요. WYSIWYG 등으로 만들어진 콘텐츠를 스타일링할 때 유용한 단일 클래스예요.

출처: 문서

본문

원하는 CSS 클래스를 쓸 수 없거나, HTML 태그를 직접 쓰고 싶을 때 content를 컨테이너로 사용해요. 거의 모든 HTML 태그를 처리할 수 있어요.

• <p> 문단
• <ul>/<ol> 리스트
• <h1>부터 <h6>까지 제목
• <blockquote> 인용문
• <pre>와 <code>
• <table> 테이블

이 content 클래스는 텍스트를 작성하고 싶은(또는 작성할 수밖에 없는) 어떤 상황에서든 사용할 수 있어요. 예를 들어 지금 읽고 계신 이 문단에도 사용되고 있어요.

전체 예시 (Full example)

다음은 지원되는 모든 HTML 태그를 보여 주는 content 요소의 예시예요.

<div class="content">
  <h1>Hello World</h1>
  <p>
    Lorem ipsum[1] dolor sit amet, consectetur adipiscing
    elit. Nulla accumsan, metus ultrices eleifend gravida.
  </p>
  <h2>Second level</h2>
  <p>
    Curabitur accumsan turpis pharetra augue tincidunt blandit.
    Quisque condimentum maximus mi, sit amet commodo arcu rutrum id.
  </p>
  <blockquote>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </blockquote>
  <h3>Third level</h3>
  <ul>
    <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
    <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
  </ul>
  <ol>
    <li>Aliquam nec felis in dolor vulputate dignissim.</li>
    <li>Integer non nisi lectus, vel varius massa.</li>
  </ol>
  <h4>Fourth level</h4>
  <pre><code>iAmSomeCode;</code></pre>
  <table>
    <thead>
      <tr>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>

이 예시는 제목(h1~h6), 문단, 인용문, 정렬/비정렬 리스트, 코드 블록, 테이블처럼 content 안에서 사용할 수 있는 모든 전형적인 HTML 태그의 스타일을 보여 줘요. content 안에 넣으면 이러한 태그들이 더 이상 브라우저 기본 스타일이 아니라 Bulma의 타이포그래피 스타일을 따르게 돼요.

더 알아보기 (Learn more)

• Title 요소
• Table 요소