728x90 반응형 SMALL 분류 전체보기155 전개연산자 : 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 떄 사용 모양 : ... 배열 조합 :객체 조합 : 값이 들어감 원래는 : 객체 그자체가 들어감 기존 배열을 보존 -> 전개 연산자를 사용하면 원본 배열은 유지 됨 2023. 10. 12. Flexbox 📍Flexbox란뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치,정렬,분산할 수 있는 법을 제공하는 레이아웃 방식 반응형 디자인을 구현하는데 강력한 도구 📍구성 flex container : flex item을 감싸고 있는 부모 요소 ( 전체에 관여) flex item : flex container 안에 있는 여러개의 자식 요소 (각각에 관여) 📍Flexbox 만들기정렬하려는 요소(flex item)의 부모 요소(flex container)에 display:flex속성을 지정하면 됨먼저 지정해줘야 다음 속성 적용 가능// 일반적으로 display: flex를 지정한다.flex-container {display: flex;} flex container: dis.. 2023. 10. 11. 반응형 웹사이트 (@media, calc) 📍반응형 웹사이트란여러 디바이스 해상도에 각각 반응하도록 보여주는 홈페이지 📍 1. 뷰포트(viewport)란?웹 브라우저에 실제 내용이 표시되는 영역 -> 이 영역이 디바이스마다 다르기 때문에 화면에 맞게 보여줘야됨뷰포트메타태그 사용 📍 2. 뷰포트 메타태그meta name="viewport" content="width=device-width, initial-scale=1.0" /> 이부분! 리액트에서의 public/index.html ☑️ 단위 ☑️ 적용해 보기 - 요소의 최소 높이를 설정min-height: calc(100vh - 250px); min-height: 이 속성은 요소의 최소 높이를 설정. 요소의 내용이 이 높이를 초과하면 요소는 그만큼 더 커지게 됨calc() 함수: ca.. 2023. 10. 11. 에니메이션 : 요소에 적용되는 css 스타일을 다른 css 스타일로 부드럽게 전환 . keyframe - 에니메이션을 사용하기 위해 지정해야 함 - 특정시간에 요소의 스타일를 유지함 에니메이션 속성 에니메이션 만들기 실습 body { margin: 0; padding: 0; } .circle { width: 20px; height: 20px; background-color: blue; border-radius: 50%; position: absolute; animation: move-the-circle 1.5s infinite; } .circle:nth-child(2) { left: 30px; animation-delay: 0.1s; } .circle:nth-child(3) { left: 60px; animatio.. 2023. 10. 11. Transform/ Transition Transform : html 요소를 회전, 크기, 기울이기, 이동효과를 나타낼 때 사용 사용법 transform: translate(함수 )transfrom : scale ( )transform: rotate ( ) &:hover{ box-shadow: rgb(0 0 0 /80%) 0px 40px 58px -16px, rgb(0 0 0 /72%) 0px 30px 22px -10px; transform: scale(1.05); // border-color rgba(249,249,249,0.8); video{ opacity:1; } } ☑️ `top: 50%;`와 `transform: translateY(-50%);`를 함께 사용하면, 부모 요소의 수직 .. 2023. 10. 11. head 태그 : 브라우저 화면에 직접 보여지진 않지만 문서의 정보를 담음 브라우저의 제목 표시줄이나 탭에 보이는 문서 제목을 정의. 문서 안의 모든 상대 url이 사용할 기준 url을 정함 외부 리소스와의 관계 ( 스타일 시트 , 파비콘 등 ) 스타일 규칙을 담고 있음 : 위 태그들로 나타낼 수 없는 다른 메타관련 요소로 나타낼 수 없는 데이터를 나타냄 자바스크립 2023. 9. 23. 이전 1 ··· 17 18 19 20 21 22 23 ··· 26 다음 728x90 반응형 LIST
