마른하늘에날벼락처럼내려치는코딩

가상선택자란, 현재 상태를 확인할 수 있는 선택자로 선택자: 가상선택자 ==> { css 속성 : css 값; } 의

형태로 작성할 수 있다.

1. hover (선택된 대상에 마우스가 업(커서가 대상 위에 위치)되었을때 반응)

1-1) hover를 이용한 drop down 실습

2. active(마우스로 누르고 있을 경우)

3. focus (키보드 입력 커서가 활성화 되있을 시)

4. first-child, last-child(첫번째, 마지막번째 대상 선택)

4-1. first, last-child 실습 : 테두리 만들기

5. nth-child (n번째 대상 선택)

1) font

1. 글꼴의 크기, 종류, 굵기 등을 표현

* 웹폰트 사용 방법 *

1. 구글 웹폰트 검색

2. 마음에 드는 폰트 선택 후 우측에 select this style 선택

3. link 복사하여 head 부분에 삽입

4. font-family에 폰트명 삽입

2) text

1. text 요소 정렬 및 표기 옵션

2. text 스타일이 적용된 대상의 하위 요소에서 표현이 된다.

3) color

1. 텍스트 요소의 색상을 결정한다. (웹색상표, rgb, rgba 등등..)

4) border

1. 선택된 대상의 테두리, 색상, 굵기, 스타일 설정

2. 상하좌우 등 각 위치에 별도로 적용 가능

3. 굵기, 스타일, 색상이 전부 지정되어야 화면에 반영

5) padding

1. 안쪽여백으로 가로사이즈 + 패딩사이즈가 전체 크기가 된다.

6) margin

1. 바깥여백으로 가로사이즈 + 바깥여백이 전체 크기가된다

7) width, height

1. width는 가로폭, height는 높이를 지정한다.

8) background

1. 배경색, 이미지, 패턴 등을 지정

2. 선택자로 선택된 대상의 배경 옵션 선택 가능

- 기본값 : repeat; (상하반복)

- repeat-x : 가로반복

- repeat-y : 세로반복

- no-repeat : 반복없음 .

- background-position : 배경의 위치를 설정

9) position, z-index

1. position : 배치 옵션 설정

- 생성된 블럭요소는 기본적으로 position: static; 을 가지고있다.

2. position: relative;

-  top, left, right, bottom 속성으로 절대값 위치를 지정 할 수 있다.

- 지정된 상위 요소를 찾아 찾은 대상의 영역이 배치 기준 점이 된다.

- top, left, right, bottom의 속성으로기준점 절대 위치에 배치 할 수 있다.

- static과 유사하게 블럭 요소를 순차적으로 배치가 가능하다.

- position-fixed로 디바이스 크기 기준으로 선택된 대상을 절대값으로 배치할수있다.

3. position: absolute 대상의 절대값 위치 기준이 된다.

- position: absolute로 설정된 대상의 position: relative; 설정된

상위 요소의 절대 위치로 대상 배치 가능

4. z-index : 겹쳐진 요소의 정렬 순서(앞뒤), 값이 높은 순으로 정렬한다.

10) display

- 선택된 대상의 보기 옵션 설정

- 감추기, 보이기(인라인요소, 블럭요소, 인라인블럭요소 등) 변경 가능

- 감추기 : display: none;

- 인라인요소로 변경 : display: inline;

- 블럭요소로 변경 : display: block;

- 인라인-블럭으로 변경(인라인 성격을 띄면서 높이 및 넓이 설정 가능) : display: inline-block;

​

11) line-height

- 텍스트의 높이 설정(세로 자간 설정)

​

12) list-style

- li 태그에 표현되는 불릿 모형을 변경(이미지로 교체 가능)하거나 감춘다.

- 불릿삭제 : list-style: none;

​

13) overflow

- 선택된 대상에 정해진 사이즈에서 하위 요소들의 높이나 넓이가 넘어 갈 경우 보이기 옵션 설정

