CSS 한 걸음 더

CSS Diner 소개 - 기본적은 CSS 선택자 복습

    ● : 가상클래스

    ● :: 가상요소

    ● 태그이름

    ● .을 이용해서 클래스 선택가능

    ● #을 통해서 id 선택가능

추가적인 CSS 선택자

    ● *로 모든걸 선택할 수 있음

    ● 선택자 + " " + 선택자 로 선택가능

    ● 선택자 + "+" + 선택자: 다음 클래스에 적용가능 

    ● 선택자 + ">" + 선택자: 직계자손만 선택해서 적용가능

    ● 선택자 + "~" + 선택자:  앞 선택자 다음에 뒤 선택자 나오면 적용

    ● [] : 속성 선택자 

CSS 가상 클래스

    ● : 로 선택함

    ● :hover 는 마우스를 올리면 적용

    ● :link 는 사용자가 클릭하기 이전의 링크에 적용

    ● :visited 는 클릭을 한번이라도 한 링크에 적용

    ● p:net(.class) 는 class가 선택되지 않은 p태그에 적용

    ● .class p:nth-chilkd(1) 는 첫번째 p태그에만 적용

    ● .top-class .bottom-class:nth-of-type(1) 는 첫 번째 bottom-class에만 적용

    ● nth-last-child나 nth-last-of -type은 뒤에서부터 ~번째

CSS 가상요소

    ● ::로 선택함

    ● ::first-line, ::first-letter 는 첫번째 라인이나 첫번째 글자에 적용

    ● ::after, ::before 는 content 속성을 필수로 사용해야함. ~이전과 이후에 적용

에어비앤비 클론코딩 예고

    ● position 은 우리가 만든 태그의 위치를 임의로 바꿀 수 있음

    ● media-query 는 화면의 사이즈에 따라 달라지는 브라우저를 조절

    ● transition/ animation 스크롤에 따라 css를 변경할 수 있음

태그의 위치를 내 마음대로 - Position 속성개요

    ● position: absolute; 기준이 부모가 됨

    ● position: fixed;  기준이 브라우저
    ● position: relative;  원래 내 위치가 기준

    ● position: static;  기준이 없어서 좌표적용이 안됨

태그의 위치를 내 마음대로 - Position 속성 fixed와 absolute

   

 

    ● position absolute를 썼더니 target값이 parent 태그에서 100px 떨어져서 위치한것을 알 수 있음

 

    ● position fixed를 썼더니 target값이 브라우저에서 100px 떨어져서 위치

태그의 위치를 내 마음대로 - Position 속성과 z-index

    ● 콘텐츠가 겹쳤을 때 z-index를 부여해서 자리를 바꿔 줄 수 있음

브라우저 크기마다 CSS가 바뀌는 Media query

.box {
    width: 100%;
    height: 100px;
    border: 4px solid red;
    background-color: yellow;
}

@media screen and (max-width: 1260px) {
    .box {
        background-color: red;
    }
}

@media screen and (max-width: 768px) {
    .box {
        background-color: blue;
    }
}

@media screen and (max-width: 576px) {
    .box {
        background-color: green;
    }
}

    ● @media screen and로 width값이 변함에 따라 백그라운드 색 변하게 할 수 있음