분류 전체보기212 저출산, 결혼을 늦게하는 시대에 맞는 아이디어.. 보호되어 있는 글 입니다. 2021. 6. 15. 나라의 어이없는 법 판결로 인해 고통받는 피해자들을 널리 알릴 수 있는 사이트 보호되어 있는 글 입니다. 2021. 6. 2. grid 그리드는 파이어폭스로 테스트하는 것이 좋다. 왜냐하면 눈에 보기 쉽게 나뉘어져 보이기 때문. 그리드도 flex와 마찬가지로 content와 item으로 나뉘어져있다. display:grid로 하면 block요소처럼 세로로 쌓여진다. display:inline-grid로 하면 인라인요소처럼 되서 가로로 쌓인다. 1 2 3 1 2 3 .container { border: 2px solid red; display:grid; } .container .item { border: 2px solid; } grid-template-rows : 행의 높이와 개수 grid-template-columns : 열의 너비와 개수 grid-template-columns:100px 100px 50px; // 3개의 열 각 너비 g.. 2021. 5. 21. float, flex비교 float을 이용한 방법 .container { border: 2px solid red; } .container .item { width: 100px; height: 100px; border: 2px solid; border-radius:10px; float:left; } .clearfix::after { content:''; display:block; clear:both; } flex 이용한 방법 container와 item에 들어갈 속성은 정해져있다. container container에 적용할 수 있는 display 종류 2가지 flex : container들이 세로로 정렬된다. (item들은 그대로 가로로 정렬) inline-flex : container들이 가로로 정렬된다. (item들 마찬가지.. 2021. 5. 20. 홈페이지 메인 기획 다시.. + 크롤링 프로그램 수정 - 홈페이지 제작을 맡겼는데 웹 디자인이 전혀 사용자를 고려하지 않은.... 이미지만 덕지덕지 도배되서 화려하게만 보이도록 치중되있는 것을 확인하고 경악을 금치못했다. 기존에 이미 레이아웃이나 컨텐츠를 다 잡아서 전달했는데.. 너무 다 만들어서 줘서 그런지 디자인이 너무 과하다. 홈페이지 사용 연령층과 제품을 한눈에 알아보기 어려운 특성을 잘 표현하기 위해서 최대한 심플하게 만들면서도 너무 허접하게 보이지 않도록 만드는 것이 핵심이었는데 시안으로 받은 결과물은 실망이 너무 컸다. 그래서 내가 직접 새로 AdobeXD 프로토 타입툴로 3시간동안 다시 만들어서 전달했다. - 크롤링 프로그램 수정요청이 들어왔다. 기존 오후 11시 55분에만 측정하던 것을 오전, 오후 총 5번 시간을 나눠서 측정하는 것이었다... 2021. 5. 20. transition, transform, animation transition은 바뀌기 전 상태의 객체에게 부여해준다. transition-property: width, background; 가로사이즈와 배경을 애니메이션에 적용하겠다. transition-duration: 1s; 1초에 걸쳐서 바뀌게 하겠다. 이거를 합치면 아래와 같이도 가능하다. transition : width 1s, background 1s; 이거를 또 모든 속성에 전환하겠다라고 하면 transition : 1s; 가 가능하다. ease, ease-out : 빠르게 - 느리게 // 이 두 가지는 약간 다르다. ease-in : 느리게- 빠르게 linear : 일정하게 이런것을 눈으로 보고 싶으면 easing function을 검색해서 표 + 애니메이션을 볼 수 있다. 합치면 transiti.. 2021. 5. 20. 이전 1 ··· 11 12 13 14 15 16 17 ··· 36 다음
