Blog Content

예제를 통해 설명하겠습니다. 기본 자바스크립트 선언 방법입니다. JavaScript 선언 할 때 JavaScript 버전별로 선언 할 수 있습니다.(1.2버전을 추천) 주석문 사용 예제 입니다. 경고 대화상자 표시 방법입니다. 이중 재일 많이 사용하는 방법은 첫번째 입니다.

태그내에 자바스크립트 정의 하는 예제 입니다. 기본 에 버튼 모양위에 마우스 포인터가 올라가면 색상이 바뀌고, 마우스 포인터가 버튼 밖으로 나가면 원래 색으로 돌아오도록 하는 예제입니다. 에 JavaScript 언어 사용, On이 앞에 붙은 속성은 JavaScript 명령어입니다. onclick="윈도우 메세지 박스를 나타냄" onmouseover="마우스가 해당 영역에 들어 왔을때의 스타일 지정" onmouseout="마우스가 해당 영역에서 나갔을때의 스타일 지정" 한번 확인해보세요.

자바스크립트 코드를 외부에 작성하여 불러오기가 가능합니다. ( CSS의 외부스타일시트과 같은 방법 ) 기본예제입니다. 경로지정입니다. js파일은 자바스크립트 명령어만 들어올 수 있습니다. 외부경로로 js파일을 생성후 js파일에 자바스크립트 명령어를 입력합니다. 예) window.alert("외부에 자바스크립트 코드 사용"); document.write("메시지박스 출력 후 문서 영역에 출력");

자바스크립트 언어로 작성하도록 하겠습니다. JavaScript에서는 Document 메서드의 Write 함수를 사용하여 문장을 출력 할 수 있습니다. document.write("안녕하세요");

자바스크립트란 자바의 기능을 그대로 응용하면서, 간편하고 쉽게 프로그래밍을 할 수 있도록 한 언어입니다. ( 사용자 이벤트 처리를 위한 언어, 스크립팅(Scripting)언어 ) 장점 : 빠른 개발, 별도의 프로그램 설치 없이 프로그램작성, 서버에 부담을 덜 줌 단점 : 디버깅과 개발도구 부족, 코딩 오류를 쉽게 찾을 수 없다. 에 JavaScript를 작성하는 예제입니다. 안녕하세요 반갑습니다 또 만나요 사용자 이벤트 처리로 "또 만나요" 문장 클릭시 메세지 박스를 나타내는 방법입니다.

color : 전경색(Foreground Color) background-color : 배경색 font-size : 글자크기, pt 단위 또는 px 단위, 9pt, 11px font-family : 글꼴, Verdana, '맑은 고딕' font-family : "Malgun Gothic", verdana; font-weight:bold; : 볼드체 font-style:italic; : 이탤릭체 text-decoration : 밑줄관련 none, underline, overline, line-through width : 가로길이, % 단위 또는 px 단위 height : 세로길이 padding : 안쪽 여백 margine : 바깥쪽 여백 text-align : 수평 정렬 left, center, right..

레이어(Layer)에 대해 알아보겠습니다. 레이어(Layer)는 HTML문서상의 또다른 문서(객체)로 속성으로는 Position : 그리드레이아웃(absolute), 플로우레이아웃(atatic) absolute : 자신의 영역과 겹쳐 보이게 함 Z-Index : Int 레이어 순서지정 Visibility : Visible(보여주기) / Hidden(숨기기) Display : 레이어 감추기 -> Display : none; Overflow : 스크롤사용 -> Visible(보임), hidden(숨김), Scroll(사용), Auto(자동) 레이어 예제 결과 화면입니다. ( 예제1~4까지 작성, 주석으로 설명 추가 )

를 이용하여 레이아웃 설정을 통해 프레임형식 웹을 표현해 보겠습니다. 부분에 아이디값을 정하고 스타일 설정을 하겠습니다. #아이디이름 {길이, 색상, 테두리, 여백설정}으로 설정하도록 하겠습니다. #header { width:770px; height:50px;background-color:Yellow; border:groove 1px silver; padding:5px 5px 5px 5px; margin:0px 0px 10px 0px; } #left{ width:180px; height:100px; background-color:Yellow; border:groove 1px silver; padding:5px 5px 5px 5px; margin:0px 10px 0px 0px;float:left; } #c..

