18일차_HTML/CSS (10)

css 속성 더 알아보기

 

text-indent 글자 들여쓰기

 

overflow : scroll

overflow-x : scroll

overflow-y : scroll

x가 넘쳤을때 스크롤

y가 넘쳤을때 스크롤

하지만 둘 중 하나만 줘도 나머지도 스크롤이 기본값으로 생긴다.

 

transform : rotate()

회전

 

transition : 

전이. 움직인다.

 

ex)

div를 hover하면  180도 시계방향으로 3초에 걸쳐서 회전

 

결과

 

 

text-overflow : ellipsis

텍스트가 넘쳤을때 생략

* ellipsis 생략

 

 

z-index

위로 떠있는 정도?를 설정해주는 속성

네비게이션 메뉴나 팝업창은 z-index를 다른 것들 보다 값을 크게 줘야한다.

특히 팝업창은 제일 크게 값을 줘야한다.

position을 안주면 기본적으로 static으로 되어있기때문에 position을 같이 줘야 z-index를 줄 수 있다.

 

ex)

z-index 주지 않았을 때

z-index 를 주었을 때

 

 

 

+) position:absolute 는 z-index 없이도 위로 뜬다.

+) position:fixed 는 계속 그 자리에 고정되어 있는다.

                                             스크롤을 내렸을때 그 위치 그대로 남아있는 메뉴나 탑버튼같은 것 만들때 쓰는 속성

z-index 없이 Two박스에만 position:absolute 를 준 경우