초보개발자 개발일지

117일차(1)/CSS(16) : CSS3 Flex 활용(4) - css3 flexbox 지난 예제 복습 - 화면 폭이 줄어들면 배치 방식이 바뀌는 navbar 를 만들어보았다. - nav의 자식 요소로 ul, form이 있는데, 이 자식 요소들을 가로로 배치하느냐 세로로 배치하느냐의 문제일 뿐이다. - 가로 : flex-direction:row; - 세로 : flex-direction:column; - ul, form575픽셀까지는 column 으로 적용되었다가 그 이상이 되면 가로로 바뀐다. - 위에서는 row 정렬을 적용하고 아래에서는 세로로 정렬하겠다는 css요소를 넣어 충돌한다면? - 한 요소에 적용하는 css 두개가 존재한다면 나중에 정의한 것이 이긴다! - 아래에 있는 미디어 쿼리 조건을 충..

116일차(1)/CSS(15) : CSS3 Flex 활용(3) Step08_example_gallery.html Gallery 예제 - box-sizing: border-box; 로 CSS를 지정하면 예를 들어 어떤 컨텐츠가 있고 bordrer(빨간색), padding(초록색)이 있다고 할 때 - contents의 width, height에 padding과 border의 크기를 포함하겠다는 뜻이다! - 원래 width라고 하면 컨텐츠의 크기만 말하는데, box-sizing: border-box 는 padding, border 크기도 width에 포함시켜서 계산하는 것을 말한다. - margin: 0 auto; 는 가운데 정렬을 가능하게 하는 CSS - 100vh => 100% view height - 웹..

115일차(1)/CSS(14) : CSS3 Flex 활용(2) - Flex 활용방법 - 부모 요소에 flex를 적용하면 자식요소는 블록요소여도 인라인 요소처럼 한줄에 적용된다! - flex요소에 적용할 수 있는 각각의 속성들을 익혀서 사용하면 된다. - 메인 축을 따라 아이템 배치 - flex-direction : 메인 축의 방향을 정하는 것 (default는 row) - flex-wrap : 아이템들을 감싸서 한 묶음으로 둘 것인지 (default 값 nowrap, nowrap은 감싸지 않겠다는 뜻) - justify-content : 왼, 오, 가운데, 가운데에 여백 있게.. 등으로 정렬 가능 - space-evenly : 여분 공간을 똑같이 배치했다. Step08_FlexUtil.html flex ..

114일차(1)/CSS(13) : CSS3 Flex 익히기 - carousel 만들기 이전 코드 리뷰 - CSS3 Flex의 속성 알아보기 - TouchSwipe에서 일어나는 터치(드래그) 이벤트는 마우스 클릭과는 조금 다르다. 상당히 귀찮은 작업인데 touch swipe에서 해준 것 - carousel 뿐만 아니라 화면에서 사용할 수도 있다. - 플러그인에 javascript를 로딩해놓으면 기존의 동작에 추가적인 동작이 생긴다. - 간단하게 정리해보면 이런 구조이다. - swipeStatus 라는 이름의 방에 함수를 전달해 놓으면 필요한 시점에 알아서 호출된다. - 화면에서 터치이벤트를 감지해서 복잡한 계산을 해서 이 값을 전달해준다. - phase 위상 값을 활용해 작업한다! - cancel은 75픽..

113일차(1)/CSS(12) : 3차원 컨텐츠 만들기(5) *지난 예제 코드리뷰 - container 는 전체 브라우저 폭의 80%로 설정해 둠. - wrapper의 크기는 이 container의 영향을 받는다. - 웹페이지가 resize 되었을때 이 함수를 호출하도록 함! - resize될 때마다 이 곳으로 실행 순서가 들어온다. - 페이지 로딩시점에 init() 으로 한 번 배치하고, resize될 때마다 다시 배치하는 구조이다. - init 안에서는 z축 평행이동값(tz)를 얻어내서 평행이동에 활용하고, angle값은 페이지 로딩시점에 얻어온 값을 활용한다. - rY값(회전량)을 변화시키고 함수를 호출해서 회전시킨다. - 브라우저에서 돌려보면서 검사창에서 변화하는 rotateY 값을 확인할 수 있..