이미지 위치를 지정/정렬 하여 이미지 옆에 문장을 입력, 이미지 크기 만큼 문장을 줄 단위로 입력 가능하게 해주는 방법으로 속성으로float, clear속성 두가지가 있습니다. float 속성 : 배치할 위치(이미지에 많이 사용됨)를 표시해주는 속성으로 이미지 옆에 문자열을 넣어 이미지 옆에 붙게 되며 나머지 문장은 아래로 내려가게 할때 사용되는 속성입니다. FLOAT : left, right, none clear 속성 : 해제방향입니다. 이미지 박스의 좌우에 떠다니는 box의 다음줄로 내려가게 하는것입니다. CLEAR : left, right, both,none 예제1) 기본속성 예제2) float:left, clear:both 사용 문장문장 현재 모든 웹 사이트는 테이블 사용을 안합니다. 많이 사용하..

'XHTML'에서 사용된 리스트(목록)관련 스타일을 'CSS2.0'로 작상하는 예제입니다. CSS 문법 예제1 C# ASP.NET Silverlight 예제2 C# ASP.NET Silverlight CSS 문법에서는 들여쓰기 조절이 가능합니다. 다음 CSS 문법으로 블릿기호 변경이 가능합니다. 

자신만의 스타일 시트를 작성하는 방법입니다. CSS2.0 - 02.외부스타일시트 강좌와 같이 (파일).CSS 연결 시켜주면 CSS 파일 안에 작성된 스타일시트로 연결된 해당페이지의 스타일이 바뀌게 됩니다. 이 방법을 활용하게 되면 작업을 할때마다 스타일을 지정해 주지 않아도 되며, 손쉽게 자신이 사용하는 스타일로 적용가능하게 됩니다 예제는 body 안에 있는 모든 폰트 크기와 글꼴체 변경입니다. 스타일시트를 생성하신 후에 다음과 같이 입력합니다. body { color:#3366FF; font-size=15px; font-family:@맑은 고딕; } 저장 후 링크를 걸 html(htm)파일을 생성후 다음과 같이 입력합니다. 나만의 스타일 파일 안에 다른 예제 있습니다. 참고하세요

스크롤바의 스타일을 지정하여 자신만의 스크롤바를 만들 수 있습니다. scrollbar 3dlight-color : 스크롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리에 색상 arrow-color : 화살표 박스의 화살표색상 base-color : arrow, shadow, darkshadow를 제외한 기본적인 곳 darkshadow-color : 스크롤박스, 화살표 박스의 하단, 오른쪽 가장 자리 색상 face-color : 스크롤 박스와 화살표 박스 그리고 트랙의 표면 highlight-color : 왼쪽 가장 자리의 겉 색상 shadow-color : 스크롤 박스, 화살표 박스의 하단과 오른쪽의 그림자 부분 스크롤바 스타일 변경 예제 입니다. 실제 적용한 화면입니다. 입력해보세요~ 스크롤바 스타일 적..

링크 스타일 지정하는 방법입니다. A : link{ 스타일 } : 처음 방문 링크 색상 A : visited { 스타일 } : 방문 후 링크 색상 A : active { 스타일 } : 클릭하는 순간의 색상 A : hover { 스타일 } : 링크에 마우스 포인터 올려놨을때의 색상, 테두리 스타일 예제입니다. 준철이 블로그

마우스 커서의 모양을 바꿔 줄 수 있습니다. style속성은 cursor이며, 값은 default, auto, help, crossha, pointer, wait, text, move 가 있습니다. 예제로 바로 확인 할 수 있습니다. 기본값 자동으로 커서 설정 도움말 표시 손모양 모래시계 텍스트 움직임 실행후 문자열에 마우스 포인터를 이동하시면 커서 모양이 바뀌는것을 확인 할 수 있습니다.

Element의 배경색이나 무늬를 지정할 수 있습니다. - background-color : 색 이름 / RGB값 - background-image : url("URL") / none - background-repeat : repeat / repeat-x / repeat-y / no-repeat - background-position : top / bottom / left / right / center - background-attachment : fixed / scroll 예제 입니다. 배경 no-repeat로 하면 한번 만 보여주겠다.(repeat-x,repeat-y;) background-attachment:fixed;와 scroll로 바꿀수 있다. fixed는 이미지 고정시켜서 스크롤을 내려도 이..