CSS

복습

position 속성 5가지

https://cafe.naver.com/hamminglab/21508

display 속성

https://cafe.naver.com/hamminglab/21509

CSS 기초를 알고있는지 체크

1. https://cafe.naver.com/hamminglab/17689
   위 글 안의 파일을 다운로드 하고 모르는 부분이 있다면 찾아보기.
2. 와이어 프레임을 찾고, 해당 화면을 CSS로 구성할수 있는지 확인

레이아웃(Grid, Flex, +position,float)

1. 세부내용
   • https://cafe.naver.com/hamminglab/21507
   • 완벽정리: https://heropy.blog/2019/08/17/css-grid/
2. float는 이제 거의 사용하지 않는다. 현대 웹에서는 flex와 grid를 혼용하는 추세이다. flex가 적합한 곳에는 flex를, grid가 적합한 곳에는 grid를 선택해서 사용한다.
   - float가 쓰이지 않는 이유? → 반응형 웹에 적합하지 않기 때문이다.
   - 그런데 배우는 이유?
   → float를 사용한 코드도 읽을 수 있어야 하니까!
   → 레이아웃이 어떻게 변해왔는지 알면 flex를 더 효과적으로 사용할 수 있으니까!
3. 화면 모든 구성요소를 position 으로 구성하는것은 잘못된 코딩습관임. 모든 요소는 최대한 기본 흐름을 유지하면서, position은 정말 필요한 대상에만 속성을 사용해야 함.

좌표

1. position: 좌표 기준점 절대(0, 0, 0) /상대(해당 요소 왼쪽위 모서리)
2. grid: 2차원
3. flex: 1차원

position 속성

1. static: default
2. relative: 기준점이 요소 왼쪽 위
3. absolute: 기준점이 웹브라우저의 왼쪽 위 모서리
4. fixed: 웹브라우저의 왼쪽 위 모서리를 기준으로 지정된 위치에 고정됨(해당 위치에 다른요소를 가림) 스크롤시 바로 이동
5. sticky: 초기엔 static처럼 표시(다른 요소를 가리지 않음). 스크롤중 설정값에 도달하면 그 자리에 고정됨. 그전까지는 이동함.
   표의 컬럼명을 스크롤 시에도 고정표시할때 사용
   W3C 정식표준은 아니므로 호환성 확인할것
6. z-index: 수평 x / 아래로 수직 y / 튀어나온 정도(레이어)를 z로 생각하면된다. z인덱스를 설정하면 그만큼 다른 아이템 보다 위로 올라온다. 그래서 9999로 설정하면 겹친 아이템중 맨 앞으로 나온다.
7. 주의점:
   • absolute, fixed외에는 html 기본값이 margin 10px임을 생각하고 사용해야함. 잘림현상 방지 safe area로 부여된값임

float 속성

1. 이미지와 텍스트 요소 배치
2. 블록 성격 요소를 인라인 성격 요소처럼 배치하기
3. 문제점

웹디자인에서 mock 글자가 필요한 경우

lorem ipsum
1.한글사이트 http://guny.kr/stuff/klorem/#/table-html
2.영문사이트

clear 속성

1. float 속성 해제(left, right, both)
2. 하나의 블록이 끝난 마지막줄에 써서, 다음블록이 시작되기 전에 clear 사용. 블록 안의 중간라인에 쓰면 안됨.

transition

아래 사용 사례만 알면된다.

.nav>li{transition: all 0.4s;}

animation, transform 건너뛰기

웹 폰트

1. 추천사이트

CSS 기타

게시판 작성시 지켜야 될것

1. 데이터 정렬을 역순으로
2. 앞페이지 Full, 마지막 페이지는 전체리스트%Full
3. First 와 End
   • 첫페이지에는 First 버튼 ==> Disable 처리
   • 끝페이지에는 End / Next 버튼==> Disable 처리

form 작성시 사용자 편의성

1. autofocus
2. 한/영전환(form ime 사용)
3. 탭 전환(JS로 구현)

JAVA

추상클래스

1. 선언

public abstract class Animal{
//필드
//생성자
//메소드, 추상메소드
}

2. 메소드 선언과 정의

• 추상클래스 내 일반메소드는 메소드 내용을 정의해야함
• 추상클래스 내 추상메소드(abstract)는 메소드 내용을 정의하지 않아도 됨.

3. 사용

• 부모 추상클래스의 추상메소드는 반드시 재정의(오버라이드) 되어야 한다.

public class Dog extends Animal{
//추상메소드 재정의 필수
}

인터페이스

• 메소드는 반드시 재정의(오버라이드) 되어야 한다.

과제

1. 웹디자인기능사 -> ex3_icon&foot 일일히 주석달기 어려우면 ex3_zero 부터 차근차근 학습
2. mybox에서 uml 기능 3가지 .pdf 확인
3. float 하기 p.234
   • 블록 성격 요소를 인라인 성격 요소처럼 배치하기
   • 문제점