본문 바로가기

Programing/HTML5

HTML5 추가 기능 현시점에서 최신 웹 기술인 HTML5에 추가된 기능에 대해 몇가지 정리. video tag HTML5 이전에는 video를 브라우저에 담을 표준이 없었으며 youtube와 같은 동영상 페이지는 flash와 같은 플러그인을 이용하여 동영상을 웹페이지에서 재생하곤 하였으나, HTML5에 video tag가 등장함으로서 플러그인 없이 동영상 재생이 가능하게 됨. : control속성을 이용하여 재생 설정 가능 (자세한 내용은 사용할때 document 참조.) : 브라우저마다 지원하는 코덱이 다르기때문에 여러 확장자의 동영상을 삽입해 주어야 함. CanIUse(http://caniuse.com/) : 새롭게 도입된 기술들은 모든 웹브라우저에 적용되는 것이 아니라 웹브라우저마다 지원하는 종류가 달라짐. 따라서 해.. 2016. 9. 18.
iframe 정리 웹페이지에 다른 웹페이지를 삽입하는 방법. 편리하지만 악성코드를 갖고있는 신뢰할 수 없는 외부 사이트가 실행되면 자동으로 악성코드가 실행 될 수 있기 때문. 이러한 문제를 위해 HTML5에서는 샌드박스라는것을 도입하여 삽입된 웹 페이지에서 자바 스크립트 등이 실행되지 않도록 차단함. 다음과 같은 방식으로 iframe tag를 사용 할 수 있으며, 속성값으로 아래과 같이 sandbox라는 속성을 부여하면 iframe으로 호출한 사이트에서 보안을 위협할 수 있는 내용의 실행을 방지해줌. ** 보안을 위협할 수 있는 내용이라고 하면 form tag로 데이터를 전송하는 것이나, javascript를 이용하여 보안에 위협이 될만한 행동을 할 수 있기때문에 해당 동작을 sandbox라는 속성으로 막아줌. (HTML.. 2016. 9. 17.
모바일 지원(viewport) 현재 자신이 작업한 웹 페이지가 모베일에서 어떻게 보이는 확인하기 위해서는 (Chrome에서) F12를 눌러 개발자 도구를 실행시면 각각의 장치마다 해당 웹 페이지가 어떻게 보이는지 화면을 확인 할 수 있다. html의 head 하위에 meta tag로 아래와 같이 viewport를 추가하면 처리 가능 위와 같이 처리하면 각 장치의 화면 크기에 맞추어 웹페이지를 표시하도록 도와 준다. 각각의 페이지 사이즈마다 웹페이지의 구성을 다르게 하는것은 CSS에서 처리해야할 사항. 2016. 9. 17.
HTML 기초 스터디 Note 웹 홈페이지를 구성하는 언어. 웹 페이지에서 F12를 누르면 생성되는 개발자모드에서 현재 페이지의 HTML 코드를 확인할수 있다. HTML의 경우 웹프로그래밍의 시작이며 문법이 어렵지않아 쉽게 배울 수 있음. HTML파일을 생성하는 방법메모장에서 HTML로 생성할 수 있으며 HTML파일을 생성하려면이름에 .html확장자를 붙여 준다. (이름.html )모든 확장자를 선택해 준다. (*.*)인코딩은 UTF-8 (인코딩을 UTF-8로 맞추는 정확한 이유는 잘 모르겠지만, 웹페이지 개발시 인코딩이 잘못되어 글씨가 깨지는 경우를 많이 봐 왔기에)위와 같이 생성된 파일을 실행하면 자동으로 인터넷창으로 파일이 열리고 작성된 내용을 확인 할 수 있다. 이후에 수정한 Tag를 확인 하려고 하면, 생성한 Html 파일의.. 2016. 9. 15.