뉴렉처 강사님의 국비지원 강의를 들으며 매주 공부한 내용을 포스팅으로 남기고 있다. 6주차에는 또 어떤 내용을 배웠는지 복습하는 시간을 가져보자🙂
Back-end
객체지향 프로그래밍
객체지향 프로그래밍이란?
- 행위를 중심에 두는 것이 아닌 객체를 중심에 두고, 객체에서 출발하는 프로그래밍
- 객체지향 프로그래밍을 구현하는 순서
1. 구현하고자 하는 프로그램에 필요한 개체를 찾는다.
2. 그 개체가 서비스해야하는 함수, 기능을 정의한다.
3. 기능의 절차를 코드로 구현한다.
HAS A 상속
- 상속: 능력/기능을 제공받음
- HAS A 상속
어떤 클래스가 다른 객체를 멤버로 가지고 있는 것 - 예제
[LottoConsole이 Lotto를 HAS A로 상속]
// LottoConsole.java
public class LottoConsole {
// HAS A: 객체(LottoConsole)가 다른 객체(Lotto)를 자신의 멤버로 Has 하고 그것을 이용는 관계
private Lotto lotto;
public LottoConsole(Lotto lotto) {
this.lotto = lotto;
}
// 로또 출력
public void print() {
System.out.print("로또 번호: ");
for(int i=0; i<this.lotto.getSize(); i++) {
System.out.print(this.lotto.getNum(i));
if(i < this.lotto.getSize()-1)
System.out.print(", ");
}
}
} IS A 상속
- IS A 상속
- 부모 클래스가 가지고 있는 것을 자식 클래스가 물려받아 같이 공유하며 나아가 확장(extends)하는 개념
- 기존 객체(부모 클래스)를 부품으로 사용하는 것이 아닌 기존 객체를 틀로 가져온 뒤 수정해 사용함
- 예제
[부모 클래스 Exam을 상속받는 자식 클래스 NewExam 만들기]
public class NewExam extends Exam/* extends를 이용해 부모 객체 Exam를 틀로 가져옴 */{
private int com;
public NewExam() {
// super(); 자식 객체(NewExam) 생성 시 부모 객체(Exam)의 생성자가 자동으로 호출되어 부모 객체도 함께 생성됨
com = 10;
}
// Override해서 부모 객체의 메소드를 수정해 사용하기
@Override
public int total() {
return super.total() + com;
}메소드 오버로딩, 생성자 오버로딩
- 메소드 오버로딩: 매개 변수를 달리하는 함수를 여러 개 선언
- 생성자 오버로딩: 매개 변수를 달리하는 생성자를 여러 개 선언
- 예제
// 기본 생성자
public Exam() {
kor = 10;
eng = 10;
math = 10;
}
// 오버로드 생성자
// 기본 생성자는 내부적으로 정의된 값으로 초기화, 아래 생성자는 사용자가 정의한 값으로 초기화
public Exam(int kor, int eng, int math) {
// 객체 생성 시 넘겨받은 값으로 초기화
this.kor = kor;
this.eng = eng;
this.math = math;
}참조 형식에 따른 재정의 함수 호출 관계
- 예제
[NewExam이 Exam을 상속받고, NewExam에는 total()이라는 오버라이드 메소드가 있다는 전제]
NewlecExam exam1 = new NewlecExam(1,1,1,1);
System.out.println(exam1.total()); // 출력값: 4
// NewExam의 total() 오버라이드 메소드가 실행됨
Exam exam2 = new NewlecExam(1,1,1,1);
System.out.println(exam1.total()); // 출력값: 4
// 참조형식이 Exam(부모 클래스) 인데도 NewExam의 total() 오버라이드 메소드가 실행됨- 참조형식(부모 클래스)에 따르지 않고 객체형식(자식 클래스)의 오버라이드 메소드가 실행되는 이유
-> 자바는 참조 형식의 함수보다 객체 형식의 함수 호출을 우선으로 하기 때문
메소드 동적 바인딩
.png)
- 자바는 전달되는 객체가 무엇인지에 따라 그 객체에 맞는 함수를 호출함
→ 실행 중에 바인딩이 결정되는 동적 바인딩
Front-end
background 이미지를 중복적이지 않게 설정하기
배경 이미지가 반복적으로 나오지 않게 설정하는 방법
background: url("이미지 주소") no-repeat
- 예제
.main-menu>ul>li {
padding-left: 24px;
background: url(../images/bg-main-menu-vsp.png) no-repeat 12px center; /* 배경 이미지가 반복해서 나오지 않게 하면서 x축으로는 12px 이동, y축에서는 center에 오도록 설정 */
}Pseudo class
단순한 선택자로는 표현할 수 없는 것을 select하는 선택자
- 예제
.main-menu>ul>li:first-child { /* li 목록의 첫번째 요소 선택 */
padding-left: 0;
background: none;
}
.main-menu>ul>li:nth-child(2) { /* li 목록의 두번째 요소 선택 */
padding-left: 0;
background: none;
}텍스트가 위치했던 곳에 텍스트 대신 이미지 배치하기
- 예제
.customer-menu .mypage-button {
background: url("../images/txt-mypage.png") no-repeat center/* 배경 이미지의 x, y 좌표 모두 center */;
display: inline-block; /* 너비와 높이를 가지게 하기 위함 */
text-indent: -999px; /* 텍스트를 아예 왼쪽으로 들여쓰기 해서 이미지의 너비가 오른쪽으로 커지더라도 왼쪽으로 들여쓰기된 글자가 보이지 않게 만들기 */
overflow: hidden; /* 왼쪽 또는 오른쪽으로 overflow된 요소가 있으면 보이지 않게 하기 */
}입력 폼 태그(form), 텍스트 정렬
- 입력 폼 태그
- fieldset: HTML 양식 속에서 그룹을 만드는 태그
- legend: 그룹으로 묶는 구역에 제목을 붙이는 태그
- label: 폼 요소에 레이블(텍스트)을 붙이는 태그
- input[type=text]: 입력칸 생성
- input[type=checkbox]: 체크박스 생성, 다중 선택 가능
- input[type=radio]: 라디오 버튼 생성, 단일 선택 가능(다중 선택 불가)
- textarea: 여러 줄의 텍스트 입력 가능한 입력칸 생성
- 예제
<form>
<fieldset> <!-- 다른 필드셋과 구분해주고 싶을 때 사용 -->
<legend>과정 검색 필드</legend> <!-- 필드셋에 대한 라벨 -->
<label>과정 검색</label>
<input type="text">
<input type="submit" value="검색">
</fieldset>
</form>- 텍스트 정렬
- 수평 정렬:
text-align: center; - 수직 정렬:
line-height: 20px;(텍스트를 둘러싼 박스와 같은 높이 부여하기)
- 수평 정렬:
Position
- absolute
- 기준: 문서 좌상단
- 원래 자신의 위치가 아닌 다른 위치로 설정하게 되면, 부모로부터 빠져나오게 되고 빠져나온 공간은 동생이 차지함
- fixed
- 기준: 화면 좌상단
- 원래 자신의 위치가 아닌 다른 위치로 설정하게 되면, 부모로부터 빠져나오게 되고 빠져나온 공간은 동생이 차지함
- relative
- 기준: 자기 위치
- 원래 자신의 위치가 아닌 다른 위치로 설정하게 되면, 부모로부터 빠져나오게 되고 빠져나온 공간은 아무도 못 차지함
- 예제
.main-menu {
display: inline-block;
position: absolute; /* .main-menu의 부모에 relative를 줬으므로 부모를 기준으로 위치가 조정됨 */
left: 200px;
top: 27px;
}.png)
Minju's Tech Blog