공부기록용

❓레이아웃을 자유자재로 사용하는 것을 연습하는 도중 가로로 배열하는 일이 더 많았음 자주 사용하는 방법 정리하기로❓ 1 2 3 section{ border: 5px solid; } article{ background-color: yellow; height: 100px; width: 200px; border: 1px solid red; } 이 block요소의 배치를 가로로 바꿔보기! 1. float속성을 사용하기(+overflow: hidden) float속성을 사용하여 배치를 바꿀 수 있다. section { border: 5px solid; } article { background-color: yellow; height: 100px; width: 200px; border: 1px solid red; f..

* : HTML페이지 내부의 모든 태그를 선택 *은 페이지에 있는 전체요소를 대상으로 한다. #A: id가 A인 태그를 선택 #은 id가 부여된 요소를 대상으로 한다. 🔻id는 문서에서 중복되지 않도록 한 요소에 한 개의 아이디를 사용한다. 🔻id선택자는 유연성이 없고 재활용할 수 없다. .A: class가 A인 태그를 선택 .은 class / className가 부여된 요소를 대상으로 한다. 🔻class이름은 서로 다른 태그에서 중복으로 사용 가능하다. 🔻같은 유형의 여러 요소를 선택할 때 사용한다. 🔻하나의 요소에 2개 이상의 class를 적용할 수 있다. ➡️ 띄어쓰기로 구분해줌(target, id도 여러개 사용 가능 하지만 지양!) A B: 태그명이 A인 태그와 B인 태그를 선택 따로 class나..

미디어쿼리 웹 페이지 또는 앱의 디자인을 다양한 장치의 크기나 속성에 맞게 조정할 수 있도록 해준다. 주로 반응형 웹 디자인에서 사용된다. max(최대값): 이하를 의미, 보다 같거나 작은 경우를 지원한다. min(최소값): 이상를 의미, 보다 같거나 클때 경우를 지원한다. 📌 only 키워드는 오래된 브라우저에서 미디어 유형만 지원하고 미디어 특성을 지원하지 않는 경우를 방지하기 위해 사용된다. and 연산자를 사용하면 여러 조건을 조합할 수 있다. CSS 파일 자체를 미디어 쿼리를 기반으로 분기하고 싶은 경우, HTML에서 태그에 미디어 속성을 사용할 수 있다. 미디어쿼리 사용 시 주의사항💫 @media 쿼리의 사용시 meta태그에 viewport라는 속성을 지정해주어야 한다. 웹 페이지가 모바일 기..

Transformrotate: 요소를 회전scale: 요소를 확대 또는 축소skew: 요소를 비틀기 translate: 요소의 위치 이동rotatetransform: rotate( angle )평면으로의 회전angle에는 각의 크기를 입력단위는 deg, rad, grad, turn 등을 사용turn은 1회전, 즉 360deg를 의미각이 양수인 경우 시계방향으로 회전(음수도 가능하며 음수의 경우 반시계 방향으로 회전)transform: rotateX( angle )rotateX는 가로를 축으로 하여 회전transform: rotateY( angle )rotateY는 세로를 축으로 하여 회전scaletransform: scale(x, y)1보다 큰 수는 확대, 1보다 작은 수는 축소가로로 x배, 세로로 y배..

https://cssgridgarden.com/#koGrid GardenA game for learning CSS grid layoutcssgridgarden.com 🥕 grid-template-columns와 grid-template-rows % 비율 정하기다음의 비율은grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%;로 각 속성에는 5개의 열을 만드는 5개 값이 있으며, 각 열은 정원의 20% 너비 설정된 상태이다. 값의 갯수가 각 grid의 갯수가 되고 %는 각 grid의 차지 비율!grid-template-columns: 50% 50%; grid-template-rows: 20% 20% 20% 20..

https://cssgridgarden.com/#ko Grid GardenA game for learning CSS grid layoutcssgridgarden.com 🥕 start가 end보다 커도 된다!grid-column-start: 5; grid-column-end:2 ;🥕 그리드 왼쪽의 기준이 아닌 오른쪽으로 기준을 하고싶다면, grid-column-start 와 grid-column-end를 음수로 설정하면 된다.grid-column-start: 1; grid-column-end: -2;grid-column-start: -3;grid-column-start: -1;🥕 span 활용하기 ➕깨달음➕ 'span'은 CSS 그리드 레이아웃에서 사용되는 단어로, 그리드 아이템이 그리드 컨테이너 내에서 ..