프로그래밍 삽질 중

※ 디렉티브 태그 - JSP 페이지를 어떻게 처리할 지 설정하는 태그 - JSP페이지 → 서블릿 프로그램 → 서블릿 클래스로 변환 시 JSP 페이지와 관련된 정보를 JSP컨테이너에 지시하는 메세지 - - page, include, taglib 존재 ※ page 디렉티브 태그 - 현재 JSP 페이지에 대한 정보를 설정 - JSP페이지 어디든지 선언 가능하나 일반적으로 JSP 페이지 최상단에 선언 권장 - ※ page 디렉티브 태그 속성 1) language 속성 : JSP페이지에서 사용할 프로그래밍 언어 설정 시 사용(기본값 : java) 2) contentType 속성 : 현재 JSP 페이지의 콘텐츠 유형(MIME-type)설정 시 사용(기본값 : text/html) * HTML을 출력하는 JSP 페이지..

※ 웹 프로그래밍 언어 - 클라이언트 측 실행 언어와 서버 측 실행 언어로 구분 - JSP는 서버 측 웹 프로그래밍 언어 중 하나임 ※ JSP 특징 - 서블릿 기술 확장 - 유지 관리가 용이 - 빠른 개발 가능 - 코드 길이 줄일 수 있음 ※ 컨테이너 - 웹 컴포넌트 : 동적 콘텐츠 생성 - 컴포넌트를 저장, 메모리 로딩, 객체 생성 및 초기화 - 서블릿의 생명주기 관리 - JSP를 서블릿으로 변환 ※ JSP 페이지 처리과정 1) 웹 페이지로부터 JSP에 대한 사용자 요청이 컨테이너로 전달 2) 요청 JSP에 대한 서블릿이 존재하면 다음 단계로 진행, 존재하지 않을 경우 JSP를 .java파일로 변환 후 .class 파일로 컴파일 3) 컴파일된 서블릿 클래스를 컨테이너 메모리에 적재 후 실행 ※ HTTP..

※ 변화 속성 - 효과가 적용되는 과정을 좀 더 부드럽게 보여주거나, 그 과정을 시간적으로 조정할 수 있게 함 ※ 변화속성 종류 - transition-property : 변화 효과를 적용할 속성들 나열 - transition-duration : 변화가 지속되는 시간 지정 - transition-timing-function : 변화의 시작과 끝 타이밍 지정 - liner : 처음부터 끝까지 같은 속도 = cubic-bezier(0, 0, 1, 1) - ease : 느리게 시작하여 점점 빨라졌다가 느리게 끝남 = cubic-bezier(0.25, 0.1, 0.25, 1.0) - ease-in : 느리게 시작하여 점점 빨라지다가 일정한 속도에 다다르면 같은 속도 유지 = cubic-bezier(0.42, 0..

※ 표(테이블) 레이아웃 - 셀 안의 내용에 따라 셀 너비 조절 ※ 표 레이아웃 속성 1) table-layoyut: auto; - 내용 분량에 따라 셀 너비가 자동으로 조절(기본 값) 2) table-layout: fixed; - 내용 분량과 관계 없이 셀 너비를 고정 3) table-layout: initial; - 변경된 테이블 레이아웃을 기본값 상태(auto)로 설정 4) table-layout: inherit; - 부모 요소의 값을 상속 받아 셀 너비를 결정 ※ 불투명도 속성 - opacity : 숫자(0~1); ※ 가시성 속성(visibility) - 어떤 요소로 보이게 하거나 반대로 보이지 않게 할 때 사용 ※ 디스플레이 속성(display) - 가시성 속성과 반대로 요소가 차지하는 공간도 ..

※ CSS의 필요성 - 문서작성(HTML)과 디자인(CSS) 분리 - 디자인 분리 시 장점 1) 내용과 디자인 수정 용이 2) 다양한 기능으로 확장 가능 3) 통일된 문서 양식 제공 4) 전송 및 로딩 시간 단축 ※ CSS 문법 - 선택자 { 속성 : 속성값; } ex) div { width : 100px; } ※ CSS 사용 위치 1) 인라인 스타일 시트 : HTML 내 위치 (ex ····) 2) 내부 스타일 시트 : HTML 내 위에 생성 3) 외부 스타일 시트 : 별도 파일 생성(호출식으로) ※ CSS 기본 선택자 1) 전체 선택자 : * { 속성 선언; } - 모든 태그에 스타일 적용 2) 타입 선택자 : 태그 { 속성 선언; } - 지정한 태그에 스타일 적용 3) 클래스 선택자 : .클래스 이..

※ 상태 선택자 1) :checked : 체크 상태의 input 태그 선택 2) :focused : 포커스를 맞춘 input 태그 선택 3) :enabled : 사용 가능한 input 태그 선택 4) :disabled : 사용 불가능한 input 태그 선택 ※ 구조 선택자 1) :first-child : 형제 관계에서 첫 번째로 등장하는 태그 선택 2) :last-child : 형제 관계에서 마지막으로 등장하는 태그 선택 3) :nth-child(수열) : 형제 관계에서 앞에서 수열 번째 등장하는 태그 선택 4) :nth-last-child(수열) : 형제 관계에서 뒤에서 수열 번째 등장하는 태그 선택 * 2n+1 수열에 0부터 넣을 경우 → 1, 3, 5, 7, 9, 12... - 구조 선택자는 수열의..

4.1정리(1) ※ 데이터 전달 (1) Get 방식 - url주소 뒤에 패러미터를 붙여 데이터 전달 - 글자 수 제한(최대 2048), 비밀 보장 x ex) https://www.youtube.com/watch?v=Y9CClRuv3yM → https://www.youtube.com/watch : 검색을 처리하는 스크립트의 URL → v=Y9CClRuv3yM : 사용자가 입력한 단어를 URL에 붙여서 서버로 전송 (2) Post방식 - HTTP Request 헤더에 포함시켜 전송 - 길이 제한 없으며 비밀 보장 가능 - 뒤로 가기 버튼 누르면 데이터 다시 보내야 한다는 브라우저 경고 뜸 ※ 입력 요소 - input요소 1) text : 텍스트을 입력할 수 있는 한 줄짜리 필드 생성 2) password :..

※ - 각 웹 콘텐츠 영역에서 제목 표시할 때 사용 - 크기 순서 : h1 > h2 > h3 ······ ※ - 줄 바꿈(닫는 태그 x) ※ - 분위기 전환(수평 줄 생김) ※ - 입력한 내용 앞 뒤로 빈줄이 생기면서 텍스트 단락 생성 ※ - 인용문 넣기 - 다른 텍스트보다 안으로 들여 써짐 ※ - 소스에 표시한 공백 그대로 표시 - 프로그램 소스 표시 표현 시 유용 ※ = - 굵게 표시 - strong : 중요한 내용 강조 - b : 단순히 굵게 표시 ※ , - 이탤릭채로 표시 - em : 흐름상 특정 부분 강조하고 싶을 때 - i : 단순히 이탤릭체로 표시 ※ - 줄바꿈 없이 다른 내용과 한 줄에 인용 내용 표시 - 인용 내용 앞뒤로 따옴표(" ")추가됨 ※ - 형광펜(노랑색)으로 표시 ※ = → 주..