분류 전체보기 (64) 썸네일형 리스트형 21.11.12 - 웹 개발 입문 65일차 자바스크립트 - jQuery ex) 태그 생성 예제 생성 ex) 태그 생성 예제 설문 조사 생성 항목 생성 추가) 같은 이름의 파라미터가 여러개 전송될 경우 서블릿 처리 하기 package web09.servlet; import java.io.IOException; import java.util.Arrays; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServl.. 21.11.11 - 웹 개발 입문 64일차 자바스크립트 - jQuery # jQuery로 제어할 수 있는 요소별 명령 - style - `$(선택자).css(항목, 값)` - 특정 스타일 항목을 특정 값으로 변경 - `$(선택자).css(항목)` - 특정 스타일 항목을 확인(반환) - value - `$(선택자).val(값)` - value 설정 - `$(선택자).val()` - value 반환 - textContent - `$(선택자).text(값)` - textContent 설정 - `$(선택자).text()` - textContent 반환 - innerHTML - `$(선택자).html(값)` - innerHTML 설정 - `$(선택자).html()` - innerHTML 반환 - attribute - `.attr(항목, 값)` - 대상 태.. 21.11.10 - 웹 개발 입문 63일차 자바스크립트 내부글자제어 목표 : #user-input에 작성된 값을 각각 innerHTML, textContent 방식으로 출력 정의 : 내부 글자라 함은 태그 사이에 작성된 내용을 의미한다. (ex) 내용 주의 : 단, textarea는 입력태그로 분류되므로 입력값을 value로 읽는다 = innerHTML은 HTML 요소를 해석해서 내용을 적용한다. = textContent는 있는 그대로의 글자를 내용으로 적용한다. 독립형 스크립트 (Q) 독립형 스크립트 제작을 위한 실행타이밍 확인 화면을 만들 때는 HTML + CSS + JS를 사용하여 만들어야 한다. 서로 다른 언어를 섞어서 만들 때 실행하는 순서는 어떻게 될까? (ex) HTML먼저 or CSS먼저 or JS먼저 or 작성한순서대로 or .... 21.11.09 - 웹 개발 입문 62일차 자바스크립트 Q. 과제풀이 회원 가입 화면을 만들고 규칙에 맞게 입력값을 검사하여 출력 회원 가입 아이디 비밀번호 비밀번호 확인 닉네임 생년월일 이메일 전화번호 기본 이벤트 처리 기본 이벤트가 설정된 태그 : , = 이 태그들은 기본적으로 설정된 동작이 존재한다. = 이벤트를 추가하려면 반드시 기본 동작을 제한해야 한다. = 이러한 태그들은 이벤트 설정 코드에 return false라고 적으면 기본동작을 하지 않는다. = 내가 원하는 기능을 실행하고 기본 이벤트를 차단하려면 함수에서 반드시 true/false를 반환 구글로 이동 구글로 이동 구글로 이동 구글로 이동 form 의 경우 submit 이벤트가 내장되어 있다. = 따라서 상황에 맞게 이를 허용(return true)하거나 차단(return fa.. 21.11.08 - 웹 개발 입문 61일차 자바스크립트 Javascript(자바스크립트) = 브라우저에 내장된 프로그래밍 언어 = 클라이언트 측에서 여러 가지 처리를 담당 = 자바랑 아무 상관이 없다는 의미이며, 인터넷선을 뽑아도 작동함 = 자바와의 관계는 "김"과 "김치"의 관계 = 태그 사이에 작성 = .js 라는 파일로 분리 보관 가능 = 함수형 언어 기초이론(변수,조건,반복,함수) 및 이벤트 연동 [ 변수 ] 자바스크립트의 데이터 처리 = 자바와 비교하면서 이해하는 것이 필요 스크립트 언어 vs 컴파일 언어 = 스크립트 언어는 실시간 번역, 컴파일 언어는 사전 번역 = 자바스크립트는 스크립트 언어, 자바는 컴파일 언어 = 실시간으로 처리하는 만큼 복잡하고 까다로운 계산들을 하지 않는다 = 자바스크립트는 자료형을 따로 구분하지 않는다 = 자.. 21.11.05 - 웹 개발 입문 60일차 기존에 만든 홈페이지에 디자인하기 css파일 보기 [ commons.css ] 더보기 /* CSS 파일 = 디자인 코드만 모아두는 파일 = 매 페이지마다 새롭게 디자인을 하지 않도록 자주 사용하는 디자인을 보관 */ /* 모든 디자인은 크기(폭, 높이) 기준을 "테두리"까지로 한다. 모든 디자인에는 고딕(sans-serif)체를 적용한다. */ * { box-sizing : border-box; } /* 모든 영역은 컨테이너를 만들면서 시작한다. 자주 사용할 컨테이너를 크기별로 준비해둔다.(100px ~ 1000px) */ .container-100 { width: 100px; } .container-200 { width: 200px; } .container-300 { width: 300px; } .co.. 21.11.04 - 웹 개발 입문 59일차 디자인 - float inline은 기본적으로 요소 간에 간격이 존재한다. = inline 형태로는 절대 2단, 3단 레이아웃을 구현할 수 없다. 해결책 1. float 속성을 사용하여 태그 배치 형태를 변경하는 방법 = 구현이 까다롭고, 신경써야 하는 부분이 많다. = 거의 모든 브라우저에서 지원한다. 2. display를 flex 형태로 변경하는 방법 = 최신 기술이며, 사용 방법이 편리하다. = 지원하지 않는 브라우저가 존재한다(특히 IE) float에서 가장 주의해야 하는 점은 다른 일반 화면과의 조화를 위한 처리이다. = float 영역이 끝나면 반드시 끝났음을 알리는 처리를 수행해야 한다. = 비어있는 div를 하나 만들고 clear 속성을 설정 결론 1. float는 반드시 필요한 상황이 있.. 21.11.03 - 웹 개발 입문 58일차 디자인 - 색상(color) RGB 방식 = Red, Green, Blue 후레시를 이용한 색상 생성 방식(빛의 3원색) = 값이 클 수록 밝아진다 = 0(0x00)부터 255(0xFF)까지 설정이 가능하다 = 전부다 255면 흰색, 전부다 0이면 검은색 RGBA 방식 = A(Alpha)를 통해 투명도를 설정할 수 있다. = 0(0%) 부터 1(100%) 까지 설정이 가능하다. = hex string에서는 00(0%) 부터 FF(100%) 사이에서 설정한다. HSL 방식 = Hue(색조), Saturation(채도), Lightness(명도)를 이용한 색상 방식 = 색상환에서 색상을 숫자로 (0~359) 범위에서 선택하여 사용(각도) = 0은 360과 같다 = 채도와 명도는 0%부터 100%까지 설정한다.. 이전 1 2 3 4 ··· 8 다음