[KH국비지원 웹개발자 과정] Day_40 키워드 CSS 배치, 트랜지션, 애니메이션, 서버

해당 포스팅은 강의 복기용으로 키워드를 기록하는 용도의 포스팅입니다.
--------------------------------------------------------------------------------------------------

화면 만드는 실습)
레이어에 로그인폼 넣고 이미지 채워넣는 실습.

reset.css 태그를 기본값으로 복원해주는 css파일

네비게이터를 만들 때 ul / li 로 리스트를 만들고 css로 꾸며준다.

margin , padding, overflow:hidden

링크 선택자 
선택자 a:link{ }
선택자 a:visited{ }

배치관련 스타일 실습(Positioning)
position의 설정.
1.static 2.relative 3.absolute 4.fixed
-> fixed 기능은 뭔가 활용할 수 있을 것 같다.
position : static
기본 포지션. 이 상태에서는 오프셋이 적용되지 않음. Normal-flow에 따라 배치.
-> 위치를 마음대로 바꿀 수 없고 기본 설정에 고정이 되어있다는 것으로 이해.

position을 relative로 설정하면 기본 위치 기준으로 오프셋을 설정할 수 있다.

position을 absolute로 설정하면 부모 요소, 조상요소가 static이 아닐 때 까지 거슬러 올라가서 배치된다. 기준으로 오프셋을 설정할 수 있다.

fixed 브라우저의 창에 상대적인 위치에 보이도록 함. 스크롤을 움직여도 화면의 고정된 위치에 배치됨.

z-index 속성
: 요소간의 순서를 정할 때 사용한다. 부여하는 속성 값의 크기로 우선순위를 설정.

div영역은 기본적으로 횡단위로 영역이 꽉차기 때문에 아래로 쌓이게 됨.
이를 가로로 배치하기 위하여 사용하는 것이
1) float : left
2) display : inline-block

마우스 동작에 대한 태그 hover와 active

애니메이션은 실제 애니메이션을 만들듯 프레임으로 동작하며
이를 %단위로 설정한다.
@keyframes 애니메이션이름{
 0% { }
 25% { }
 50% { }
 75% { }
 100% { }
}
퍼센트별로 애니메이션 동작할 것을 설정하고
애니메이션을 적용할 CSS문에 animation속성을 설정하여 사용한다.

와이어프레임으로 화면 구성을 설계함.
-> 유용한 사이트

OvenApp.io

 

학원 프로젝트 시 작성할 문서
1. 프로젝트 시나리오 정리 - 기능, 컨셉에 대해 정리
2. 요구사항 정의서 - 요구사항 리스트, 정의서 작성
3. 요구사항 리스트
4. 유스 케이스
5. 와이어 프레임
6. 플로우 차트
7. 디비 모델링 및 ERD 
8. 클래스 다이어그램
9. 시퀀스 다이어그램
11. 최종 보고서
12. 시연 영상