scoped 속성 (style)

정의

scoped 속성은 style 요소가 작성된 부모의 하위 요소에만 스타일을 적용시킬 수 있습니다. scoped 속성을 사용하는 style 요소플로우 컨텐츠의 범주에 속하게 되고 플로우 컨텐츠에 사용 할 수 있지만, 다른 style 요소와 요소 간 공백 이외에 다른 플로우 컨텐츠는 허용되지 않습니다.

속성 값

불리언 속성입니다.

예제

<html>
  <head>
    <title>인기 만화</title>
    <style>
      body { background-color:white;color:black;}
      h1 { font-size:2em;color:blue;}
      p { line-height:1.5;}
    </style>
  </head>
  <body>
    <section>
      <h1>나루토</h1>
      <p>불의 나라의 나뭇잎 마을의 수장인 호카게를 목표로 열심히 수련하는 소년 닌자 우즈마키 나루토(16)를 중심으로 그려진 닌자 액션 만화. 이 만화에서 묘사되는 닌자는 일본의 일반적인 닌자와는 조금 다른 분위기이며, 만화 중 묘사되는 닌자의 술법 또한 화려한 스케일로 그려져 있다.</p>
    </section>
    <section>
      <style scoped>
        h1 { color:red;}
        p { line-height:1.7;}
      </style>
      <h1>원피스</h1>
      <p>해적 몽키 D. 루피는, 바다를 탐험하며 동료를 모으면서 해적왕을 목표로 한다. 루피가 결성한 밀짚모자 해적단은 전통적인 해적과 달리 마을을 약탈을 하지 않는다. (주인이 없는 물품을 줍거나, 다른 해적단을 약탈하는 경우는 있다.) 루피와 그 동료들은 각자의 꿈과 목적을 가지고 있으며 그것을 이루기 위해 바다를 여행하고 있다.</p>
    </section>
  </body>
</html>

예제의 실행 화면은 두번째 섹션의 제목은 빨간색, 문단은 1.7의 줄간격을 가지게 됩니다.

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요.

 
html5/attribute/scoped_style.txt · 마지막 수정: 2013/11/19 13:35 (외부 편집기)
이 레퍼런스는 클리어보스가 제작/운영하고 있으며, 다음의 라이센스를 따릅니다 :CC 저작자표시-비영리-동일조건변경허락 2.0
Recent changes RSS feed World Wide Web Consortium Driven by DokuWiki