html css 가시성제어, 마우스이벤트, not() 부정선택자,background

///가시성 제어 (show, hide)

1.display  - ********
    display:none (화면에서 완전히 제거)
    display:block (화면에서 다시나타남)
2.visibility
    visibility:hidden; (숨김) - 오브젝트는 존재
    visivility:visible (나타남)
3.opacity - ********
    0투명 ~ 1불투명
    박스안에 모든요소가 투명
    opacity : 0
    opacity : 1

*1번하고 3번을 많이 사용함

마우스이벤트
1.마우스가 올라가는 상태 (호버)
    hover (event + out)

    모바일에서 호버는 사용안됨

    모바일 : hover X

    CSS 구현가능
    -> 조건에 따라서 JS를 같이 사용

    CSS단독구현
    CSS + JS 혼용


    선택자1에 hover가 되었을때 하위요소 선택자2에 대해 제어

    선택자1:hover 선택자2 {
        display:block;
    }

    css에서 hover을 사용하여 하위요소 제어시
    하위요소는 상위요소 안에 있거나 경계에 걸쳐야됨.

    상위요소 밖으로 나가는 경우 -> js로 제어시



2.마우스가 클릭할때 (터치)

    CSS 구현도 가능하나 권장X

    CSS + JS 혼용

//////////////////

width -> 상위요소 -> 하위요소로 전달
hidght -> 하위요소 -> 상위요소로 전달

가로는 부모가 만들어주는게 좋고
높이는 자식이 만들어주는게 좋다

/////////리스트 구조에서 
1
2
3

번이 있을 때 ,

:first--child
:last-child
:nth-cjild(n)


:not(대상) :부정선택자
:not(:first-child) 첫번째요소를 제외한
:not(:last-child) 마지막요소를 제외한

.green > li:not(:last-child)  {
            border-bottom: 4px solid #f00;
}

//background

color
image
postion
repeat
size

background: color url repeat postion/size 

요기/슬래쉬에는 공백을 넣으면안됨



/////////////

block -> width 
    값이 없을 때 : 부모의 width를 적용

postion적용시 : width = 컨텐츠 크기만큼만 적용