분류 전체보기 (144) 썸네일형 리스트형 2024.08.26. JS - 익명함수사용, onload 이벤트, 라디오-체크박스 값출력 * 스크립트 코드 실행 시점문제- html 파일내에 있는 img 태그의 1.jpg 사진을 스크립트를 실행하여 2.jpg로 바꾸려고 하는데 실행이 안됨. test3.jsp /* test3_study.js */function myFunction(){ document.getElementById("img1").src = "../images/2.jpg";}문제점 : => 현재 test3.js 파일을 로딩하는 위치가 태그 내이므로 현재 스트립트가 실행되는 시점에는 태그 내의 요소들이 로딩되기 전이다. => 따라서, 해당 요소들에 접근하는 코드사용시 요소에 대한 객체가 없으므로 null 값이 리턴되고 이 객체에 접근하기 위한 코드가 실행 될때 null 값을 통한 접근이 불가능하여 오류 발생함. => img1 객.. 2024.08.26.클래스, 인스턴스 * 클래스 정의- 객체를 나타내는 (생성하는, 찍어낼) 설계도! - 표현하려는 대상 객체의 이름을 지정하여 클래스를 정의함.- 클래스 내의 멤버변수는 인스턴스 생성 시 각 인스턴스마다 별도의 공간을 할당 => 이때, 각 멤버변수는 자동으로 기본값으로 초기화가 수행됨. - 클래스 내의 메서드는 인스턴스 생성 후 호출을 통해 작업을 수행하게 됨. - 클래스 정의 후에는 반드시 인스턴스화를 통해 메모리 상에 실제 객체를 생성해야 함. [ 기본문법 ] [접근제한자] class 클래스명 { 멤버변수(= 객체의 정보를 저장할 변수 = 속성 = 필드) 생성자(= 객체 생성 시 객체의 정보를 초기화하는 역할) 메서드(= 객체의 수행할 동작 = 기능) }*클래스의 구성요소1. 멤버변수(필드) .. 2024.08.23. CSS - 목록 스타일 * 목록 표시 스타일 변경 3가지 속성1. 목록 표시 변경 속성 : list-style-type 속성 list-style-type: none; /*square-사각,disc-검은원,circle-빈원,none-없음2. 목록 표시를 이미지로 변경하는 속성 : list-style-image 속성 list-style-type: none; /*none, upper-alpha-대문자 알파벳,upper-alpha 대문자 로마자 등등.3. 목록의 들여쓰기 변경 속성 : list-style-position 속성 - CSS 에서 이미지 가져오기 : url("경로") 함수사용 list-style-image: url("image2/dot.png"); - 목록 들여쓰기 속성 지정 .. 2024.08.23. CSS - 바깥쪽 여백(margin)과 안쪽(padding) 여백 div { background-color: red; width: 200px; height: 200px; /* 위아래는 10px이고 오른쪽 왼쪽은 auto로 맞춰라.= 중간으로 보내라.*/ margin: 10px auto; }#d1 { background-color: green; font-size: 5em; font-weight: 900; border: 3px solid black; /* 안쪽에 여백이 늘어나면서 상자가 커지게 된다. */ padding: 40px;}1234 *div는 전체 공간을 차지하므로 한개에 한줄씩 차지한다. (인라인요소)*magin은 바깥쪽 여백이므로 div 끼리 원래 붙어있었는데 10px 만큼 떨어져 버렸다. ** 블럭요소인 im.. 2024.08.23. CSS - 텍스트 관련 스타일 * 텍스트정렬(text-align속성) - text-align: left, right, center, justify;* 줄간격 지정 (line-height 속성) - line-height :em, px, % * 텍스트에 선만들기(text-decoration 속성) : text-decoration: none, line-through(취소선), overline(윗줄),underline(밑줄); - 하이퍼링크에서 밑줄 없앨 때 많이 사용함.* 텍스트에 그림자 만들기 (text-shadow 속성) : -형식)text-shadow: 가로거리 세로거리 번짐정도 그림자 색상 - 수평거리 : 양수 - 오른쪽, 음수 - 왼쪽 .. 2024.08.22. CSS(Cascading Style Sheet), 웹폰트와 아이콘폰트 CSS(Cascading Style Sheet) :HTML 문서에 있는 요소(tag)들에 선택적으로 스타일(서식)을 적용할 수 있는 기능이다. * 사용자 스타일 지정 형식 3가지 : 1.인라인 스타일, 2.내부 스타일, 3.외부 스타일 1. 인라인 스타일 형식 : 간단하게 스타일을 적용2. 내부 스타일 형식 : 적용할 스타일들을 문서내부에 한곳에 모아놓고 스타일을 적용 head 영역내에 style 태그로 지정 내부 속성 지정 형식)선택자 { 속성1: 속성값1; 속성2:속성값2...... }3. 외부 스타일 형식 : 적용할 스타일들을 문서외부에 별도의 파일(*.css)로 저장해 놓고 필요한 HTML 문서(파일)로 가져와서 스타일 적용 외부 스타일 연결 형식) * CSS 기본 선택자 (selec.. 2024.08.21. HTML - input 타입속성 9) input type 속성 : file 속성값(파일 첨부할 때 사용하는 업로드 창을 삽입) 10) input tag 주요속성 1. autocomplete 속성 : 폼이나 요소에 자동완성 기능의 지원여부를 지정. 형식) autocomplete = "on/off" 2. autofocus 속성 : 페이지가 로드 될 때 특정 폼 요소에 자동으로 커서가 표시(get focus)디도록 지정 3. placeholder 속성 4. readonly 속성 5. required 속성11) textarea tag : 여러 줄을 입력하는 텍스트 영역을 만듦 12) select, option 태그 : 드롭다운목록(drop down list)을 만들 .. 2024.08.14. JS - event [ 대표적인 이벤트 종류 ]1) click : 마우스 클릭, dblclick : 마우스 더블클릭 2) mouseover : 마우스가 대상 위에 위치(= mouseenter 유사) mouseout : 마우스가 대상에서 빠져나감(= mouseleave 유사) 3) focus : 대상이 선택됨(= 포커스가 위치함), blur : 대상 선택이 해제됨(= 포커스 잃음) 4) change : 대상 선택이 해제될 때(포커스 잃음) 대상 요소의 값(value 속성값)이 변경됨 5) load : 대상 요소가 로딩 완료됨, onload : 대상 요소 로딩 해제됨 6) keydown : 키보드의 키 누름, keyup : 키보드의 키 뗌, keypress : 키보드의 키 누름 7) submit : 폼 데이터 전송(su.. 이전 1 2 3 4 5 6 7 ··· 18 다음
