HTML CSS (10) 썸네일형 리스트형 css 단위 Css 단위 - em 부모 크기에 비례해서 상대적으로 크기 정해짐 부모 폰트사이즈 곱한 값 - rem 루트에 따라서 폰트사이즈 결정됨 - vw vh 부모 너비 상관없이 브라우저 너비에 따름 - % 부모 너비 대비 퍼센트 ——— 나누는 기준 - 부모 기준 작업 % em - 브라우저 기준 작업 v rem -요소 높이 기준 % v - 폰트사이즈 Em rem —— - 어디서 사용하든 고정 원함 Rem - 부모 크기에 따라서 상대적으로 변하게 Em - 박스 컨테이너 % v flex - 요소와 수직 공간 맞출때 수직 em 수평 rem - 폰트사이즈의 패딩 Em - 미디어 쿼리 단위 Em rem 그리드 행 - 가로: grid-template-rows 열 - 세로: grid-template-columns 행 - 가로 1fr grid-template-columns: repeat(몇줄, 크기); 열 - 세로 1fr grid-template-rows: repeat(몇줄, 크기); grid-template-rows: repeat(3, minmax(100px, auto)); 크기 100px 확보하고 내용이 많아 100px 넘어가면 알아서 늘어나도록 처리 ----- 참고블로그 https://studiomeal.com/archives/533 li 마지막 자식만 margin 적용 안되게 하기 &:not(:last-child) { margin-right: 10px; } innerText, innerHTML 차이 innerText => 문자열 그대로를 리턴 innerHTML =>태그를 적용시킴 문자열을 html로 인식하여 리턴한다. ex) 거북 positon static 기본 왼 =>오 , 위 => 아래로 쌓임 relative 요소 안쪽 방향으로 이동 가능 absolute position: static 속성을 가지고 있지 않은 부모를 기준으로 움직임 부모 중 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다. 부모 position : relative, absolute, fixed => 자식 position: absolute 일때 부모 요소 기준으로 움직임 부모 position: 위 3개 없을시 => 가장 위 태그 (bdoy)가 기준 부모 positin: static => 영향 x display display : 어떻게 표시 할지 정함 visibility : 요소를 보이게 할지 정함 display inline : 앞 뒤로 줄바꿈이 되지 않는다. //가로로 정렬 block : 요소 앞 뒤로 줄바꿈이 가능하다. none : 박스 생성X, 공간 차지 X //공간이 사라진다 inline-block : 요소는 inline, 내부는 block //참고 블로그 https://aboooks.tistory.com/85 스크롤바 투명하게 div에 넣기 -ms-overflow-style: none; css에 넣기 ::-webkit-scrollbar { display:none; } animation transition 프로퍼티 변경에 따른 일시적 시간 후에 변화 animation animation-name : 애니메이션 이름 animation-duration : 0s 진행 초 animation-delay : 0s 웹사이트 열리고 몇 초 후 진행 animation-timing-function: // ease : 느림 // ease-in : 느리다가 빨라짐 animation-fill-mode : //forwards: 진행 후 멈춤 animation-iteration-count : 애니메이션 재생 횟수 //infinite 무한 반복 @keyframes 이름 { from { 시작점 } to{ 끝에 바뀔것 } 이전 1 2 다음