- 높이나 너비가 넘어간 대상 감추기 : overflow: hidden;

- 스크롤로 하위 요소의 컨텐츠를 볼 수 있도록하기 : overflow: scroll;

14) float, clear

- float : 블럭요소 정렬

- clear : float 설정 부분 혹은 전체 해제

- float 적용된 대상은 높이 인식이 안된다.

- 다음 정렬된 블럭요소에서는 float에 영향을 받으며, float 적용대상의 높이 인식을 못한다.

(소스코드 순서와 상관없이 그 다음에 정렬되는 대상에 영향)

(clear 속성으로 float을 해제)

- float 적용된 대상에 가로 크기가 없을 경우 기본적으로 부모크기 100%를 상속받아

가로 크기 적용되는 부분이 해제가 된다.

- 이와 같은 성격으로 인하여 높이를 인식을 할 수 있도록 처리하는 방법이 몇가지 존재한다.

1. clear를 활용하여 float 해제

2. overflow : hidden -> float 적용된 대상의 상위 요소에 적용

1) form 요소 공통 속성

1. readonly : 입력 혹은 선택 불가능, 서버에 데이터 전송 가능

2. disabled: 입력 혹은 선택 불가능, 서버에 데이터 전송 불가능

3. name: 서버에 전송될 데이터명

4. value: 서버에 전송될 데이터 값

2) form 태그 요소 - input

1. 사용자에게 단문 데이터 혹은 체크 형태로 데이터를 받을 수 있다.

2. type 속성값을 변경함으로써 사용 용도를 변경할 수 있다.

3. type="text"

> 사용자에게 텍스트 형식의 정보를 입력받을 때 사용

> placeholder 속성 사용을 통해 안내글을 표시할 수 있음.

4. type="password"

> 사용자에게 암호를 입력받을 때 사용

> 입력한 정보를 표시하지 않음

5. type="hidden"

> 사용자에게 감춰진 태그로, 사용자에게 표시될 필요는 없지만 서버에 데이터 전송이 필요할 경우 사용

6. type="radio"

> 다수 중 1개를 선택하도록 만드는 태그로 name 속성 값을 동일하게 작성해야 한다.

> checked 속성 사용을 통해 기본 선택 값 변경가능

7. type="checkbox"

> 다수중 다중 선택이 가능한 태그로, checked 속성을 통해 선택 값 변경 가능

8. 기타 type

> date(날짜 선택), number(숫자 입력), color(색깔 선택), email(이메일 형식 입력) 등 많은 type이 존재한다.

3) form 태그요소 - select

1. 다수 중 1개를 선택하는 dropdown 형태

2. select와 option 태그로 이루어져 있어 선택 시 목록을 확인하고 선택할 수 있다.

3. select에는 name 속성, option에는 value 속성을 사용한다.

4. selected 속성을 통해 기본 선택값을 설정할 수 있다.

5. 기본적으로는 1개 선택이지만, multiple 속성 사용을 통해 다중 선택이 가능하다.

4) form 태그요소 - textarea

1. 사용자에게 장문의 데이터를 받아야할 때 사용

2. value속성이 존재하지 않으며, 공백 및 개행 등을 인식한다.

3. cols와 row 속성을 사용하여 폭과 너비를 조정한다.

1) 메서드 호출 원리

1. 메서드 명 일치

2. 매개변수에 입력할 개수 일치

3. data type 일치

2) 메서드 오버로딩

1. 동일한 클래스 내에 메서드명은 같으나, 입력 개수와 data type을 다르게 프로그래밍 하는 방법

> 유사할 기능일 경우에만 사용한다.

> 메서드명, 변수의 개수, type이 일치할 경우 변수명이 다르다고 다른 메서드가 x

ex)

3) 메서드 오버라이딩

1. 상속받은 메서드 중 일부를 자식클레스에서 재수정하여 재사용할 수 있게끔 해주는 것(재정의)

2. 재정의할 메서드와 메서드명, return type, 매개변수 리스트가 같아야 한다.

