지피티활용능력1급

웹은 익숙하다. 하지만 앱은 낯설다. 앱 개발을 하기 위해 사용하는 플러터를 시작해보자 우선 레이아웃에 대해 먼저 이해해보자 처음 "Hello World"라는 텍스트를 출력하기 위해 아래 구조를 이해할 필요가 있다. main() 함수를 제외하고 모두 삭제 MyApp() Stateless widget생성 MaterialApp 추가, return 구문의 끝엔 ; MaterialApp을 사용하기 위해서는 material.dart import 해야함. MaterialApp의 속성 설정, title:’Workout Tracker’ , String을 표현할 때는 따옴표 home:HelloWorld() HelloWorld Stateless Widget 생성 Scaffold 생성 Text widget 사용하여 Hell..

앱 개발에서 사용하는 플러터를 시작해볼것이다.

깃과 깃허브에 대해 자세히 알아보자.. 깃허브를 그냥 쓰기만했지 자세한 활용법과 깃에 대해서는 잘 모른다. 이번 기회에 좀 더 자세히 공부해보고 실무에서의 활용법도 제대로 익혀보자 깃의 최강점 : 같은 파일에 대한 각기 다른 버전을 보관할 수 있는 것 예를 들어 내가 책을 쓰는데 3개의 다른 엔딩 버전이 있다고 하자 그러면 3개의 파일을 각각 따로 작업할 것이다. 만약 3가지 파일이 공통으로 갖고 있는 한가지를 바꿔야 한다면 세 파일을 모두 수정하는 번거로운 작업을 거쳐야 한다. 하지만 깃을 사용한다면 각기 다른 3개 파일을 한번에 다룰 수 있게 한다. 수정을 하면 해당 변경사항을 3개의 파일에 모두 적용할 수 있도록 도와준다. 그리고 내가 혼자 일하는 것이 아니라 다른 에디터와 일을 한다고 했을 때 깃..

깃과 깃허브에 대해 자세히 알아보자.

많은 html과 그에 따른 css파일은 한 파일에만 만드는 것은 효율도 떨어지고 보기에도 좋지 않다. 그렇다면 어떻게 하는게 좋을까? 1. class이름 설정하기 id를 사용할 수도 있지만 class를 사용하는 것이 조금 더 효율적이다. 그리고 class이름이 다소 길더라도 이름만 보더라도 이것이 어떤 부분에 해당하는 태그인지를 손쉽게 파악 가능하다. 예시를 보자 div태그부터 보면 user-component를 메인으로 하나씩 늘려가는 것을 알 수 있다. user-component__title 이렇게 쓰면 상당히 긴 class지만 클래스 이름만 보고도 이게 유저 컴포넌트의 제목을 나타내는 태그구나 라는 것을 손쉽게 알 수 있고 css파일에서도 바로 찾아가 수정이 가능하다. 이런식으로 css파일도 명확하게..

많은 양의 css파일과 html파일을 만들어서 프로젝트를 해야할 때 한 css파일에 모든 것을 몰아서 작업하는 것은 보기도 불편하고 효율도 떨어진다. 좀 더 효과적으로 css파일을 나누는 방법에 대해 알아보자

보통 애니메이션과 상호작용 등은 자바스크립트를 통해 만드는 것이지만 css로도 충분히 애니메이션을 표현할 수 있다. div박스를 활용해 기본적인 틀을 잡아놓고 애니메이션 효과를 적절하게 주면 된다. 이런 식으로 위의 점 세개가 가운데 점을 기준으로 빙글빙글 돌아가고 아래의 막대들이 순서대로 커졌다 작았다는 반복하는 모습의 애니메이션을 만들 것이다. html은 간단하게 이렇게 만들 수 있다. 먼저 body 태그를 설정해준다. margin과 padding을 모두 0으로 설정했으며 display: flex; flex-direction: column; align-items: center; justify-content: center; 위와 같이 작성해 모든 요소들이 화면 정가운데에 위치하도록 하였다. 위의 점들과..

css를 이용해 웹사이트에 애니메이션 효과를 주는 법에 대해 알아보도록하자