본문 바로가기

수업 정리

 (93)
44일차 수업정리(HTML5) **HTML5 => semantic(의미전달)의 강화와 플러그인 없이 애플리케이션을 사용하기 위해 등장한 HTML4의 다음버전 1. Semantic Tag => 전에는 div와 span을 이용해서 영역을 만들고, 영역의 의미전달을 위해서 class나 id속성에 이름을 부여 - HTML5에서는 의미별로 다른 태그를 선택하는 것을 권장 1) section : 하나의 독립적인 영역 2) header : 제목 3) footer : 바닥글 4) article : section내에서 독립적인 요소 5) nav : 메뉴 6) aside : article과 별 상관없는 광고나 내용 7) hgroup : header내에서 제목을 그룹화 하고자 할 때 사용 8) figure => 이미지나 그래프 예제코드, 비디오 처럼 독..
43일차 수업정리(이벤트 처리, 예외처리, ajax) **자바스크립트 이벤트 처리 1. 이벤트 종류 => 마우스 클릭 동작 : click, dbclick => 키보드 동작 : keydown, keypress, keyup - 기본 동작으로 누른 키 값을 input에 출력 => 마우스 동작 : mousedown, mousemove, mouseover, mouseout, mouseup - mousedown과 mouseup이 합쳐진 이벤트가 click - mouseup 이벤트에서 false를 리턴하면 마우스를 누르지 않은 것과 같은 효과 => move : 윈도우(브라우저)가 움직였을 때 발생하는 이벤트 => resize : 윈도우의 크기가 변경된 경우 발생하는 이벤트 => 포커스 관련 이벤트 - focus(focusin), blur(focusout) - focus..
42일차 수업 정리(BOM, DOM, Event **BOM(Browser Object Model) => 자바스크립트가 제공하는 객체 1. Math => 모든 멤버가 전부 정적(static) 멤버 => 별도의 객체를 생성하지 않고 Math를 이용하여 모든 멤버에 접근 2. Date => 날짜와 관련된 객체 3. Array => 배열 객체 => 배열에서 가장 중요한 것은 생성, 전체데이터 접근, 정렬 1) 생성 - [데이터 나열] : 처음부터 데이터가 존재하는 경우 - new Array(개수) : 처음에는 데이터가 없고 나중에 데이터가 만들어지는 경우 2) 데이터 접근(length 속성 - 데이터 개수) => 전체 읽기 : for(인덱스 in 배열){ 배열[인덱스 변수] } => 하나씩 읽기 : 배열[인덱스] -> 여기서의 인덱스는 0부터 데이터 개수 -..
41일차 수업정리(js - 반복문, 제어문, 함수, 내장객체) **eclipse에서 apache tomcat 설정 => java, php를 이용하여 웹서버를 구성하는 경우 java나 php의 내용을 번역하여 html로 변환 or 만든 웹사이트를 배포하고자 할 때 설치 => 처음 웹 프로젝트 실행시 tomcat 버전을 선택하고 tomcat 명령어가 있는 디렉토리를 선택하여 실행 => 위처럼 했는데 실행되지 않는 경우 포트 문제(포트 변경 필요) - 포트를 변경하고자 할 경우 Server 디렉토리 내부의 server.xml에서 port 수정 - 부분의 port가 -1로 되어있으면 수정 (0~1024, 1521, 8080, 3306, 27017번은 회피) - (port가 8080인 경우 오라클이 구동중이면 port 충돌 발생 - port번호 변경) (내 컴퓨터를 웹 서버..
40일차 수업정리(CSS - ViewPort Meta, JS - 변수, 연산자 **Dynamic web project => Java Resources - src : 컴파일을 할 수 있는 파일(이 디렉토리의 내용만 컴파일) - src 디렉토리에 만든 것을 제외한 나머지는 나중에 WebContent 디렉토리로 이동됨 => WebContent : 웹프로젝트에서 사용하는 파일 - Webcontent/WEB-INF/classes : src에서 만든 소스파일의 클래스 파일 **Media Query => 조건에 따라 style을 다르게 설정하는 것 => 조건에는 디바이스 화면 크기 , 물리적인 크기등 => 하나의 웹 애플리케이션을 구현하고 상황에 따라 콘텐츠를 다른 방법으로 보여지도록 구현하기 위해 등장 **ViewPort Meta 태그 => 화면에 대한 옵션을 설정하는 태그 - initial..
39일차 수업 정리(css - box model, 회원가입 페이지 작성) 1. box model => 태그로 표현되는 하나의 영역 1) width : 컨텐츠의 너비 2) height : 컨텐츠의 높이 3) box-sizing : box의 크기를 설정하는 방법 - 값으로는 content-box와 border-box - content-box를 설정하면 width와 geight가 컨텐츠의 크기로만 설정되고, border-box를 설정시 border의 너비 포함 4) amx-height, max-width, min-height, min-width => 컨텐츠의 최대 최소 크기를 설정 => 반응형 웹 디자인의 경우 너비가 너무 작아지면 컨텐츠를 제대로 표시할 수 없어 min-width를 설정하여 일정 크기 이하로는 작아지지 않도록 설정 5) overflow => 영역의 크기에 비해서 ..
38일차 수업 정리(CSS-1) **CSS => HTML 페이지에 디자인을 적용하기 위한 문법(언어) 1. 적용방법 1) External Style Sheet => 별도의 파일을 만들고 Link를 걸거나 포함시켜서 사용하는 방식 => link : => 포함 : 2) Internal Style Sheet => HTML 파일 안에 style이라는 태그를 만들고 그 안에 적용 3) Inline Style Sheet => 태그 안에 작성하는 것 => 2. 스타일 시트 작성 규칙 선택자{ 속성:값; } => 선택자는 적용할 요소 => 속성은 적용할 특성 => 값을 속성에 적용하는 값 => 여러개의 속성을 설정할 수 있는데 이때는 ;으로 구분 => 예약어에 따옴표를 하지 않음(" "는 경로 설정시 이용) 3. 선택자 1) 기본선택자 => * : ..
37일차 수업정리(XHTML) **XHTML 1. 이미지 태그 - img => 빈태그(닫는 태그가 없음)이고, 인라인요소(주위에 다른 요소가 배치될 수 있음) 1) 필수 속성 => src : 이미지 파일 경로(url or 상대경로) => alt : 이미지가 없을 때 보여지는 대체 텍스트 2) Web에서 사용가능한 이미지 포맷 => gif : 256컬러만 지원 및 애니메이션 기능 => jpg(jpeg) : 약16만컬러 지원, 손실 압축 => png : 비손실 압축, 투명배경 가능, 용량이 jpg보다 큼, 모바일에서는 png권장 (앱스토어 올릴때 사용하는 이미지는 png만 가능) => bmp : 비트맵 이미지, 웹의 표준 이미지는 아님 3) 이미지 파일을 프로젝트에 저장하고 출력하는 경우 이미지를 위한 별도의 디렉토리를 만들어서 저장 및..

티스토리툴바