오늘 킥복싱가서 스파링을 했다.
저 이틀찬데요........😅
주먹막고 발차기막고 정신이 하나도 없었다.
나름대로 열심히 막았지만, 다 맞은거같다 하하😂
정말 세상엔 쉬운일이 하나도 없는거같다.

CSS

🔷 Position

1. Position?

: 페이지의 레이아웃을 결정하는 속성

2. 종류

- static (기본값)
: HTML상의 순서에 따른 위치를 가짐,
부모 요소의 Position 속성을 무시하기위해 사용되기도 함

- relative
: 자신의 본래 위치에서 상대적(static)인 속성을 가짐
즉, top:10px;은 staic위치에서 위로 10px 이동한것

- absolute
: html을 기준점으로 하며,
왼쪽 가장 상단이 자신의 본래 위치라고 생각하고 이동함
만약 부모 요소가 relative, absolute, fixed 속성을 가지고 있다면, 부모 요소를 기준으로 이동함

- fixed
: 사용자 화면의 특정 부분에 고정되어 움직이지 않음

- sticky
: 부모 요소 내부에서 고정됨

✨참고
MDN_Position
https://developer.mozilla.org/ko/docs/Web/CSS/position

🔷 z-index

: z축의 순서를 지정함,
추후 상세수정이 필요할 경우를 대비해10단위로
사용하는 것이 바람직 (0, 10, 20, 30 ...)

🔷 Float

1. Float?

: 객체를 띄워서 정렬하는 속성,
블록 속성 객체를 정렬하는 방법으로 사용되고 있음

2. Float의 속성

• 좌측 정렬 float:left;

• 우측 정렬 float:right;

• 중앙정렬 속성은 없으나 ,
  margin: 0 auto; 를 사용해 중앙 정렬 가능

3. Float의 문제점

• 자식 요소에 float 속성을 부여하면, 자식 요소는 떠 있는 상태이므로 부모 요소가 자식 요소의 존재를 인식하지 못함

3. Float의 문제점 해결 방안

• 부모 요소에 overflow요소를 추가한다.
  ex) overflow: hidden; , overflow: scroll; ...

• float이 사용된 바로 다음의 형제 요소에 clear 속성을
  사용한다.

    clear: left;
    clear: right;
    clear: both;

• clear-fix
  : 부모 요소에 가상요소를 ::after를 덧붙여서 자식 요소를 알아보게하는 방법이다.

    .wrap::after {
    	content:'';
	    display:block;
	    clear:both;
    }

🔷 가상클래스

• :hover
  : 사용자의 마우스 커서가 요소위에 올라가있을때 실행됨
  모바일 기기에서는 사용되지않음
  

✨참고
MDN_:hover
https://developer.mozilla.org/ko/docs/Web/CSS/:hover

• :active
  : 사용자가 요소를 활성화할때 실행됨
  (버튼의 경우라면 클릭하고 있는 도중)
  

✨참고
MDN_:active
https://developer.mozilla.org/ko/docs/Web/CSS/:active

• :focus
  : 요소에 포커스가 있을때 실행됨
  클릭 할 수 있는 요소, input 등의 폼 컨트롤에서 사용가능
  (사용자가 요소를 클릭 또는 탭하거나,
  키보드 Tab 키로 선택했을 때 발동)
  

✨참고
MDN_:focus
https://developer.mozilla.org/ko/docs/Web/CSS/:focus

flex랑 grid는 좀 많이 어려운것 같다...
주말에 각 잡고 공부해야 제대로 이해할 수 있을듯😎