HTML/CSS 블럭요소(div), 인라인요소(span), style선택자 + 선택자 우선순위

블럭요소 : p, pre, div

한 줄 단위로 영역 차지

줄바꿈 적용: 사용한 태그의 다음줄에 다음 영역 잡힘

인라인요소: b, mark, s, img, span

content(내용) 영역에 해당하는 부분만 차지

줄바꿈 적용 X: 사용한 태그의 바로 옆에 영역 잡힘. 즉, 같은 줄 에 다음 영역 잡힘

 

 

style을 위한 선택자

1. 모든 선택자 : *
2. 태그 선택자 : 태그명
3. 아이디 선택자: #아이디
4. 클래스 선택자: .클래스명

 

예)

        li{

            background: brown;

        }

        #id1{

            color: aliceblue;

        }

        .class1{

            color: green;

        }

 

기타 선택자

1. 속성선택자
  속성을 적용할 요소에 미리 작성된 속성 선택 적용
* 선택자[속성=속성값] : 일치
* 선택자[속성~=속성값] : 속성값 포함
* 선택자[속성|=속성값] : 속성값으로 시작(키워드X)
* 선택자[속성^=속성값] : 속성값으로 시작(키워드O)
* 선택자[속성$=속성값] : 속성값으로 끝나는
* 선택자[속성*=속성값] : 속성값 중에 포함

/*div 요소 중 class 속성 값이 class로 "시작"하는 요소(-로 구분, 키워드로는 ㄴㄴ = 단어로써 완벽해야)"*/

div[class|=class]{

    background-color: blue;

 

 

2. 자손(한 태그 아래 바로 위치한 하위 요소)선택자, 후손(하위 요소 전부)선택자
  요소 중첩 작성 가능

* a>b{스타일속성 : 값;}
* a  b{스타일속성: 값;}

/* id가 test1인 요소의 자손들 중 h4요소만 선택 */

#test1>ul>li{

    background-color: blue;

}

/* a b : a 요소의 후손들 중에서 b 요소 모두 선택 */

#test1  h4{

    color: aliceblue;

}

 

 

3. 동위선택자
 동위관계(같은레벨) 뒤에 있는 요소 선택

* a 요소 바로 뒤에 있는 b 요소 "하나만" 선택*
 a+b{스타일속성 : 값;}
* a요소 뒤에 있는 "모든" b 요소 선택
 a~b{스타일속성 : 값;}

#test2~ul{

    background-color:aqua

}

 

 

4. 반응선택자
 사용자의 움직임에 따라 선택

* 해당 요소 클릭 : 스타일부여
선택자:active{}
* 해당 요소 마우스 올라가면: 스타일부여
선택자:hover{}

#hover-test:hover{

    background-color: pink;

    color: white;

}

 

 

5. 상태선택자
 요소 상태에 따라 선택

* 체크된(checked) 상태 요소
선택자:checked{}
* 초점(focus)이 맞춰진 input 요소
선택자:focus{}
* 활성(enabled), 비활성(disabled) 요소
선택자:enabled{}

input[type=checkbox]:checked+label{

    font-size: 20px;

}

/* 2) 초점 상태 */

input[name^="user"]:focus{

    background-color: orchid;

}

button:disabled{

    background-color: violet;

    opacity:0.8 /*투명도?선명도?*/

}

 

 

 

+

• 선택자 우선순위

- 기본 : 위에서 아래로

- 우선순위 : 동일한 요소에 다양한 선택자로 css 부여 시

   => 태그선택자 → 클래스선택자→ 아이디선택자→ 인라인스타일방식→ !important(강제로 높게)