CSS6 28일차 복습 em과 rem 둘 모두 배수로 크기를 지정하는 단위로, 기본 글자 크기 16px을 기준으로 늘리거나 줄인다. 다만 em은 부모 태그가 존재할 경우, 부모의 크기를 기준으로 배수를 한다. 반면 rem은 부모 태그가 몇개가 존재하더라도 항상 같은 값이 나온다. 아래의 예를 보자. 기본크기 16px 테스트문구 (19.2px) 테스트문구 (23.4px) 테스트문구 (27.6px) em의 경우는 부모 태그의 1.2배를 거듭 한다. 그렇다보니 같은 값을 얻기 매우 힘들어 나온 기술이 rem이다. rem은 부모 태그가 얼마나있든 상관없이 항상 16*1.2의 값인 19.2px가 나온다. 기본크기 16px 테스트문구 (16*1.2=19.2) 테스트문구 (19.2*1.2=23.4) 테스트문구 (23.4*1.2=27.6) .. 2022. 12. 21. 26일차 복습 오늘 역시 배운게 별로 없다. 아무래도 css가 상당히 기능이 많고 하나를 구현하면 하나가 안되는 식으로 복잡하다보니, 실습에 시간이 오래 걸려서 그런것 같다. 그래서 앞으로 남는 시간에 개인적으로 자바로 테트리스 만드는 프로젝트를 하려고 한다. 그에 관해서는 다른 카테고리를 하나 만들어 정리하겠다. word-break와 word-wrap속성 break는 단어의 분리, wrap는 단어의 줄바꿈에 대한 속성이다. 둘 모두 동양권(한.중.일)만 특이 케이스로 취급받고, 나머지는 언어는 모두 동일하다. 동양권의 경우 음절(글자 하나)를 기준으로 줄바꿈이 되거나 나눠지지만, 나머지 언어는 단어를 기준으로 나눠진다. word-break: normal: 기본값. 한.중.일을 제외한 언어는 단어(공백 또는 -(하이픈.. 2022. 12. 20. 25일차 복습 https://studiomeal.com/archives/197 flex에 대해 잘 설명된 사이트를 찾아 링크를 올려둔다. 아래 사진들은 전부 이 사이트가 출처다. 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com flex 속성: 아이템에 적용되는 속성들. flex-basis: 아이템의 기본 크기를 지정하는 속성. flex-direction에 따라 width또는 height를 정한다. width나 height보다 상위의 속성이며, 아이템의 기본 점유 크기를 설정한다. flex-grow: 기.. 2022. 12. 19. 24일차 복습 flex속성 최근 새로 나온 속성으로, 박스(컨테이너)들의 원활한 배치를 위해 만들어졌다. 우리가 웹사이트에 메뉴창(nav창)을 만들거나, 링크를 걸거나, 그 외에도 어떤 기능이 있는 버튼(글자)을 만들 경우, 대부분은 보기 편하게 어떤 방식으로든 정렬되어 있다. flex속성은 이런 정렬을 쉽게 해주기 위해 만들어졌다. 만약 flex속성이 없다면 position을 absolute로 지정해 좌표를 지정해주거나 float속성으로 일일이 정렬해야 할것이다. flex의 기본 개념 flex는 간단히 말해 컨테이너 태그를 크게 세로축, 가로축으로 나눠서, 사용자의 편의에 맞게 정렬할수 있게 해주는 속성이다. 이때, 컨테이너의 내용물( 이해하기 쉽게 div형태의 박스라고 가정하자)의 height 속성을 컨테이너의 높.. 2022. 12. 15. 이전 1 2 다음
