[HTML5] 8장 그밖의 추가된 속성

HTML5에서는 기존의 태그들에 유용한 속성들을 추가시키거나 삭제시켰는데 그 중에 몇가지를 살펴봅니다.

IFRAME

<iframe> 요소는 콘텐츠 삽입에 많이 이용되는데, 새로운 속성 추가로 인해 보안성을 높였다.

sandbox 속성

새로 추가된 sandbox 속성을 iframe에 지정하면 해당 프레임에 삽입되는 페이지에 다음과 같은 제한을 둘 수 있다.

• 실제 존재하지 않는 도메인(오리진)에 속한 것으로 간주함. 따라서 자신이 소속된 도메인과도(allow-scripts에 의해 실행이 가능해져도) 통신할 수 없음
• 플러그인 실행금지
• 자바스크립트 사용금지
• 폼 요소에 의한 페이지 호출금지

<iframe sandbox src="/"></iframe> <!-- 읽기 전용의 단순 웹페이지 -->

위의 제한이 너무 엄격하여 iframe 안의 페이지가 동작하지 않을때는 sandbox 속성에 다음과 같은 값을 지정하여 샌드박스 제한을 완화할 수 있다.

• allow-forms : 폼 요소로 페이지를 호출할 수 있음
• allow-scripts : 자바스크립트를 사용할 수 있음, 그러나 윈도우 팝업 iframe 요소 삽입을 금지
• allow-same-origin : 같은 도메인에 소속된 리소스를 이용할 수 있음 (서버와의 통신, 스토리지 이용등)

<iframe sandbox="allow-scripts allow-forms" src="/"></iframe>

seamless 속성

seamless 속성을 지정하면 iframe에 삽입한 웹페이지는 그 부모가 되는 페이지의 일부처럼 동작한다(자바스크립트,css 모두 부모로부터 물려 받는다). 부모 페이지의 css를 적용받고 프레임 안의 링크를 클릭하면 프레임 안의 페이지가 아닌 부모 페이지가 전환된다. 웹페이지의 일부를 지연 로딩하고 싶을때 등에 효과적 (페이지 전체가 전환)

<nav>
    <iframe seamless src="/"></iframe>
</nav>

iframe 사라진 속성

scrolling, align, frameborder, marginheight, marginwidth, longdesc

A요소와 PING 속성

하이퍼링크 요소 <a>와 <area>에 새롭게 ping 속성이 추가되었다. ping 속성을 이용하면 사용자가 클릭한 링크의 정보를 서버로 자동으로 송신할 수 있다.

<a href="index.html" ping="/track.php">홈으로</a>

서버로 보내질 http요청의 상세한 사양

• post 메소드 사용
• Content-type 헤더 값은 "text/ping"
• 요청보다는 'ping' 이라는 문자열
• Ping-Form 이라는 헤더에 현재 페이지의 주소가 포함됨
• Referer 헤더에 현재 페이지의 주소가 포함됨
• Ping-To 라는 헤더에 링크 주소가 포함됨
• ping 송신 대상 서버가 링크를 가진 페이지의 도메인과 같을때 Refer 헤더는 포함되지 않음
• ping 송신 대상 서버가 링크를 가진 페이지의 도메인과 다를때
  • 링크를 가진 페이지가 HTTPS에 의해 접속되었다면 Ping-Form과 Refer는 포함되지 않음
  • 링크를 가진 페이지가 HTTPS에 의해 접속되지 않았다면 모든 헤더가 포함됨

서버측에서 이러한 ping 요청을 받을수 있으면 사이트 내에서의 사용자 행동을 추적할 수 도 있다. 이전에는 이러한 기능을 HTTP 리다이렉트로 구현했는데, 링크 주소를 포함한 하이퍼링크 URL을 동적으로 생성하고 그 링크를 클릭하면 서버측에서는 어떤 링크를 클릭했는지 기록하고 나서 목적지로 페이지를 리다이렉트 하는 방식이였다.

<!-- /track.php에서 처리한 후 index.html로 리다이렉트 -->
<a href="/track.php?linkTo=index.html">홈으로</a>

리다이렉션에 비해 ping 속성이 좋은점

• 링크 URL이 목적지 페이지를 직접 가리킬 수 있으므로 사용자가 알기 쉽다
• ping이 보내지는 것을 브라우저가 사용자에게 알려줄 수 있다
• 하이퍼링크 기능을 유지하면서도 사용자가 ping 통지 기능을 사용하지 않을수 있다
• 브라우저가 링크 페이지를 미리 읽는 등의 방법으로 네트워크 대역을 효율적으로 이용할 수 있다

STYLE SCOPED

범위를 한정하여 스타일을 적용할 수 있게 하며 그 효과가 부모 요소와 자식요소에 대해서만 적용된다.

<h1>페이지 제목</h1>
<section>
    <style scoped>
    h1 {font-style:italic}
    </style>
    <h1>섹션 제목</h1>
</section>

style요소 안에서는 @import를 이용하여 외부 스타일 시트를 읽어들일 수도 있으므로 잘 이용하면 css 모듈화를 보다 효율적으로 수행할 수 있을것이다.

ASYNC와 DEFER

async 속성은 페이지가 로드될때 비동기로 스크립트를 읽어 온다. 페이지는 스크립트가 로드되건 말건 로드가 되며 스크립트는 스크립트대로 다 로드되면 작동할 수 있는 상태가 된다.

<!-- ad.js를 비동기로 읽어들임 -->
<script async src="ad.js"></script>

한 가지 단점으로 페이지가 로드되자마자 작동해야 하는 스크립트가 있을 경우 페이지가 이미 로드되었는데 스크립트가 아직 로드되지 않고 있다면 이것은 문제가 된다. defer 속성은 비동기로 스크립트 파일을 다운로드하여 웹페이지의 파싱이 완료된 다음 스크립트를 실행한다. async 속성을 지원하지 않는 브라우저 중에서도 defer 속성을 지원하는 것들이 있으므로 파싱을 방해하지 않고 스크립트를 읽어들이고 싶을 때에는 async와 defer 둘 중 어느 것이라도 지정해두면 도움이 된다.

<script async defer src="ad.js"></script>

async가 지원되지 않을때 ad.js를 비동기로 읽어들인 다음 바로 실행함. async는 사용할수 없으니 defer가 지원될 때 ad.js를 비동기로 읽어들인 다음 페이지 파싱이 끝나면 실행한다. 둘 다 지원되지 않을 때 ad.js의 로딩과 실행이 바로 이루어짐(파싱정지).