[HTML] 정보로서의 html( font / meta / semantic / 모바일 지원 / iframe )

정보로서의 html( font / meta / semantic / 모바일 지원 / iframe )에 대해서 정리한다.

정보로서의 HTML

글꼴 - font ( 퇴출됨 )

  - 태그 사이에 있는 해당 글자를 속성을 이용해 제어할 수 있는 태그이지만 

    현재는 쓰지 않는걸 권하고 있다.

    ( html에서 문서를 표현하는 의미를 가지고 있는 태그라기보단 디자인쪽인 시각적 표현을 하는 태그 )

  - html에서 font와 같이 디자인 관련 태그를 퇴출 시키면서 CSS를 만들었다.

    ( htm과 css로 정보와 디자인을 나누면서 디자인 처리측면도 효율성이 더 발전했다 )

( font 태그는 문서의 의미를 표현하기보단 디자인 측면이라 CSS가 나오면서 쓰지 않는것을 권하고 있다.. )

meta

  - 웹 페이지 자체의 정보를 표현하는 태그

  - 사용자에게 눈에 보이는 정보를 표현하지는 않지만 웹 페이지 자체의 설명을 할때 사용하는 태그로 보통 쓴다.

  - <meta http-equiv="refresh" content="30">과 같이 하면 해당 페이지는 30초마다 새로고침이 일어나게 된다.

( <meta> 태그를 사용하게 되면 사용자에게 시각적 변화를 주진 않지만 웹 페이지 자체의 설명이 적혀있어 

검색을 하는 부분에서 사용이 되곤 한다.. )

semantic( 의미론적 태그 )

  - 웹 페이지에서 사용하는 구조에 의미를 분명히 부여하기 위해서 사용

  - 일반 html 태그들과는 달리 구조의 의미를 표현하는 태그이기 때문에 태그를 적용해도 시각적으로 달라지는점은 없다.

  * semantic elements에 대한 자세한 내용은 아래 해당 링크를 참조

    w3c School Semantic Elements

검색엔진 최적화

  - 태그를 상황에 맞게 사용해서 검색엔진에 대한 최적화가 가능하다.

  - 여기서 핵심은 html 태그의 사용이 검색엔진 최적화에 많은 영향을 미칠수있다는 점이다.

  * 자세한 내용은 아래 해당 문서를 참고

    구글 크롬 검색엔진 최적화 문서

모바일 지원( viewport )

  - 웹 브라우저가 모바일 환경에서 각 디바이스에 화면 크기에 맞게 해당 웹 페이지를 알아서 처리하도록 할때 사용

( 웹 개발자 도구를 통해서 해당 모바일 디바이스에서 웹 페이지가 어떻게 보이는지 미리보기를 통해 볼 수 있고

<meta> 태그를 이용해서 모바일 지원에 관련된 내용을 지원해주면 

모바일에서 좀더 자연스럽게 표현이 된다 )

( name을 viewport로 지정해주고 content에 width=device-width, initial-scale=1.0을 지정해주면

해당 모바일 디바이스에서 가로 길이를 자동으로 맞추고 

처음 페이지가 뜰때 확대 되지않은 정상적 크기의 화면으로 웹 페이지가 보이게 된다. )

외부문서 삽입 - iframe

  - 외부에 있는 컨텐츠를 해당 웹페이지로 가져올때 사용

( test.html에서 다른 외부에 있는 유튜브 동영상을 해당 페이지로 가져온걸 확인할 수 있고

헷갈릴수도 있지만 가져온 페이지는 test.html이 아닌 외부에 다른 페이지이다 )

( 다른 취약점들도 있지만 여기선 간단하게 자바스크립트 코드가 실행된다면 그 취약점으로 인해

보안 위협이 발생될 수 있기 때문에 그걸 알아보기위한 경고창을 띄워주는 코드를 작성한 페이지를 만들었다 )

( test_iframe.html에서 좀전에 실습을 위해 만든 test.html 코드를 iframe으로 가져온 결과를 보면

test_iframe.html 페이지에는 자바스크립트 코드가 없는데도 실행이 되는걸 볼 수 있다..

이 자체는 위협적이지 않지만 이런한점을 이용해서 충분히 보안 위협이 생길 가능성이 있다면 취약점으로 본다... )

( iframe에서 sandbox 속성을 이용하면 위와 같이 아까전과 똑같은 페이지를 가져왔음에도 불구하고

자바스크립트 코드가 실행이 되지 않는걸 볼 수 있다..

sandbox를 이용하면 해당 외부페이지에서 플러그인, 자바스크립트, 폼 요소에 의한 페이지 호출 등이

금지되어 좀더 보안에 도움이 된다 )

* sandbox는 html5가 되면서 추가된 내용이다.