본문 바로가기
반응형

CSS4

유행하는 텍스트 hover시 css transform 3d transform-style: preserve-3d; 2023. 8. 9.
position sticky 속성 사용법 총정리 (sticky적용이안된다고?내가도와줌) position sticky 속성 사용법 총정리 (sticky적용이안된다고?내가도와줌) position속성은 html의 위치를 설정해줌 ------------------------------- position 속성의 종류 :: static, relative, absolute, fixed, sticky 1. static :: 기본설정값, 정적, top-right-left-bottom속성영향X 2. relative :: 상대, 상위객체에 사용, 렐러티브(relative)는 html요소의 기본위치를 기준으로 설정한다. 3. absolute :: 절대, 하위객체에 사용, 예를 들어, 상위인 렐러티브(relative)를 잡았으면 하위 앱솔루트(absolute)를 사용한다. 겹치기 설정할때, 렐러티브(relativ.. 2022. 6. 28.
[css속성] grid 파헤쳐보자! flex - 1차원 레이아웃(한방향) grid - 2차원 레이아웃(두방향, 가로세로) [참고] flex 속성 [css속성] flex 완벽 정복해보자 block 과 inline-block, float 을 쓰던 나는...고인물이였구나ㅋㅋ 편하게 레이아웃을 잡아보자. flexbox는 flex-container(부모요소) 안에 flex-item(자식요소)들이 있다. 각 속성마다 예제를.. shadesign.tistory.com ▶ grid-container (컨테이너) 적용 속성 ◾ display: grid ◾ gird-template-columns //열배치(가로), 여러단위사용가능 gird-template-rows //행배치(세로) ex) gird-templa.. 2022. 1. 28.
[css속성] flex 완벽 정복해보자 block 과 inline-block, float 을 쓰던 나는...고인물이였구나ㅋㅋ 편하게 레이아웃을 잡아보자. flexbox는 flex-container(부모요소) 안에 flex-item(자식요소)들이 있다. 각 속성마다 예제를 만들어봤는데 보면 쉬울것!(참고하시오) ▶ flex-container (컨테이너) 적용 속성 ▶ flex-item (아이템) 적용 속성 • display : flex; *예제 더보기 .container{ display:flex; /* display:inline-flex; */ - 인라인블럭과 비슷 } • flex-direction *예제 //배치방향설정 • flex-wrap *예제 //줄바꿈 설정 • flex-flow *예제 // flex-direc.. 2022. 1. 27.
728x90
반응형