112일차(1)/CSS(11) : 3차원 컨텐츠 만들기(4) - 3d공간을 정의하고, 그 안에 들어 있는 div들을 큐브 형태로 배치함 - 특정 UI를 페이지 로딩 시점에 3차원 transform을 이용해서 3차원적으로 배치해둔 다음, 특정 시점에 부모 요소를 3차원 transform 시키면 배치시켜둔 대로 움직인다. - 마우스를 올렸을 때(특정 시점) 부모 div가 통째로 움직이도록 할 수 있다. - 부모 div에 마우스 hover되었을 때 애니메이션이 적용되도록 한 상태! - 원래는 겹쳐져 있었는데, 200px만큼 z축 방향으로 밀어버린 것이다. - 2번째 div도 90도를 돌리고 200px 을 밀어버린 상태. - 이렇게 겹쳐있던 div를 회전, 평행 이동시켜 정육면체 모양을 만들 수 있다. - 처음..

111일차(1)/CSS(10) : 3차원 컨텐츠 만들기(3) - 3d transform을 하려면 먼저 3차원 공간을 정의해야 한다. - 그러고 나서 이 안에서 3차원 transform을 만든다. - perspective (물체와 관찰자와의 거리), perspective-origin (관찰자의 위치 설정) 설정을 한다. - 어떤 물건을 어디에서 바라보느냐에 따라 관점은 달라질 수 있다. - 이 3차원 공간 안에서 3d transform을 하겠다고 선언하면 된다. - 선언하는 방법은 transform-style 과 transform-origin 을 설정하면 된다. - 이 파란 박스가 3차원 공간이다. 이 안에서 어떤 아이템을 3차원 transform하겠다! - 지정한 개체를 rotateX(45deg) 한 상..

110일차(1)/CSS(9) : 3차원 컨텐츠 만들기(2) - Transform : 개체를 변화시키는 것 (회전, 크기 조절, 비틀기 등...) - Transition : 변화시킬 때 중간 변환과정을 보여주는 것 (애니메이션) - border 속성을 경계선의 굵기(px), 스타일(실선), 색상 지정 등을 따로따로 쓸 수 있는 것처럼, linear도 하나하나씩 따로 작성할 수 있다. - property : 트랜지션을 적용할 수 있는 모든 요소에다가 적용하라는 뜻! - duration : 변환 과정을 얼마 동안 보여줄 것인가(초 단위) - timing function : 변환할 때 중간 과정을 보여주기(보여주는 방식) - ease-in-out : 처음에도 천천히 나중에도 천천히 움직이며 변화함 - 웹에서 숨..

109일차(2)/CSS(8) : 3차원 컨텐츠 만들기(1) - 화면 UI를 만들 때 3D 컨텐츠를 추가하고 싶다면? - 구글에 css 3d transform 검색 *참고 사이트: https://3dtransforms.desandro.com/cube - 3차원 6면체의 형태 - div 요소 6개를 3차원으로 배치해서 이런 입체형 육면체를 만들 수 있다. javascript, css를 결합해서! - 이런 carrousel 도 만들 수 있다 - css3의 transition, transform, 3d transform을 익히면 3차원 컨텐츠를 만들 수 있다. - VS code의 경로를 설정하고 사용할 이미지가 들어있는 폴더를 넣어둠 Step01_Transition.html transition 테스트 - 마우스..

43일차(1)/React(2) : React App 생성, React 기초 * React JS 홈페이지 : https://ko.reactjs.org/ - 어떤 동작을 하는 유저 인터페이스를 만들려면 javascript 가 필요하다. - React는 이 javascript를 좀더 체계적으로 쉽게, 그리고 대규모로 만들더라도 체계적인 구성으로 만들 수 있도록 도와주는 라이브러리! - React 와 비교되는 비슷한 js 라이브러리: Angular, Vue, React 등 - 자주 쓰이는 순서는 react > vue > angular - 클래스 : 객체 생성을 위한 설계도. 상속받아서 사용 가능. 안에 메소드가 있음 (java에서의 클래스와의 공통점) - jsx의 구조를 보면 javascript임에도 java같..