one Book a Day

div는 block. 안에 여러 요소를 넣기위한 영역. span은 inline. , , 과 같이 줄 안에 끼워 넣는 요소. text. inline요소는 문장 속 특정 text강조에 많이 씀.(선택해 지정) block요소는 로 가로 화면 전체 100%를 차지.(넓게 묶어 지정)

position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%) 배치기준이 요소의 왼쪽 위 꼭지점이기 때문에 transform을 통해 요소크기의 -50%만큼 이동시켜주면 수직정렬됨. .flex-container { display: flex; align-items: center; justify-content: center; } 이거도 된다는데 난 안됨.. vertical-align은 inline이나 inline-block에만(text) 적용되므로 div를 이용한 flexbox는 적용안됨. relative한 정렬이므로 그 줄의 line-height나 같은줄 인라인 요소의 크기에 따라 높낮이가 달라질 수 있음.

flex container에서 속성을 부여해 결정함. flex-direction : row, row-reverse, column, column-reverse 초깃값 row flex-wrap : nowrap, wrap, wrap-reverse 줄바꿀꺼냐? - nowrap 안바꾸고 box넘어가도 그냥 삐져나감. wrap: 아래로 줄바꿈, wrap-reverse: 위로 줄바꿈. flex-flow : 두개 동시선언. 특별한거 x order : 숫자(기본값 0) 이건 유일하게 container가 아닌 item에 부여. container의 flex-direction의 배치순서 기준 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치

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..

system = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ" #10진법이면 9 까지, 36진법이면 Z까지 표현된다 N, B = map(int, input().split()) answer = '' while N != 0: # N을 B로 나눈 나머지를 마지막칸에 채움(1의자리)(36진법이면 나머지 = 36진법중 2번째 숫자) answer += str(system[N % B]) #위치로 진법 변환 # N을 B로 나눈 몫이 N이 된다. N //= B print(answer[::-1]) 변환은 결국 dictionary or list or 문자열로 1:1 매칭. key값, index를 무엇으로 잡을것이냐부터 시작.

npm install -g yarn - yarn 설치 init yarn - init yarn 하면 package.json생김 ( 이미 github레포지토리와 로컬 레포지토리 연결시켜놓은 상태) sudo yarn global add typescript -yarn or npm으로 TS설치 (관리자권한으로 설치안하면 컴파일 안될수도 있음) -tsconfig.json생성 -package.json과 tsconfig.json에 컴파일 scripts와 경로, 포함, 미포함 파일 설정. js파일은 따로 생성 되도록 폴더를 만들어준다, 컴파일시 생성되는js파일도 읽어줄 수 있도록 경로를 설정해준다. (ts파일을 컴파일하면 js와 js.map파일이 자동으로 생겨난다.)(ts와 js의 구조차이를 realtime으로 볼 수 ..

sudo npm install -g typescript sudo안하면 tsc명령어 못찾음.