position

position : static;
: 기본값

position : absolute;
: 다른 객체들의 범위 영향 X

position : relative;
: 부모에게 적용하면 자식은 부모범위로 제한

position: fixed;
: 스크롤바와 연동되는 absolute

z-index

: z축 개념. 누가 위에 올지를 결정

z-index: 3; -> 맨위
z-index: 2; -> 중간
z-index: 1; -> 중간 아래

z-index가 없으면 맨아래

wrap, nowrap, overflow

• white-space: wrap;
  : 줄바꿈 허용(기본값)

• white-space: nowrap;
  : 줄바꿈 안됌

• overflow: scroll;
  : 스크롤바가 생김

• overflow: auto;
  : 필요할 때만 스크롤바 자동 생성

• overflow: hidden;
  : 잘림

• text-overflow: ellipsis;
  : 잘리고 마지막에 ... 으로 표시

후손 선택자 사용법

.menu-box-1 > ul ul { / .menu-box-1 > ul > li > ul /
display:none;
position:absolute;
top:100%;
left:0;
}

HTML :
https://codepen.io/jangka44/pen/GRqRrvX

테이블 테그

(table) (/table)

thead, tbody

tr td

before, after

ul > li::after {
content: "님";
background-color:red;
}

ul>li::before {
content:"인기많은";
background-color:red;
}

transition

: 애니화

div {
background-color: red;
height: 100px;
width: 50%;
transition: width 2s;
}

div:hover {
width: 100%;
transition: width 1s;
}

transition: width 2s 1s, opacity 2s;
마우스 올리면 1초뒤 실행. 넓이와 투명도 2초간격.

transition: left 1s;
왼쪽간격 바뀌는데 1초

opacity

: 투명도

div {
background-color: red;
height: 100px;
width: 50%;
transition: width 2s, opacity 2s;
opacity: .3;
}

div:hover {
width: 100%;
transition: width 1s, opacity 1s;
opacity: .7;
}

opacity도 transition 적용 가능.

only-child

.side_bar > .menu_box_1 > ul > li > a:not(:only-child) {
color: red;
}

-> 형제가 있는 애들만

.side_bar > .menu_box_1 > ul > li > a:only-child {
color: red;
}

-> 외동인 애들만

사이드 메뉴 바 만들기 실습

https://codepen.io/jangka44/pen/OJMOvVR

flex

: 부모한테 지정하면 자식들은 자동 정렬.

연습페이지 : flexbox froggy 추천