3. 접근제한자는 부모 메서드의 접근제한자 보다 더 강한 접근 제한자 사용 불가

4. 새로운 exception을 throws 할 수 없다.

ex)

4) 상속

1. 부모(상위) 클래스의 멤버를 자식(하위) 클래스가 상속받아 그대로 사용할 수 있도록 하는 것으로, 재사용을 통해

개발 시간을 단축할 수 있어 효율적이다.

2. 부모클래스의 private 접근제한을 갖는 필드 및 메서드나, 서로 다른 패키지 간의 상속관계에서 부모 클래스의 default 접근 제한을 갖는 필드 및 메서드는 상속 받을 수 없다.

3. 부모 클래스에 기본생성자가 존재하지 않을 경우 자식 생성자 호출 시 에 반드시 생성자 내부 첫줄에 super() 구문을 선언해 주어야 한다.

ex)

5) final

1. final 키워드는 클래스, 필드, 메서드 선언 시 사용되며, final이 붙을 시 최종값이 되며 수정할 수 없다. (상수 선언)

2. final 키워드가 붙은 클래스나 메서드는 상속할 수 없고 오버라이딩 할 수 없다.

ex)

1) JDK(java) 다운로드

1. http://oracle.com 에서 사용할 버전에 맞는 JDK 다운로드 

2. zip파일 풀어서 설치 후 환경변수 설정

>> 내PC > 속성 > 고급시스템설정 > 환경변수 설정 > 시스템변수 > 새로만들기 > JAVA_HOME 생성 (경로는 JDK 경로)

> 시스템 변수 > 새로만들기 > CLASSPATH 생성 (경로는 JAVA_HOME\lib)

> path 환경변수 편집에서 새로만들기 > JAVA_HOME\bin 폴더로 경로 지정

> 이후 cmd창에서 자바버전 확인을 통해 정상 설치 확인

2) MAVEN 다운로드

1. http://maven.apache.org/download.cgi 에서 아래의 자료 다운로드

2. 원하는 폴더에 압축해제 후 해당 경로로 환경변수 생성 (MAVEN_HOME)

3. 이후 시스템변수 path에 MAVEN_HOME\bin 경로 추가

4. cmd 창에서 설치 확인

3) WAS 다운로드

1. http://tomcat.apache.org 에서 사용할 버전에 맞는 WAS(apache-tomcat) 다운로드(core의 zip파일 다운로드)

2. D:드라이브(또는 사용할 작업공간) 하위에 압축풀기

3. 환경변수설정

>> 내PC > 속성 > 고급시스템설정 > 환경변수 설정 > 시스템변수 새로만들기(CATALINA_HOME)

> 경로 설정(압푹푼 위치) > tomcat \ bin 폴더의 startup 실행하여 설치 확인(또는 localhost:8080)

4) 에디터 다운로드

VSCode, Eclipse, STS ..... 등 본인이 사용할 프로젝트의 성향에 맞는 IDE를 다운로드

5) DBMS 다운로드

1. Mysql

> 검색하여 mysql 다운로드(버전은 유기적으로 생각해볼것) > 계속 Next 진행하다 계정 암호 입력하는 칸에

사용할 암호 입력 (ID : root / PW : 설정)

> 내PC > ... > 환경변수설정 > 시스템변수 path 편집 > 새로만들기 > mysql\bin 폴더 위치 추가

2. Oracle

> https://www.oracle.com/index.html 에서 사용할 버전에 맞는 설치파일 다운로드

> 변경없이 Next 진행 > ... > 계정 암호설정 > 기존대로 설치할 경우 was와 동일한 8080 port를 부여받기 때문에 겹치지 않는 다른 포트로 변경하여 설치 > 이후에 사용자 생성 후 생성한 계정으로 재로그

6) DBMS 관리 툴 설치

>> DBeaver나 heidiSQL, sqldeveloper 등을 프로젝트 성향 등을 파악하여 적합한 툴을 선택