본문 바로가기

전체 글93

Typography 브라우저는 기본적으로 html 적용 된 font-size 는 16px 이다. * em : 실제로 적용된 font-size 기준으로 1 em 이라고 본다. ex) font-size: 24px == 1em. width : 20em; 20em 은 얼마인가 ? -> 20*24 => width: 480; *rem : root root: html 자체 (뿌리) * line height (줄 높이) 즉, 줄 간격 line height 줄 경우 em 을 많이 사용. font-size에 비례해서 값을 줄 경우 em 을 생략한다 ★ 관례 ★ line-height : 24px; *letter spacing 글자 간격 마찬가지로 em 자주 사용 em 생략 하면 안 된다. 글자 = 100 글자에 비례해서 1% 줄이고 싶다면 ?.. 2021. 4. 11.
API 보는법(Array) forEach 는 호출 한다 콜백함수를 한번 . 각각의 요소를 배열에서. : return 되는 값. thisArg?: ?는 parameter 를 전달 해도 되고 안해도 된다는 뜻. shift(이동하다), unshift are slower than pop,push push,pop 같은 경우는 기존에 있는 데이터는 움직이지 않는다.(마지막 요소 데이터를 추가,삭제 하기 때문이다) item1 item2 item3 item4 item5 하지만 shift,unshift 같은 경우 기존에 있는 데이터는 뒤로 하나 씩 이동 후 (추가,삭제) "새로운 아이템" item1 item2 item3 item4 2021. 4. 10.
반응형 반응형을 위해서는 반드시 이러한 코드가 있어야 한다. " width 를 잡을 경우 사용자의 크기에 맞춰서 width를 맞춰 줘 " 반응형을 제작 시 항상 모바일을 먼저하는 걸 추천한다. iPhone 5핸드폰을 기준으로 잡고 하면 어지간해서는 깨지지 않는다. 2021. 4. 9.
display:flex,none 자식의 사이즈를 줄여서라도 부모의 크기에 맞게 한줄 정렬한다. 자식들은 자기들의 content-size 에 맞게 늘어난다 display : flex flex-direction: (row | column) 정렬 하고자 하는 방향을 설정 동시에 (main axis 결정) default: row flex-wrap : nowrap 어떻게든 한 줄 안에 모든요소를 정렬 (자식의 사이즈를 줄여서라도) || wrap 자식의 사이즈를 절때 줄이면 안되는 상황이거나 , 상황에 따라서 여러줄을 만들 때 default : nowrap 축의 기준은 flex-direction: ( row | column ) 기준 설정 으로 인하여 달라진다. align-content,align-items : Cross axis 축을 기준으로 정.. 2021. 4. 9.
i'll make a much better programming i'll make a much better programming 많이 더 좋은 i'm gonna make a much better frist impression tomorrow 2021. 4. 7.
transform: translate || scale || rotate inline 요소들을 좌|가운데|우 배치하고 싶을때 text-align : 사용하자 block 요소 안에 있는 inline(text,이미지 포함) 요소 만 적용가능 transform : 나의 원래 위치를 기억 하고 있다. 즉, 다른 주변요소들에게 영향을 주지 않는다. transform 의 기준은 항상 자기 자신이다. *transform : translateY(-50%) 내가 가진(현재요소) height값을 기준으로 height의 반 정도만 올리겠다는 의미 *transform : translateX(-50%) 내가 가진(현재요소) width 값을 기준으로 width의 반 정도 왼쪽으로 땡기겠다는 의미 현재 내가 가진 (width,height)를 기준으로 배치를 할 수 있다 - 올리겠다. +내리겠다. pos.. 2021. 4. 7.

티스토리툴바