외부문서삽입 - iframe 목적 : 웹페이지에 다른 웹페이지를 삽입하는 방법인 아이프래임은 참 편리하면서도 위험한 방법입니다. 왜냐면 신뢰할 수 없는 사이트에서 악성코드 같은 것을 포함하고 있다면 삽입된 외부소스에서 악성코드가 실행될 수 있기 때문이죠. 이런 문제를 해소하기 위해서 HTML의 최신 버전인 HTML5에서는 샌드박스라는 것을 도입했습니다. 아이프래임으로 삽입된 웹페이지에서 자바스크립트 등이 실행되지 않도록 하는 방법인데요. 아이패래임이 무엇인지, 사용법, 그리고 보안을 개선할 수 있는 새로운 방법을 소개합니다. iframe 어떤 문서 안에 다른 문서의 내용을 그대로 가져오는 기법 iframe 쓰는 방법

모바일 지원 (viewport) 만든 웹 페이지가 스마트폰이나 타블릿 같은 곳에서도 볼만하게 잘 표현 될 수 있하는 방법에 대해 공부합니다. 모바일 화면 수정하는 방법 meta name="viewpoint" content="width=device-width, inital-scale=1.0" : 작은 디바이스에서 최적화 하는 방법

웹개발자도구 웹개발자도구는 웹 개발을 하는데 필요한 여러가지 기능을 모아둔 도구들로 웹브라우저별로 비슷한 기능의 도구를 제공하고 있습니다. 여기서는 HTML 개발과 관련된 부분에 초점을 맞춰서 크롬 개발자 도구를 살펴봅니다. 아래 링크는 크롬 개발자 도구에 대한 자세한 수업으로 연결됩니다. 웹개발자도구 웹 개발을 하는데 있어서 필요한 분석작업, 실시간으로 수정해서 테스팅하는 작업 등을 도와주는 도구입니다. Chrome 웹개발자도구 html코드를 볼 수 있습니다.

정보로서의 HTML 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 웹에 대한 전반적인 분위기, 흐름 등을 공부하게됩니다. 정보로서의 HTML - 글꼴 - font (퇴출됨) font 태그 쓰라고 배우는 태그가 아니라 쓰지말라고 배우는 태그입니다. 의미를 가지고 있지 않고, 시각적인 정보(디자인)입니다. / 가독성x, 파일용량↑ / font size = "8" font의 크기를 정합니다. 1~7 까지 숫자 크기를 결정 할 수 있습니다. font color = "red" font의 색상을 정합니다. 정보로서의 HTML - meta meta 태그 웹 페이지의 내용은 아니지만, 어떠한 데이터를 설명하는 태그 (ex : HTML에 ..

입력양식 - form form(폼) 이란? - 우리가 '로그인, 회원가입을 하거나 물건을 사고, 글을 작성 할 때 입력한 정보를 서버에 전송 할 때 사용하는 "글자를 입력하는 것"들, "선택하는 것"들' 입니다. 사용자가 입력한 정보를 서버로 전송 할 때 사용하는 것들이라고 할 수 있습니다. - 등장시기 : HTML5 input 태그 사용자가 텍스트를 입력 할 수 있는 텍스트 필드가 생깁니다. "text"부분에 "password"라고 치면 ●●●●● 이런식으로 텍스트가 보이지 않게 가려집니다. input type = "submit" 서버로 전송하는 버튼이 생깁니다. form action="http://localhost/login.php" 서버로 전송 할 주소를 적습니다. name = "id" 각각의 필드..

주요태그 - 표 - table table 태그 - (Exel 같이) 구조화된 정보를 표현하고자 씁니다. - 과거에는 레이아웃을 만들 때 이용하기도 하였습니다. - 등장시기 : HTML2 - 테이블을 만들고 싶은 전체 행을 태그로 감싸줍니다. - , 태그로 행을 묶어줍니다. - 테두리를 주고 싶을 때는 border을 이용합니다. 주요태그 - 표2: 구조 테이블을 좀 더 구조화하는 법 (해도 되지만 안해도 됨) : 표의 맨 위에 위치합니다. : thead 안에 위치합니다. 맨 위의 중요한 행을 명시하고 싶을 때 표현합니다. td 태그 대신에 사용합니다. : 표의 중간이 위치합니다. : 코딩 한 부분이 어디든 (결과화면의)표 상에서 가장 아래쪽 위치로 자동으로 내려갑니다. 주요태그 - 표3: 병합 테이블을 병..