(HTML/CSS) 마우스 오버(hover), 상속, 명시도, display (6)

*마우스 오버

• 마우스를 위에 올렸을 때 속성을 적용합니다.

• h1:hover{color:red;}: 마우스를 가져다대면 색이 빨간색으로 바뀝니다.

 

*상속

• 상속되는 속성 예시: color, font-family, font-size, font-weight, line-height, list-style, text-align, visibility

• <a>태그는 color 상속이 안됩니다.

• .class a{color: inherit;}통해 상속이 가능합니다.

 

*클래스 우선순위

• 완전 똑같은 선택자 나오면 이전에 나온 스타일을 덮어씌웁니다.

 

*명시도 

• 같은 요소 다른 선택자에서 우선순위를 결정하는 지표입니다.

 

*명시도 계산법

 

1. inline 스타일이 가장 우선 순위가 높습니다.

2. 선택자에 id가 많을수록 높습니다.

3. 선택자에 class, attribute, pseudo-class 많을수록 높습니다.

4. 요소가 많을수록 높습니다.

 

*display

 

• inline display: 다른 요소들과 같은 줄에 머무르려 하는 성향, 가로길이는 필요한 만큼 차지합니다.

• 예시: <span>, <b>, <i>, <img>, <button> 등이 있습니다.

• block display: 새로운 줄에 가려고 함, 가로길이를 최대한 많이 차지하려 합니다.

• 예시: <div>, <p>, <h1>, <nav>, <ul>, <li> 등이 있습니다.

• {display:block; display:inline;}: 서로 바꾸기가 가능합니다.

• inline 요소는 길이설정이 어렵습니다.