비전공자 공부일기/:: WEB & Front-End
-
웹개발 12 - 객체, 클래스, 메소드비전공자 공부일기/:: WEB & Front-End 2019. 6. 20. 17:07
2019. 06. 20 필기 프로그래밍 언어를 배울 때 '객체'라는 개념을 이해하는 게 참 어렵다. 다음은 최대한 여기저기서 긁어모아 정리해 본 내용이다. 자바스트립트는 브라우저를 객체로 표현하여 프로그램을 작성하는 언어이다. 그러나 객체지향이라기보단, '객체기반 프로그래밍 언어'라고 보는 게 더 적합하다고 한다. 또는 이런 설명도 있다. 자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어이다. 자바스크립트는 Object 클래스를 이용하여 객체를 생성하고 객체에 프로퍼티 또는 메소드를 추가,변경,삭제하여 사용 Object 클래스 : 프로퍼티와 메소드가 선언되어 있지 않은 클래스 객체란, 프로퍼티(Property:값 저장)와 메소드(Method: 기능제공)의 모임이다. 메소드 :..
-
웹개발 11 - 자바스크립트 함수비전공자 공부일기/:: WEB & Front-End 2019. 6. 19. 15:51
2019. 06. 19 필기 함수 Function 란? --> 원하는 기능을 제공하기 위한 명령들의 모임 --> 데이터를 전달받아 정해진 작업을 수행하고 그 결과를 리턴하도록 작성된 코드블록 함수 선언 후 호출에 의해 함수의 명령 실행 자바스크립트 함수의 형식 및 선언 함수의 형식 return 키워드의 기능 : 1)함수의 종료 2)함수의 반환값을 호출명령 위치로 반환 *cf* 자바 또는 자바스크립트 문법을 모르는 사람들을 위해 첨언하자면, abc( ) > 값을 전달받지 못한 매개변수는 undefined로 표현 --- 함수 매개변수의 개수보다 많은 값 전달 가능 >> 오버된 값은 자동 소멸 ------ 자바와는 달리 매개변수와 값의 개수가 일치하지 않아도 에러는 떨어지지 않는다..
-
[CSS-02]박스모델, 테이블 box model, table비전공자 공부일기/:: WEB & Front-End 2019. 6. 18. 13:42
2019. 06. 17 필기 박스모델(Box Model) 이란? : 이미지 또는 텍스트 출력을 위한 사각형 모양의 영역 margin : 박스모델과 박스모델 사이 간격 >> px(고정) %(유동) margin: 00px >> top&&bottom&right&left margin: 00px 00px; >> top&bottom right&left margin: 00px 00px 00px 00px; >> top right bottom left >>>> 구역의 네 변 중에서 하나의 마진만 조정하고 싶으면 margin-bottom: 00px; 과 같은 형식으로 선언 border : 박스모델의 외곽선 border-width : 외곽선 굵기 설정 --- px 키워드(thin, medium,..
-
[CSS-01] background 설정비전공자 공부일기/:: WEB & Front-End 2019. 6. 17. 15:02
2019. 06. 18 필기 background : 배경 관련 모든 스타일 속성값 사용 가능 background-color: colorname; : 배경색을 설정하는 속성 background-image : url(""); : 배경화면 이미지 설정 --- => 이미지파일 크기가 박스모델보다 작은 경우 가로와 세로 방향으로 반복출력 --- => 이미지파일 크기가 박스모델보다 큰 경우엔 이미지가 잘려서 출력됨 background-size: 설정값; : 배경화면 이미지 사이즈 설정 ----- auto(기본) : 이미지를 그대로 출력 ----- contain : 이미지 폭과 높이 중 작은 곳을 100%로 변경하여 출력 - 비율 유지(남는 곳은 여백) ----- cover : 이미지 폭과 높이 중 큰 곳을 100%..
-
[웹개발 기초] 여러가지 선택자와 속성들비전공자 공부일기/:: WEB & Front-End 2019. 6. 14. 18:10
2019. 06. 14 필기 ● 선택자(selector) 전체 선택자 : 모든 엘리먼트 선택 - 비권장 태그 선택자 : 엘리멘트이름(태그이름)을 이용하여 엘리먼트 선택 클래스 선택자 : 엘리먼트에 부여된 클래스값을 이용하여 엘리먼트 선택 => 엘리먼트의 클래스값 앞에 .을 붙여 사용 => 다수의 엘리먼트에 스타일 적용 아이디 선택자 : 엘리먼트에 부여된 고유값을 이용하여 엘리먼트 선택 => 엘리먼트의 고유값 앞에 #을 붙여 사용 => 하나의 엘리먼트에 스타일 적용 그룹 선택자 : 선택자를 ,로 여러개 나열 선언하여 엘리먼트를 선택 후손 선택자 : 부모 엘리먼트에 존재하는 모든 하위 엘리먼트 선택 형식) 부모선택자 후손선택자 자식 선택자 : 부모 엘리먼트에 존재하는 모든 자식 엘리먼트 선택 형식) 부모선택..
-
[HTML-03] 여러가지 중요 태그들2비전공자 공부일기/:: WEB & Front-End 2019. 6. 13. 15:42
2019. 06. 13 필기 ● FORM 태그 : 값을 액션페이지(서블릿orJSP로 만듦)로 전달하는 기능 제공 ○ 값을 다른 문서로 전달하는 방법 1. URL 주소에 QueryString 이용 2. Form 태그 이용 --- ajax 를 사용하지 않는다면 form태그를 통해서만 값 전달 가능 * action 속성 : 값을 전달할 페이지의 URL 주소를 속성값으로 설정 - 생략된다면 현재 페이지에서 값 전달 * method 속성 : 값을 전달하는 방식(요청방식) => 하위태그 : input, select, textarea 등 값 입력 기능의 태그가 반드시 존재 => input, select, tectarea 등 값 전달(submit) 기능의 태그가 반드시 존재 => input, button 등 ○ 클라이..
-
[HTML-02] 여러가지 중요 태그들비전공자 공부일기/:: WEB & Front-End 2019. 6. 12. 18:19
2019. 06. 12 필기 figure태그, a태그, map태그, quote태그, pre태그, list태그, meter태그, progress태그, table태그, object태그 ● FIGURE 태그 : 사진, 오디오, 비디오, 코드 등을 담는 컨테이너 역할 --- 여러 가지 자식 요소 포함 가능(img, code 등) : 이에 대한 설명하는 문구를 담는 태그(선택적) --- figure 요소에서 한 번만 사용 가능 (예시) 한국인의 인사하는 모습 ● A 태그 a 태그 : 앵커라고도 함. 다른 페이지로 이동하는 링크를 생성할 때 사용 : 박스모델의 클릭 이벤트에 대한 기본 이벤트핸들러 제공 하이퍼링크(Hyper Link) : 등록된 URL 주소로 다른 자원을 요청 => href 속성 : 하이퍼링크를 클..
-
[HTML-01] 배경지식 및 각종 태그들비전공자 공부일기/:: WEB & Front-End 2019. 6. 11. 18:55
2019. 06. 11 필기 ● 배경지식 HTML (Hyper Text Markup Language) : 웹출력 전용언어 --- html 4.01 framset --- html 4.01 transitional --- html 4.01 strict : xhtml만큼은 아니지만, 문법적으로 엄격한 편(경고가 떨어짐) XHTML : 문법적으로 엄격한 html ==> html과 xhtml의 장점을 혼합하여 만든 게 HTML 5 버전(windows8까지는 인식이 안 되므로 주의) --- 한국은 IE때문에 아직 4버전을 많이 쓰므로 5버전만의 고유기능을 이용하는 것을 쉽게 권장하지 않음 태그(tag)란? : 웹을 통해 보여지는 문서와 사이트를 구성하는 언어 --- 대소문자 미구분 --- 불필요한 공백 문자도 오류에..
-
웹개발 기초 - 프로그램 설치 및 서버 환경설정비전공자 공부일기/:: WEB & Front-End 2019. 6. 10. 17:58
2019. 06. 10 필기 ※ 주의 ※ 만약 실행 중에 무언가 꼬여서 이클립스를 종료하거나, 종료되었다면 새롭게 이클립스를 열어도 WAS를 실행할 수 없다.(이미 다른 이클립스로 실행중으로 인식) >>> 따라서 이런 포트충돌 상황에서는 apache>bin>shutdown.bat 경로로 실행중지 명령을 수행해야 다시 WAS를 실행할 수 있다. 1. JDK 설치 및 환경설정 https://www.oracle.com 사이트에서 JDK 다운로드 후 설치 >> JDK 설치 후 환경변수 생성 및 변경 ※ JAVA_HOME 환경변수 생성 및 Path 환경변수 변경 2. DBMS 설치 >> OralceXE 3. Eclipse 설치 https:..