내용 정리

css에서는 출력, 영역, 위치 및 레이아웃, 배경, 그라데이션, filter, 글자, 문단, 내용 보호, 줄바꿈 설정, list-sytle, 마우스 포인터, 그림자 속성에 대해 배웠다. JAVA에서는 자료형, 제어문, 배열, String, 클래스, 변수에 대해 배웠다.

CSS

출력 관련 속성

출력 관련 속성	값
display	inline ⊕ block ⊕ inline-block ⊕ none
visibility	visible ⊕ hidden ⊕ collapse
width	auto ⊕ length ⊕ %
height	auto ⊕ length ⊕ %
overflow	visible ⊕ hidden ⊕ scroll ⊕ auto ⊕ clip
box-sizing	content-box ⊕ border-box

영역 속성

영역 속성	값	세부 속성
margin	auto ⊕ length ⊕ % 전체; 상하 좌우; 상 우 하 좌;	margin-left, margin-top, margin-bottom, margin-right
padding	auto ⊕ length ⊕ % 전체; 상하 좌우; 상 우 하 좌;	padding-left, padding-top, padding-bottom, padding-right
border	width style color;	border-width, border-style, border-color border-left, border-right, border-top, border-bottom
border-radius	length ⊕ %	border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius

• border-width: length(px, pt, pc, cm, mm, in, vw, vmin, vmax 등)
• border-style: solid(실선), none(기본값), hidden, dotted(둥근 점선), dashed(사각 점선), double(2중 선), groove(음각), ridge, inset, outset

💡지정한 폭과 높이에 padding과 border 값을 더한 값이 실제 콘텐츠의 크기가 된다.

다음과 같이 javascript로 css 속성을 변환할 수도 있다.

W3Schools online HTML editor

• 자바스크립트로 문서 요소를 제어하는 것을 DOM control이라 한다.

위치(배치) 및 레이아웃 관련 속성

💡기본적으로 웹의 모든 요소는 위에서 아래로, 왼쪽에서 오른쪽으로 배치된다. 또한 모든 배치의 기준은 부모를 따라간다.

위치(배치) 및 레이아웃 관련 속성	값
position	static ⊕ relative ⊕ absolute ⊕ fixed ⊕sticky
left, right, top, bottom	auto⊕length
z-index	auto ⊕ positive_num
float	none⊕left⊕right
clear	none⊕left⊕right⊕both

배경 속성

💡background 통합 속성은 여러 속성을 한꺼번에 지정할 수 있지만, 각 세부 속성의 순서를 지키면서 설정해야 한다. 특히, 위치(position)와 크기(size) 는 필수적으로 순서를 지켜야 한다. position과 size는 같은 length 단위를 쓰므로 사이에 슬래쉬(/)가 들어가야 한다.

배경 속성	값
background	color image position/size repeat origin clip attachment;
background-image	url(.image/kim.png);
background-position	left⊕center⊕right top ⊕ center ⊕ bottom length length
background-size	auto ⊕ length ⊕ cover ⊕ contain
background-repeat	no-repeat ⊕ repeat ⊕ repeat-x ⊕ repeat-y
background-origin	padding-box ⊕ border-box ⊕ content-box
background-clip	padding-box ⊕ border-box ⊕ content-box
background-attachment	scroll ⊕ fixed ⊕ local

그라데이션 속성 값

background: linear-gradient(방향or각도, 시작색, 끝색);
background-color: radial-gradient(시작색. ..중간색.., 끝색);

• 이외에 repeating-linear-gradient와 repeating-radial-gradient도 있다.

filter 속성 값

filter: blur(px) brightness(%) contrast(%) grayscale(%) hue-rotate(deg) drop-shadow(x y blur 색상) invert(%) saturate(%) sepia(%)

글자 관련 속성

글자 관련 속성
color	컬러명 ⊕ 16진코드 ⊕ rgb(a) ⊕ hsl(a)
font-size	xx-small, x-small, smaller, small, smaller, medium, large, x-large, xx-large ⊕ length
font-weight	bolder, bold, normal, lighter ⊕ number(100 가늘게 ~900 굵게, 100단위)
font-stretch	ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, extra-expanded, expanded, ultra-expanded
font-style	normal ⊕ italic ⊕ oblique
font-variant	normal ⊕ small-caps
text-transform	none ⊕ uppercase ⊕ lowercase ⊕ capitalize
font-family	1순위_폰트 [, 2순위_폰트, 3순위_폰트]
font-kerning	auto ⊕ normal ⊕ none

