one Book a Day

id는 # class는 . 으로 선택 1. 태그 안에있는 태그 선택. ul li.flex_items (ul태그 안의 class name이 flex_items인 li태그 선택) 2. 속성지정 태그 선택. input[type=text] (input태그 중 type속성이 text인 것만 선택) 3. 자손 선택자. div h1 div > h1 위에는 div 안의 모든 h1태그. 아래는 div 바로밑의 h1태그(직속태그)만 선택(자손 선택자) 4. 동위 선택자. h3~div : h3태그와 동위에 있는 태그들 중 h3밑의 모든 div태그 h3+div : h3 동위, 바로 밑에있는 하나의 div태그 #title~div : id = "title" 밑에있는 모든 div 태그

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 테두리 왼쪽 위 오른쪽 위 오른쪽 아래, 왼쪽 아래. x -> y 값 순으로 지정 가능. 값 하나 입력하면 모두 동일, 두개입력하면 대각선. 네개입력하면 x,y값 동일한 네 귀퉁이에 적용

컨테이너에 flex속성 부여했을 시 item에 부여하는 flex속성 flex : [flex-grow] [flex-shrink] [flex-basis] -flex-grow : 여백이 있는경우 item이 다른 item들과 비교해 상대적인 크기를 얼마나 가질것인지. = 신장률 보통 1,2,3 등 정수비로 지정함. 생략할 경우 1 -flex-shrink: flex container에 flex item이 전부 들어가지 못하는 경우, 다른 item에 비해 비교해 얼마나 줄일지 설정. = 압축률 보통 1,2,3 정수비, 생략한 경우 1 수치가 클수록 폭이 좁아짐. -flex-basis: Flex항목의 주축방향 크기(item의 고정 값 width, height 값 주듯 주면 크기고정) 결론: flex속성이용 flex ..

img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 gray); filter: opacity(.5) drop-shadow(0 0 0 gray); } 그림에 필터씌우는 코드. gray는 색상코드로 변경가능. opacity는 필터 두께 filter는 흐림이나 색상변형 등 이미지, 배경, 테두리 렌더링. drop-shadow(offset-x offset-y blur-radius color) filter 속성 /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop..