공부기록용

Transition속성을 서서히 변화시키는 속성으로 CSS 프로퍼티의 값이 변화할 때 프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 한다.transition: property timing-function duration delay | initial | inheritproperty: transition을 적용시킬 속성을 지정duration: transition의 진행 시간을 지정timing-function: transition의 진행 속도를 지정delay: transition의 시작을 연기📌속성 기입 순서transtion: property duration timing-function delay 속성을 한 번에 정할 수 있다.띄어쓰기로 구분하며, 숫자로 속성 값을 지정하는 숫자가 두 개인 경우 dura..

position: sticky사용시 주의할 것 만들고자 한 header✔️두개의 영역으로 나누어 만들기✔️스크롤하면 second-header가 상단에 고정되는 ui를 만들고 싶었다.   🧐그래서 안에 div로 영역을 두개로 나누고 second-header에 position: sticky를 부여해주었는데 원하는대로 적용이 되지 않고 스크롤시 그대로 밀려나오도라,,! ....../* Default Style*/body { font-family: "Pretendard", sans-serif; height: 100%; background-color: $color-white; color: $color-black;}a { color: $color-black;}.wra..

❓레이아웃을 자유자재로 사용하는 것을 연습하는 도중 가로로 배열하는 일이 더 많았음 자주 사용하는 방법 정리하기로❓ 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배..