본문 바로가기

HTML

(20)
JSP - 액션태그 액션 태그(Action Tag) XML 형식으로 코드를 기술하는 문법 액션 태그의 종류 1. 표준 액션 태그 include와 forward가 있음. bean 관련 태그(중요!!!) 2. 커스텀 액션 태그 별도의 라이브러리를 설치(포함)해야만 사용할 수 있는 태그 (대표적으로 JSTL) 예) 표준 액션의 include menu.jsp 오늘의 메뉴 - 두부보쌈 - 로제 파스타 - 김치찌개 - 연어 초밥 - 참치볶음밥 DateTime.jsp 오늘의 날짜 : 현재의 시간 : inputNum.jsp 첫 번째 수 : 두 번째 수 : fourRules.jsp result.jsp 덧셈 결과 : 뺄셈 결과 : 곱셈 결과 : 나눗셈 결과 : > 덧셈 결과 : null 뺄셈 결과 : null 곱셈 결과 : null 나눗셈 ..
Javascript(5) - innerHTML 과 innerText 차이점/DOM /id속성으로 요소를 선택/태그 이름으로 선택/클래스속성으로 선택/css 선택자를 활용하여 선택/요소 속성 변경/속성값 바꾸기/브라우저 객체 모델/(Brow.. innerHTML 과 innerText 차이점 버튼을 눌렀을 때 div 영역에 내용을 출력하는데 사용하는 프로퍼티 innerHTML, innerText 눌러요 태그를 문자열에 입력하면 태그로 인식해서 태그에 맞게 출력됨 태그를 입력해주어도 문자열 그대로 받아드려서 문자열 그대로 출력됨 DOM 요소 선택자 HTML 문서의 요소(들) 선택을 위해 사용 선택 방식 id속성으로 요소를 선택 - getElementById('id') 태그 이름으로 선택 - getElementsByTagName('div') 클래스속성으로 선택 - getElementsByClassName('class') css 선택자를 활용하여 선택 - querySelector('.class') 단점 : 같은 클래스를 갖는 요소를 선택할 경우 get..
Javascript(4) - 객체(Object)/Date 객체/문서 객체 모델(Document Object Model, DOM)/문서 객체 생성/이벤트 처리/이벤트 키워드/야구 전광판 프로그램 실습문제/자판기 실습문제 1. 객체(Object) 변수 + 메소드 = 객체 Date 객체(가장 많이 활용되는 객체) var 변수 = new Date();//기본 형태 var 변수 = new Date(밀리초);//입력한 밀리초를 날짜로 변환 var 변수 = new Date(날짜문자열);//"Jun 01, 2020 06:10:11" var 변수 = new Date(년, 월, 일, 시, 분, 초, 밀리초); 2. 문서 객체 모델(Document Object Model, DOM) - 웹 문서를 메모리로 읽어 들여 트리구조로 변환 - 문서의 각 요소(element 또는 tag)는 요소 노드(element node), 텍스트 노드(text node)로 변환하여 처리 - 이 트리 구조를 사용하여 자바스크립트로 문서를 제어 1. 문서 객체 생..
Javascript(3) - 배열/배열에 데이터 입력 방법/배열에 공백 입력 방법/배열에 숫자, 문자열 혼합하여 입력/배열을 활용한 자료구조/배열용 함수들/ 1. 배열(array) 여러개의 데이터(원소)를 저장하는 공간 인덱스 : 0번 부터 시작. 자바스크립트의 배열은 다른 타입의 데이터도 함께 저장할 수 있음!! 크기를 지정하지 않는다. 공백 리터럴도 포함할 수 있음. 2. 배열에 데이터 입력 방법 1. 배열에 데이터 입력 방법 1) var 배열명 = [원소1, 원소2, ...]; ▶ 배열의 길이 : 배열명.length 2. 배열에 데이터 입력 방법 2) var 배열명 = []; 배열명[0]= 원소1; 배열명[1]= 원소2; 3. 배열에 공백 입력 방법 공백도 데이터로 입력됨 -> 데이터형은 undefined 비어있는 배열에 인덱스를 지정해주고 값을 넣어주면 해당 배열 인덱스에 값이 들어가게됨. 4. 배열에 숫자, 문자열 혼합하여 입력 데이터가 숫자인지 문..
Javascript(2) - 변수의 타입/자바스크립트 변수/명명 규칙/데이터 유형/자바스크립트 연산자/자바스크립트의 제어문/자바스크립트 함수(Function)/Hoisting (호이스팅)/전역변수/지역변수/매개변수/파.. 전체코드 variable.html 1. 자바스크립트 변수 - 명명 규칙 문자(알파벳), 밑줄('_'), 달러기호('$')로 시작 대소문자 구분 한글도 사용 가능 (하지만 영문자 권장) 데이터 유형 기본형 number(숫자), string(문자열), boolean(진리값), array(배열), object(객체), null(값이 없음), undefined(정해지지 않음) 객체형 변수의 타입을 확인하는 키워드 : typeof array와 object는 모두 object 타입임. 변수 선언 키워드 var 은 생략 가능. 단, 지역 변수와 전역 변수를 구분지을 경우에는 사용하는 것이 좋다. -> var 키워드는 생략하지 않는 것이 좋다! 한글로 변수 생성 가능하고, 여러개 동시에 선언 또한 가능 위 사진처럼 홍..
Javascript(1) - 자바스크립트/html에서 javascript 출력 방법/document.write()/element.innerHTML()/alert()/console.log()/confirm('메시지')/prompt('메시지') 자바스크립트를 쓰는 이유 : 웹문서를 좀더 동적으로 표현하기 위해서 그리고 웹브라우저에서 실행되니 서버의 과부하를 막을수 있다. 또 HTML 문서내에 포함돼 사용하기 편하고 배우기 쉽다. 속도가 빠르다는 장점이있다. 전체 코드 in-out.html 출력 방법 1. html 문서에 출력 - document.write() 출력 2. html 요소에 출력 - element.innerHTML() 출력 버튼 누르면 여기에 출력됨 3. 대화상자(경고창)에 출력 - alert() 출력 4. 개발자 도구의 콘솔에 출력 - console.log() 출력 입력 방법 1. 확인/취소 대화상자로 입력 - confirm('메시지') 입력 2. 입력(문자열) 대화상자로 입력 - prompt('메시지') 입력 입력이 여기에 출력됨..
HTML(13) - 변환효과/전환 속도 함수/줄간격/요소의 전환 효과/폰트/글꼴/그라디언트 효과/그라데이션 transform-2d.html 1번 박스 2번 박스 3번 박스 4번 박스 5번 박스 timing-function linear ease ease-in ease-out ease-in-out line-height.html 줄간격 조절 line-height : normal 기본 줄간격을 사용한 단락입니다. 대부분의 브라우저 간격은 글자 크기의 110%에서 120%정도 입니다. line-height : 1.6(권장 줄간격) 기본 줄간격을 사용한 단락입니다. 이 단락은 기본 줄간격에서 글자 크기의 160%로 지정. line-height : 80% 기본 줄간격을 사용한 단락입니다. 이 단락은 기본 줄간격에서 글자 크기의 80%로 지정. line-height : 200% 기본 줄간격을 사용한 단락입니다. 이 단락은 ..
HTML(12) - 요소 배치/관계를 고려한 배치/float 제거/overflow 발생/넘치는 요소 다 출력/요소의 중첩 처리/표 너비 설정/표 테두리 처리/표 꾸미기/투명도 조절/가시성/보이는 형식의 변환/배경 이미.. position.html 정적 위치(static) 정적 위치 설정 적용1 정적 위치 설정 적용 2 상대 위치 설정 적용 절대 위치 설정 적용 고정 위치 설정 적용 float.html float 속성은 웹 문서의 레이아웃을 설계하는 과정에서 많이 사용하는 속성입니다 float 속성은 특정 요소를 떠 있게 해줍니다. 여기서 '떠 있다'라는 말의 의미는 특정 요소가 기본 레이아웃에서 벗어나 웹 문서의 왼쪽이나 오른쪽에 이동하는 것을 말합니다. float 속성은 복잡한 형태의 레이아웃을 구성하는 데 필요한 핵심 속성으로, 특정 요소가 주변 요소와 자연스럽게 어울리도록 해줍니다. 주의할 점은 float 속성을 사용할 때 요소의 위치가 고정되면 안 되기 때문에 position 속성의 absolute를 사용하면 안 ..