CSS란 Cascading Style Sheets의 약자이다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다. HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같다. 인라인 스타일(Inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 인라인 스타일(Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다. 인라인 스타일을 이용하여 스..

input 요소의 속성 input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있다. value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정한다. 이름 : 학번 : 학과 : readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정한다. disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점이다. 이름 : 학번 : 학과 : disabled 속성 disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정한다. disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없다. 또한, readonly..

웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form요소를 사용한다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다. method 속성 method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠진다. GET 방식은 주소에 데이터(data)를 ..

HTML 레이아웃(Layout) 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소이다. HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있다. div 요소를 이용한 레이아웃 HTML5 레이아웃 table 요소를 이용한 레이아웃 div 요소를 이용한 레이아웃 div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 자주 사용된다. div 요소를 이용한 레이아웃 HEADER 영역 NAV 영역 SECTION 영역 FOOTER 영역 HTML5 레이아웃 HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공한다. 이러한 요소들을 의미(se..

iframe을 사용하지 말아야 할 이유 보안 위험을 유발한다. iframe을 사용하여 구성 요소를 구현하면 사이트 간 공격(XSS)에 취약해진다. 사용자의 개인 데이터를 피싱하여 제출할 수 있는 악의적 인 웹 양식을 얻을 수 있다. 악의적인 사용자가 플러그인을 실행할 수 있다. 악의적인 사용자가 원본 사이트 URL을 변경할 수 있다. 악의적인 사용자가 사용자의 클릭을 도용 할 수 있다. 악의적인 사용자가 사용자의 키 입력을 가로챌 수 있다. 사용성 문제를 일으킨다 iframe 태그는 사용성 문제를 자주 일으킨다. 브라우저의 "뒤로가기"버튼을 간헐적으로 작동되지 않게 한다. 사용자를 혼란스럽게하여 새로운 브라우저 창에서 iframe 내용이 갑자기 열린다. iframe 내의 콘텐츠를 연산한 후 frame에서..

iframe 요소 iframe이란 inline frame의 약자이다. iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다. iframe 요소는 frame 요소와는 달리 종료 태그가 존재한다. 또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정된다. iframe 요소의 테두리 변경 iframe 요소는 기본적으로 검정색 테두리(border)를 갖는다. 이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있다. 테두리를 표현하고 싶지 않으면 style 속성에서 border 속성값을 none으로 설정하면 된다. iframe 요소의 페이지 변경하기 태그를 이용하면 iframe 요소의 최초 페이지를 중간에 ..