[CSS] display 속성(none, block, inline, inline-block), hover
- 웹 개발/CSS
- 2019. 4. 28. 00:59
display
- 요소의 출력 방식을 제어
- none : 안보이기
- block : 블럭태그
- inline : 인라인 태그
- inline-block : 인라인 태그(+크기(여백) 조절), 인라인이지만 블럭태그 처럼 너비를 가질 수 있음. 블럭태그의 속성
예제보기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #menu ul{ width:500px; border:0px solid black; padding:0px; } #menu ul li{ border:0px solid red; outline:0px solid red; display:inline-block;/* 성질(인라인) + 크기조절*/ width:125px; text-align:center; /* height:20px; */ padding-top:10px; padding-bottom:10px; background-color:#eee; border-top:25px solid #ddd; border-bottom:10px solid #ddd; font-size:14px; color:#777; } #menu ul li:hover{ border-top-color:tomato; border-bottom-color:tomato; background-color:#FFE5D4; font-weight:bold; cursor: pointer; } </style> <title></title> </head> <body> <nav id ="menu"> <ul> <li>회원</li> <li>관리자</li> <li>게시판</li> <li>통계</li> </ul> </nav> </body> </html> | cs |
:hover
- 마우스를 대면 나타낼 CSS 효과를 지정함.
- 위의 소스대로 페이지를 그리면 회원,관리자,게시판,통계 에 마우스를 갖다 대면 CSS 효과가 바뀜
- 자바스크립트의 mouseover 이벤트와 비슷
'웹 개발 > CSS' 카테고리의 다른 글
| [CSS] 그림자, text-shadow 속성 (0) | 2019.05.08 |
|---|---|
| [CSS] Position 속성(static, absolute. relative, fixed) (1) | 2019.05.01 |
| [CSS] overflow 속성 알아보기 (2) | 2019.04.24 |
| [CSS] 수치표현 (pt,px,em,%,rem,ex,mm,cm,pc, in) (0) | 2019.04.21 |
| [CSS] 스타일 시트 선택자(Selector) 개념 및 사용법 종류 (0) | 2019.04.20 |