분류 전체보기 (45) 썸네일형 리스트형 [Web] 웹 기초 (9) - JavaScript #2 if문, for문 If 예제 1 정수 하나를 폼으로부터 전달받아 60 이상이면 '합격'을, 60 미만이면 '불합격'을 textarea에 출력하라. IF 정수 하나를 폼으로부터 전달받아 60 이상이면 '합격'을, 60 미만이면 '불합격'을 textarea에 출력하라. 정수 Number( frm.su.value ) : 텍스트 필드에서 가져온 텍스트형 숫자를 실제 숫자값으로 형태변환 If 예제 2 정수 하나를 입력받아 90 이상이면 '전액 장학생' 70 이상이면 '반액 장학생' 70 미만이면 '전액 납부'가 있는 라디오 버튼의 상태값을 변경하시오. if(II) 정수 하나를 입력받아 90 이상이면 '전액 장학생' 70 이상이면 '반액 장학생' 70 미만이면 '전액 납부'가 있는 라디오 버튼의 상태값을 변경하시오. 정수 전액장학생.. [Web] 웹 기초 (8) - JavaScript #1 개요, 사용방법 javascript 개요 인터프리터 언어 (컴파일러가 없음) ⇒ 한줄번역, 한줄실행 실행환경 : 웹 브라우저 (웹 브라우저가 인터프리터를 내장하고 있다) 변수형이 없다. (지역, 전역형 변수는 존재) 지역형 변수 : var 또는 let으로 선언 var : hoisting이 됨. let : hoisting이 되지 않음. hoisting : 사용되기 전에 메모리에 탑재되는 현상 (불필요한 메모리가 들어갈 수 있음) 배열의 크기는 가변적이고, 1차원 배열만 존재한다. (1차원 쪼개서 2차원을 만들 수는 있음) 문장의 끝을 나타내는 ' ; ' (세미콜론) 은 생략 가능하다. 사용방법 안에서 작성 태그 안에서 작성 (비추천) 외부에 스크립트만 작성하여 현재 파일에서 사용하는 방법 (많이 사용) 데이터의 구조는 J.. [Web] 웹 기초 (7) - CSS #3 position, display, transform, transition 등 Position absolute : 절대좌표 fixed : 스크롤 내려도 좌표값 바뀌지 X static : 기본값(default) 이라서 굳이 안 줘도 기본으로 설정되어 있음 absolute Absolute 영역 좌표값 지정 안 해서 (0,0)으로 설정 → 다 겹쳐보임 absolute 는 좌측 상단 좌표를 기준으로 relative 현재 자기 자리에서 옆으로 이동하는 형태 fixed 스크롤 내려도 계속 따라옴 (fixed돼서) 스크롤 올리거나 내릴때 따라다니다가 마우스 올리면 메뉴 나타나도록 효과 줄 수 있음 (제이쿼리 등으로) clear none, left, right, both, initial, inherit float 기능 줬던거 없애기 (일반적으로 both 많이 씀) Display none : 영역.. [Web] 웹 기초 (6) - CSS #2 overflow, visibility, display CSS#2 문단속성 text-overflow, overflow - overflow : hidden, auto 혹은 scroll (scroll 하면 오른쪽에도 세로 스크롤 생김) - text-overflow text-overflow : clip; text-overflow : ellipsis; Visibility / Display visibility : visible, hidden display : none, block [Web] 웹 기초 (5) - CSS #1 사용법, 선택자, 가상클래스 CSS 사용법 1. 단독으로 사용 2. 태그 내에 style 적용 위 여백 10px 3. style.css 따로 만들어서 @import로 연결 4. style.css 따로 만들어서 link 태그로 연결 CSS 선택자 p#abc : p 태그 중 id가 abc인 요소 p.abc : p 태그 중 class가 abc인 요소 p[title] : p 태그 중 title속성을 갖고 있는 태그 p>div : p 태그안에 있는 요소 중 div 태그(하위단계는 1단계까지만) p div : p 태그 안에 있는 모든 div 태그 (단계와 상관없이 하위 태그 모두 선택) p+div : p태그 바로 뒤에 있는 div 태그 p > div p 태그 내에 ol 태그가 있고 ol 태그 안에 div가 있으면 ( 2단계 하위) 적용되지 않.. [Web] 웹 기초 (4) - Web Storage API Web Storage API - 브라우저에서는 쿠키보다 더 직관적으로 정보를 저장할 수 있는 Web Storage API를 제공한다. - key/value 로 이루어져 있으며, localStorage와 sessionStroage가 있다. 사용방법 값 저장하기 localStorage.setItem('mId', 'hong'); sessionStorage.setItem('mId', 'kim'); - key : mId - value : hong, kim 값 불러오기 let localId = localStorage.getItem('mId'); let sessionId = sessionStorage.getItem('mId'); console.log('localStorage', localId); console.log.. [Web] 웹 기초 (3) - Canvas #2 Shadow, Gradient, Rotate * 본 포스팅은 제가 국비지원교육을 받으며 정리한 내용을 옮겨놓은 것입니다. 발전적인 지적과 피드백은 언제나 환영합니다! Canvas #2 Shadow Shadow 바탕색 그림자색 Gradient - createLinearGradient(x1, y1, x2, y2) : x1, y1 에서부터 x2, y2 까지 그라데이션 선형 그라데이션 원형 그라데이션 Rotate rotate 도형의 갯수 [Web] 웹 기초 (2) - Canvas #1 * 본 포스팅은 제가 국비지원교육을 받으며 정리한 내용을 옮겨놓은 것입니다. 발전적인 지적과 피드백은 언제나 환영합니다! Canvas #1 는 그래픽을 그릴 때 사용되는 태그이다. 태그는 그래픽의 컨테이너일 뿐, 실제로 그래픽을 그리려면 자바스크립트 코드를 작성해야 한다. Canvas로 선, 박스, 원, 텍스트를 그리고 이미지를 추가할 수 있다. 삼각형 그리기 원(원호) 그리기 - false : 시계방향 - true : 반시계방향 1번 : 시작각이 1.5에서 끝각이 0.5, 진행방향은 true 디렉션 false로 주면 2번이랑 같음 2번 : 시작각이 0.5에서 끝각이 1.5, 진행방향은 true 디렉션 false로 주면 1번이랑 같음 [Web] 웹 기초 (1) - 기본적인 HTML 태그 (글꼴, 문단) * 본 포스팅은 제가 국비지원교육을 받으며 정리한 내용을 옮겨놓은 것입니다. 발전적인 지적과 피드백은 언제나 환영합니다! 글꼴 head line : h1 > h6 앞뒤에 빈줄이 발생 자동으로 글자는 '굵게' 적용 font size : 1 권고 사항은 태그 사용하지 않고 css style로 표현하는 것 문단/블럭 1) span 2) p 3) div - p태그는 아래위로 여백이 존재하고, div는 한줄 공간만 차지 텍스트입력 1) pre : 작성한 그대로 인식하여 출력 - preformatted의 줄임말 태그 - 창을 줄이면 반응형으로 안에 컨텐츠도 같이 줄이고 늘리고 해야되는데, pre 쓰면 있는 그대.. [Web] 웹 개발 환경구축 (2) - 이클립스 웹서버 환경설정, HTML 파일 생성 * 본 포스팅은 제가 국비지원교육을 받으며 정리한 내용을 옮겨놓은 것입니다. 발전적인 지적과 피드백은 언제나 환영합니다! open perspectives → Java EE로 설정 window → preference → server → runtime environment 아파치 8.5 선택하고 next - 자바코드는 src, 웹과 관련된 코드는 WebContent (META, WEB-INF에 넣으면 안 됨!!) - HTML 정적 (이미지와 텍스트만 들어가있을 경우. 컨트롤단 집어넣을 수 없음) , JSP는 동적 (HTML을 JSP가 포함하고 있는 형태) - jsp파일과 html파일의 차이. - HTML을 JSP로 바꿀 때 확장자만 바꾸면, 이 차이에 의해서 에러 발생 - Eclipse가 가지고 있는 특성 .. 이전 1 2 3 4 5 다음
