Learning/HTML&JavaScript 썸네일형 리스트형 Post 방식으로 페이지 이동하기 jsp에서 태그에 href값을 주면 get방식으로 넘어간다. 하지만 post로 넘기고 싶다면? => onClick이벤트로 자바스크립트 함수를 추가하고 그 함수안에서 post로 넘기면 된다. 1. 컨트롤러로 넘기는 값이 없을때 (1) JSP (form 태그로 안감싸도 된다.) 1 클릭시 POST로 페이지 cs (2) Javascript 함수 (method는 post, 컨트롤러 주소는 goPost.do) 1 2 3 4 5 6 7 function goPost(){ let f = document.createElement('form'); f.setAttribute('method', 'post'); f.setAttribute('action', 'goPost.do'); document.body.appendChild(.. 더보기 과제-반응형 웹 만들고 이력서와 회원가입 페이지 연결하기 mainTest.html (메인페이지). 자유형식으로 만들기 Home About me Contact Lyrics 회원 가입 로그인 정보 아이디 비밀번호 비밀번호 확인 개인 정보 이름 메일 주소 연락처 블로그/홈페이지 가입하기 취소 join.css #container{ width: 70%; margin: 0 auto; } ul{ list-style: none; } ul li{ clear: both; } .field { float: left; width: 30%; line-height: 40px; text-align: right; margin-right: 15px; } input[type="text"],input[type="email"],input[type="password"], input[type="tel.. 더보기 반응형 웹 디자인 반응형 웹 디자인: 웹 사이트의 내용을 유지하면서 다양한 화면 크기에 맞게 웹 사이트 표시 뷰포트(viewport): 실제 내용이 표시되는 영역. 그리드 시스템: 화면을 여러 개의 칼럼을 나누고 필요할때마다 칼럼들을 묶어 배치하는 방법 가변 그리드 레이아웃: 전체를 감싸는 요소의 너비를 %로 변환 고정 그리드 레이아웃 가변 그리드 레이아웃 본문 사이드바 푸터 가변 이미지 .content img{ max-width: 100%; height: auto; } 더보기 DOM, BOM 문서 객체 모델(Document Object Model, DOM) 객체를 사용해 문서를 해석. 웹 문서의 요소를 부모/자식으로 구분. 인터넷 상품 페이지 (작은 사진 클릭하면 크게 보이기, 상세 설명 보기) 에디오피아 게뎁 상품명: 에디오피아 게뎁 판매가: 9,000원 배송비: 3,000원 (50,000원 이상 구매 시 무료) 적립금: 180원(2%) 로스팅: 2019.06.17 장바구니 담기 상세 설명 보기 상품 상세 정보 원산지: 에디오피아 지 역: 이르가체프 코체레 농 장: 게뎁 고 도: 1,950~2,000 품 종: 지역 토착종 가공법: 워시드 Information 2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜.. 더보기 자바스크립트 함수 2 return 값이 있는 경우 함수 return값이 없는 함수 사진 위에 버튼을 누르면 설명 보기, 닫기 버튼 누르면 설명 닫기 fun_event.html 상세 설명 보기 민들레 어디서나 매우 흔하게 보이는 잡초로써 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다.톱니 모양의 입새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다. 상세 설명 닫기 event.css #item{ position: relative; width: 500px; height: auto; padding: 15px 20px; margin: auto; } button{ background-color: rgba(255, 255, 255, 0.7); paddi.. 더보기 자바스크립트 함수 1 전역변수와 지역변수 처음엔 200, 두번째엔 100이 출력됨 익명 함수 선언 배경색 바꾸기 배경색 바꾸기 더보기 자바스크립트 객체 객체 종류 내장 객체: String, Date, Array, Math... 브라우저 객체 모델: window, screen, location, history, navigator... 문서 객체 모델: html, head, body... 객체 메소드 호출 수학객체 날짜 정보 객체 컴퓨터가 랜덤으로 내는 가위, 바위, 보 맞추기 배열객체 값 가져오기 배열객체 문자객체 더보기 자바스크립트 제어문 if else문 if else문과 confirm 객체 확인버튼=true 취소버튼=false 처리 조건이 여러개일때 if else문 중첩 if 문 =>>경고창이 뜬 후 다시 아이디 입력 ========================================================= =>>경고창이 뜬 후 다시 아이디 입력 ========================================================== switch문 반복문 while 20~10까지 짝수면 파랗게, 홀수면 빨간 글씨로 출력 5의 배수는 파란색, 7의 배수는 빨간색, 5와 7의 공배수는 초록색 글씨로 표시 break: 반복문을 강제로 종료 continue: 반복문의 처음으로 돌아감 1에서 100까지 홀수만 출력 (.. 더보기 자바스크립트 스크립트에서 '같다'표시는 === 이다. 더보기 CSS3 선택자 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 사용자 정보 이름 신청 과목 이 달에 신청할 과목을 선택하세요 회화 문법 작문 이미지 위로 마우스 포인터를 올려보세요 더보기 이전 1 2 3 다음
자바스크립트 객체
객체 종류 내장 객체: String, Date, Array, Math... 브라우저 객체 모델: window, screen, location, history, navigator... 문서 객체 모델: html, head, body... 객체 메소드 호출 수학객체 날짜 정보 객체 컴퓨터가 랜덤으로 내는 가위, 바위, 보 맞추기 배열객체 값 가져오기 배열객체 문자객체
더보기
