🐤 study/HTML | CSS

[CSS] flex | align-items | justify-content | flex-direction | flex-wrap | layout 배치방법

✨ flex 개념 ✔️ flexible box라고도 부른다. ✔️ layout 배치의 기능을 수행한다 속성 1️⃣ display: flex flex container를 정의할 때 사용 (1)가로방향으로 flex item배치, (2)내용물의 width만큼 차지, (2)container의 높이만큼 height 증가 2️⃣ align-items (1) align-items: flex-start; : 아이템을 시작점 기준으로 정렬 기본값 (2) align-items: flex-end; : 아이템을 끝으로 정렬함 (3) align-items: center; : 아이템을 가운데로 정렬함 3️⃣ justify-content 메인방향 아이템 정렬(가로배치일 경우엔 왼쪽, 세로 배치일 때에는 위쪽 정렬) (1) just..

[CSS] CSS 가상 선택자 nth-child, nth-of-type

(1) :nth-child(N) : 부모 안 모든 요소 중 N번째 (2) M:nth-of-type(N) : 부모 안 M 요소중 N번째 예제 ) 신호등..?만들기 : div 세개로 각 box들이 구성되어 있다고 가정(고유 이름 x) /*1-2.css*/ div { width:100px; height:100px; margin-left:0; background-color:red; } div:nth-child(2) { background-color:gold; margin-left:auto; margin-right:auto; } div:nth-child(3) { background-color:green; margin-left:auto; } section { border:5px dotted gray; } 특정 방향..

[CSS] 롤오버(hover)란? | hover 사용법 | hover 예제

🔥 CSS [실습 1] 롤오버(hover) 사용하기 hover란? : 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 전환되는 css 요소 사용법 : 이벤트를 적용하고 싶은 위치에 :hover 선언 예시) div:hover { background-color : pink; } 박 다 안녕? 정 /* hober.css */ section, div { width: 150px; height: 150px; margin: 20px; background-color: yellow; font-size: 2rem; color: white; text-align: center; } div { background-color: pink; display: none; } section:hover ~ div:not(:nth-..