• font-family의 3순위는 웹 브라우저 기본 폰트로 지정하는 것을 권장한다. 기본 폰트에는 serif(명조), sans-serif(고딕), cursive(궁서), monospace(장평이 100%인 폰트), fantasy(디자인)가 있다.
• font-kerning: initial, inherit 값이 없다.

💡구글 폰트(https://fonts.google.com/)와 다폰트(http://dafont.kr/), 눈누(https://noonnu.cc/)에서 @font-face를 통해 웹 서버 폰트를 적용한다.

문단 관련 속성

문단 관련 속성
letter-spacing	normal ⊕ length
word-spacing	normal ⊕ length
line-height	normal ⊕ number⊕ length
text-align	left ⊕ right ⊕ center ⊕ justify
text-indent	length(px, %, pt 등)
text-decoration	none ⊕ underline | overline | line-through
text-justify	auto ⊕ none ⊕ inter-character ⊕ inter-word
text-orientation	mixed ⊕ upright ⊕ sideways ⊕ sideways-right ⊕ use-glyph-orientation
text-overflow	clip ⊕ ellipsis ⊕ 특정_문자

• text-decoration은 다음의 세부 속성을 갖는다.
  • text-decoration-color(줄의 색)
  • text-decoration-line: underline | overline | line-through
  • text-decoration-style(줄의 종류): solid ⊕ wave ⊕ double ⊕ dotted ⊕ dashed 등이 있다.

내용 보호/ 줄 끝 처리

내용 보호/ 줄 끝 처리
white-space	normal ⊕ nowrap ⊕ pre ⊕ pre-line ⊕ pre-wrap
word-break	normal ⊕ break-all ⊕ keep-all ⊕ break-word

list-style 속성

list-style 속성
list-style	type position image
list-style-type	none ⊕ disc ⊕ circle ⊕ square ⊕ decimal ⊕ armenian ⊕ georgian ⊕ hebrew ⊕ hiragana ⊕ katakana ⊕ lower-alpha ⊕ lower-greek ⊕ lower-latin ⊕ lower-roman ⊕ upper-alpha ⊕ upper-greek ⊕ upper-latin ⊕ upper-roman ⊕ cjk-ideographic
list-style-position	inside ⊕ outside
list-style-image	none ⊕ url

마우스 포인터 속성

마우스 포인터 속성
cursor	none ⊕ alias ⊕ all-scroll ⊕ auto ⊕ cell ⊕ col-resize ⊕ context ⊕ copy ⊕ crosshair ⊕ default ⊕ e-resize ⊕ n-resize ⊕ s-resize ⊕ w-resize ⊕se-resize ⊕ ns-resize ⊕ew-resize ⊕ ne-resize ⊕ nwse-resize ⊕ grab ⊕ grabbing ⊕ help ⊕move ⊕ no-drop ⊕ not-allowed ⊕ pointer ⊕ progress ⊕ row-resize ⊕ url⊕ zoom-in ⊕ zoom-out ⊕ text

그림자 속성

그림자
text-shadow	x-len y-len blur-len color
box-shadow	x-len y-len blur-len spread-len color

---

JAVA

자료형

자료형
기본 자료형	스택 메모리에 생성된 공간에 실제 변수값을 저장. 소문자로 시작. 직접 주소
참조 자료형	실제 데이터값은 힙 메모리에 저장하고, 스택 메모리의 변수 공간에는 실제 변숫값이 저장된 힙 메모리 위칫값을 저장. 대문자로 시작. 간접 주소
Wrapper 타입	기본 자료형(int)의 참조형으로 해당 기본 자료형과 호환 가능.

제어문

// 조건문
if(조건문){실행문;}
else if(조건문) {실행문;}
else {실행문};

switch(조건문){
    case 값1:
        실행문;
        break
    case 값2:
        실행문;
        break
    default:
        실행문;
        break;
}

• else if나 else는 반드시 if문과 함께 쓴다.
• switch의 case에서 break를 쓰지 않으면 해당 case 외에 다른 조건을 만족하는 case의 실행문도 작동한다.

// 반복문
for(;;){실행문} // 무한 루프
for(초기식; 조건식; 증감식) {실행문;}
// for-each문
for(자료형 변수: arr){실행문;}
for(String s: s_arr) {System.out.println(s)}

초기식;
while(조건식){실행문; 조건식;}

초기식;
do{
    실행문;
    증감식;
} while(조건문);

• for문은 초기식으로 시작해서 조건식 → 실행문 → 증감식이 반복된다. 조건식을 만족하지 못하는 순간 for문에서 벗어나게 된다.
• do-while문은 실행 후에 조건을 판단하기 때문에, 무조건 한 번은 실행되게 된다.

배열

• 배열은 동일한 자료형을 묶어 저장하는 참조 자료형이다. 배열에 넣어진 순서를 index라 한다

int arr[];
int arr[] = new int[n]; // 0으로 초기화된 n 크기의 배열
int arr[] = {1, 2, 3, 4, ..., n}; // 각 값으로 초기화된 n크기의 배열

int array_length = arr.legnth; // 배열의 크기는 .length를 사용한다.

// 선언. 메모리 할당이 이루어지지 않음
int[] a;
int b[];

//  할당과 초기화
b = new int[]{90, 80, 85, 60};
// 추가 할당 시에는 문법적 오류 없지만, 실제론 할당되지 않아 Exception 발생

// 선언 및 할당
int[] c = new int[n]; // n크기의 0으로 초기화된 배열이 생성됨.

float[] d = new float[3];
System.out.println(d[0]); // 0.0으로 초기화된 배열

char[] e = new char[3];
System.out.println("*"+e[0]+"*") // '' 아무것도 없는 초기화된 배열

String[] f = new String[3];
System.out.println(f[0]); // null로 초기화된 배열

boolean[] e = new boolean[3]; // false로 초기화 되었다.

// 선언 및 초기화
int[] a = {90, 75, 80, 85};
int[] b = {85, 10, 70, 90};
int[] c = new int[4];
// c[4] = 100; 과 같이 작성할 수는 있지만, 컴파일 시 Exception이 발생한다.

// java6 이후 추가된 배열 for문 문법
for(int i:배열_명){
    실행문;
}

Arrays.toString(char_arr); // 배열을 string으로 변환하여 출력 형태로 만들어 준다.

💡String배열은 null로 초기화되므로, null pointer exception 발생할 수 있다.

n차원 배열

int[][] arr_2d = new int[행][열];
int [][][] arr_3d = new int[면][행][열];

// 2차원 배열 순회
for(int i=0; i<arr_2d.length; i++){
    for(int j=0; j<arr_2d[0].length; j++){
        System.out.print(arr_2d[i][j]);
    }
    System.out.println();
}

// 3차원 배열 순회
for(int i=0; i<arr_3d.length; i++){
    for(int j=0; j<arr_3d[0].length; j++){
        for(int k=0; k<arr_3d[0][0].length; k++){
            System.out.print(arr_3d[i][j][k]);
        }
        System.out.println();
    }
    System.out.println("---------");
}

String 클래스

string1.equals(string2); 
// string1과 string이 같은 지 봐준다.
string1 = string1 + 변수; 
// string1에 string1과 변수를 문자열로 연결한 값이 나온다.

string.substring(begin_idx, end_idx) //string의 begin_idx부터 end_idx-1까지 문자열을 가져온다.

string.indexOf('c') // 앞에서부터 빠른 순서를 반환한다.
string.lastIndexOf('c') // 뒤에서부터 빠른 순서를 반환한다.

string1 = string1.concat(string2); // string1에 string1과 string2를 결합한 내용이 대입된다.

char[] char_arr = string1.toCharArray(); // string1 문자열을 문자 배열로 변환한다.
byte[] byte_arr = string1.getByte(); // string1을 바이트로 변

String.valueOf(변수); // 변수를 string으로 변환

string.toUpperCase(); // 대문자 변환
string.toLowerCase(); // 소문자 변환
string.repalce(old, new); // string의 old를 new로 변환

string.split("기준"); // 기준에 따라 문자열을 나누어 배열로
string.split("기준1|기준2"); // 기준들에 따라 문자열 나눔. |는 기준으로 사용 불가.

blank_string.strip() // 양쪽 공백 제거
blank_string.trim() // 양쪽 공백 제거
blank_string.stripLeading() // 왼쪽 공백 제거
blank_string.stripTrailing() // 오른쪽 공백 제거

• string.indexOf('c') / string.lastIndexOf('c'): 문자열의 특정 내용을 탐색할 때는, 해당 내용이 여러 개라면 시작 점에서 가장 가까운 내용의 인덱스가 반환 된다. 만약 문자가 아니라 문자열을 탐색할 경우에는 문자열의 시작 문자 인덱스를 반환한다. 탐색하고자 하는 내용이 없다면 -1이 반환된다.

클래스

• 클래스: 객체를 만드는 틀
• 인스턴스(객체): 클래스로부터 만들어진 고유한 인스턴스
• 멤버 필드(속성): 클래스의 고유한 변수. 필드는 반드시 private으로 설정하고, 세터와 게터로 접근해야 한다.
• 멤버 메소드: 클래스의 함수
• 생성자(함수): 클래스로부터 객체를 만드는 constructor.
• 멤버 상수: 클래스의 고유한 변하지 않는 상수 값. 별로 사용하지 않는다.
• 세터(setter): 필드의 값을 설정하는 메소드.
• 게터(getter): 필드의 값을 가져오는 메소드.

💡생성자 함수명은 클래스명과 같아야 한다.

• 접근 제한자에는 public, default(생략), private가 있으며, 내림차순으로 접근 범위가 적어진다. 기본적으로 클래스는 default의 접근 제한자를 가지고 있으며, 이는 같은 디렉토리에서만 접근할 수 있게 해준다. public은 어떤 패키지에서도 접근할 수 있는 권한을 준다. 마지막으로 private는 현재 클래스 내부에서만 접근할 수 있다.

public class Elemental extends Score {
    private int fun;
    public Elemental() {
		super(); // 상속받는 부모(상위) 클래스를 지칭할 땐 super
    }
    
    public void setFun(int fun) {
        this.fun = fun; // 현재 클래스를 지칭할 때는  this
    }
}
// intelij 기준 shift+f6 눌러서 클래스 이름 변경

• 오버로딩: 하나의 클래스 내부에서 매개변수 개수 또는 타입이 다르면, 같은 이름으로 여러 함수를 만들 수 있다. 생성자 오버로딩, 메소드 오버로딩 등이 대표적인 예시이다.
• 오버라이딩: 상속받는 속성을 하위 개체가 새로 정의하는 것이다.

변수

• 전역변수(global): 괄호 안팎에서 인식 가능한 변수이다.
• 지역변수(local): 변수가 정의된 특정 중괄호 블록 내부에서만 인식 가능한 변수이다.
• 매개변수(parameter) / 인자(argument): 매개변수는 지역변수로 정의된 함수의 중괄호 블록 내부에서만 유효하다. 따라서 범위가 다른 함수에서 동일한 매개변수를 사용할 수 있다.

💡범위가 다르지만 같은 이름의 변수가 있다면 해당 중괄호에 더 가까운(하위 수준) 변수가 우선적으로 적용된다.

지정자
static	오버라이딩 불가. 즉 업캐스팅할 때 후에 정의된 자식의 메소드가 아니라, 부모의 메소드가 호출된다.
final	상속 불가. 호출은 가능

---

성찰

1. 한 번 배웠던 내용임에도 자바의 클래스 오버라이딩, 오버로드에 대해 잘 정리가 안 되어 있다. 이번에 확실히 개념을 잡고 넘어가야겠다.
2. css는 배운 게 많아서 한 번 다 실행해봐야겠다. 스타일을 인라인 방식으로 쓰는 게 안 좋다고는 하지만, 지금처럼 하나한 실행해 볼 때는 더 직관적이어서 나은 것 같다.
3. html과 javascript, RDBMS간의 관계가 잘 이해가지 않는다. 조금 더 찾아봐야겠다.

---

핵심 정리

• 다음 코드에서 잘못된 부분을 찾고, 그 이유를 설명하라.

String in_put = ''; 
while(in_put != "Q")
{ 
	in_put = scanner.nextLine().trim();
	String[] arr = in_put.split('|'); 
	for(i=0; i<arr.length(); i++){ System.out.print(arr[i]); } 
}