css: 속성선택자, 상태 선택자, position, z-index, 실습(클론코딩)

 

속성선택자

선택자[속성] : 속성을 가지고 있는요소를 찾아라

선택자[속성="내용"] : 속성의 값으로 내용인요소를 찾아라

선택자[속성^="내용"] : 속성의 값으로 내용으로 시작하는 요소를 찾아라

선택자[속성$="내용"] : 속성의 값으로 내용으로 끝나는 요소를 찾아라

선택자[속성~="내용"] : 속성의 값으로 내용이 포함된 요소를 찾아라(찾는 내용물이 독립된 단어일때)

선택자[속성*="내용"] : 속성의 값으로 내용이 포함된 요소를 찾아라

* 선택자[속성!="내용"] : 속성의 값으로 내용이 포함되지 않는 요소를 찾아라 jQuery

 

상태선택자

#hobby:checked + label{
    font-size:50px;
    color:green;
}
input[type="radio"]:checked +label{
    background: pink;
}
input[type="text"]:focus{
    background: aqua;
}

 

Position

:absolute 부모요소 설정 必, 未설정 시 body 기준

:relative 기준 위치 설정

위치값 설정 : left, right, top, bottom (패딩 넣는다고 생각, 혹은 실제로 움직이고 싶은 위치와 반대로)

 

z-index

: 항목에 숫자 입력, 숫자가 높은 수록 priority

 

 

* css 공통사항 작성 시 * 전체선택자이지만 cross-browsing 위해 

*,h1,h2,h3,h4,h5,p,input,button,ul,li,ol{
    margin:0;
    padding:0;
}

 

* vertical-align은 텍스트 혹은 테이블에만 사용

 

* css로 역삼각형 만들기

        div{
/*            background-color:pink;*/
            width:0px;
            height:0px;
            border-top:10px solid red;
            border-right:8px solid transparent;
            border-bottom:10px solid transparent;
            border-left:8px solid transparent;
        }

 

* 마크업 태그 제대로 썼는지 유념하기

* nav와 #nav, 오타 등등 조심할 것