CSS (3) 썸네일형 리스트형 [CSS] 셀렉터 (Selectors) - 속성 /* selector { property: value; } */ /* []는 속성을 나타냄 */ /* a 태그에서 href의 속성을 가진 태그만 */ a[href] { color: white; } /* a 태그에서 href="naver.com"의 속성을 가진 태그만 */ a[href="naver.com"] { color: white; } /* a 태그에서 href^="naver" naver로 시작하는 태그만 */ a[href^="naver"] { color: white; } /* a 태그에서 href$=".com" .com로 끝나는 태그만 */ a[href$=".com"] { color: white; } [ CSS ] Flexible 단위 단위에 고정된 값을 부여하는 것이 아니라, 브라우저의 크기에 따라 너비 / 높이 또는 폰트의 크기를 변경할 수 있음 단위 설명 예시 em 요소에 현재 적용된 폰트의 크기를 기준으로 함 2em = 현재 적용된 폰트의 크기의 2배 ch em과 비슷한데, 특히 0을 기준으로 크기를 결정 - rem root 요소 ()에 지정된 폰트 크기를 기준으로 함 2rem = 에 폰트 크기의 2배 vw viewport 너비의 1% 10vw = 현재 브라우저 창 너비의 10% vh viewport 높이의 1% 10vh = 현재 브라우저 창 높이의 10% vmin viewport의 너비나 높이 중 작은 것의 1% - vmax viewport의 너비나 높이 중 큰 것의 1% - % 부모 요소에 적용되는 크기를 기준으로 함 - 1.. [ CSS ] flex (1. 컨테이너 속성) 동적으로 뷰포트가 변할 때 효율적으로 요소 배치, 정렬 가능한 레이아웃 방식 Flexbox의 구성 container(부모요소)와 item(자식요소)이 가지는 속성이 다름! - container의 속성 : item을 어떻게 정렬할 것인지를 정함 - item의 속성 : 크기나 순서를 정함 Flex Container 속성 ** Container의 속성을 부여하기 전에 display: flex; 라고 선언해야함 flex-flow flex-flow: flex-direction flex-wrap; flex-flow: 주축은어디 여러줄묶음방식 ex- border: 1px solid #000;과 같이 단축속성 부여하는 것 * flex-direction 요소 정렬방식 속성 .container { display: flex.. 이전 1 다음
