css

[프로젝트] 버튼을 list 형태로 제출하는 방법 | button을 checkbox 처럼 사용하기 | list 형태 form 제출

현재 상황 각 카테고리에 맞게 버튼이 되어있고 카테고리를 클릭하고 검색 버튼을 누르면 그에 맞는 게시물이 아래에 렌더링되게 하고 싶다 여기서 특이사항은 카테고리 버튼은 여러개가 눌릴 수 있어야 한다는 것! 1. 첫 번째 방법 내가 생각한 첫번째 방법은 ajax를 이용해서 클릭된 카테고리 버튼의 배열을 저장하는 것이다. list.html의 일부이다. id는 카테고리의 id로 지정하고, 클릭시 id를 파라미터로 넘겨주는 onClick 함수를 호출한다. onClick 함수부분의 처리는 다음과 같다 이렇게 arr이라는 배열을 선언하고 클릭시 파라미터로 받은 id를 arr에 넣어준다. 버튼이 bootstrap으로 꾸며져있어서 클릭효과를 주기 위해서 active를 토글하는 방식으로 배경색을 입혔고, arr 배열에 ..

[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-..