728x90 반응형 CSS em과 rem em 현재 스타일 지정 요소의 font-size 값을 지정된 배수로 변환해 표현한 크기 예를 들어 기준이 되는 값, 즉 현재 요소의 font-size 값이 16px 이라면 2em 은 32px 을 의미합니다. div { font-size: 16px; } div { font-size: 1.5em; /* 24px */ margin: 2em /* 32px */ padding: 1.25em /* 20px */ } rem 최상위 요소(보통은 html 태그)에서 지정된 font-size 의 값을 지정된 배수로 변환해 표현한 크기 예를 들어 기준이 되는 값, 즉 html 태그의 font-size 값이 이 16px 라면 2rem 은 32px 을 의미합니다. html { font-size: 16px; } div { fon.. 2023. 4. 11. CSS ratio box CSS - 반응형 16:9 비율 유지하는 법 2023. 4. 11. CSS flex-basis/grow/shrink의 사본 flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니다. flex-basis flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다. flex-grow flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내.. 2023. 4. 11. CSS display:flex/ flex-direction: 중심축의 방향의 사본 flex-direction: row, justifued-content:flex-start 행정렬, 너비가 시작되는 왼쪽에 바짝 flex-direction: row-reverse, justifued-content:flex-end 행 역순정렬, 너비가 끝나는 오른쪽에 바짝 flex-direction: column, justifued-content:flex-start 열정렬, 너비가 시작되는 왼쪽에 바짝 flex-direction: column-reverse, justifued-content:flex-start 열 역순정렬, 너비가 시작되는 왼쪽에 바짝 2023. 4. 10. CSS display:flex/ align-content: 전체 구조에서의 열의 정렬의 사본 align: 교차축 두 줄 이상일 때만 적용된다. align-content: normal align-content: center; 자식들이 교차축의 중앙 정렬한다. align-content: flex-start; 자식들이 교차축의 상단에 정렬한다. align-content: flex-end; 자식들이 교차축의 하단에 정렬한다. align-content: space-between; 자식들이 교차축 안에서 경계에 바짝 붙어 일정한 간격으로 정렬한다. align-content: space-around; 자식들이 교차축 안에서 각각의 마진값을 가진 채 일정한 간격으로 정렬한다. 정렬 사이의 간격이 모두 동일 (간격 + 박스 +간격 + 간격 + 박스 +간격 + 간격) align-content: space-even.. 2023. 4. 10. CSS display:flex/align-items 교차축을 기준으로 열의 정렬 justify-content: center; align-items: stretch; 부모 width 중앙에서 부모의 height에 바짝 붙어 늘어난다. justify-content: space-between; align-items: flex-start; 부모의 width에 바짝 붙어 마진없이 퍼지고 부모의 height 상단에 바짝 붙는다. justified-content:flex-start; align-items: flex-end; 부모의 witdh의 왼쪽에 바짝, height 아래에 바짝 붙는다. justified-content: space-evenly; align-items: center 부모의 width에서 같은 간격으로 퍼지고height 중앙에 붙는다. 2023. 4. 10. CSS display:flex/justified-content 중심축의 정렬 justified-content: flex-start 부모의 width 왼쪽에 바짝 붙는다. justified-content: space-between margin 상관 없이 부모의 width에 바짝 붙는다. justified-content: space-evenly 부모의 width 안에서 같은 간격으로 배열한다. justified-content: space-around margin을 기준으로 배열한다 margin: a 라면 a + 'box' + a / a + 'box' + a/ a + 'box' + a/ a + 'box' + a/ a + 'box' + a.... 2023. 4. 10. html 목록 순서가 없는 목록 명단 이름: 김가가 이름: 김나나 이름: 김다다 이름: 김라라 순서가 있는 목록 기상 순서 이불털기 돌돌이로 먼지 제거 이불 개기 2023. 4. 10. html 기본 태그 요리 요리 요리 요리 요리 요리 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 요리는 먹기 좋게 가공한 음식 혹은 그 "가공" 행위 자체다. 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 요 리는 먹기 가공한 음식 혹은 그 가공 행위 자체다. 제목 요리 요리 요리 요리 요리 요리 단락 나누기 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 줄바꿈 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 띄어쓰기 요 리는 먹기 가공한 음식 혹은 그 가공 행위 자체다. 글자 두껍게 하기 먹기 좋게 특수문자 입력 특수문자 코드 (공백) & & “ " ⓒ © 2023. 4. 10. 이전 1 다음 728x90 반응형
