FrontEnd

1. Dart 언어 소개Dart는 Google에서 개발한 오픈 소스 프로그래밍 언어이다. 웹, 모바일, 데스크톱 애플리케이션을 개발하는 데 사용되며, 특히 Flutter 프레임워크의 주요 언어로 활용된다. 2. 특징1. 객체 지향 프로그래밍Dart는 클래스와 객체를 기반으로 한 객체 지향 프로그래밍을 지원한다. 상속, 인터페이스, 믹스인 등의 기능을 사용할 수 있다. 또한, Dart는 단일 상속만을 허용하는데, 믹스인을 통해 다중 상속과 유사한 기능을 구현할 수 있다. mixinmixin은 여러 클래스 계층에서 재사용할 수 있는 코드를 정의하는 방법이다. 예를 들어, 다음과 같은 mixin과 기본 클래스가 있다고 가정하자.mixin Flyer { void fly() { print('Flying')..

HTML up_sensor는 바텀시트를 올리기 위한 동작을 감지하기 위한 센서이다. 실제 바텀 시트 위에 감싸고 있는 투명한 벽으로, 바텀시트가 올라가면 사라진다. 센서를 두지 않으면 바텀 시트를 올리는 과정에서 스크롤 되면서 안의 내용이 스크롤 되는 것을 방지해서 만들었다. bottom_sheet_handle은 사용자에게 바텀시트를 올리고 내릴 수 있는 hint를 제공한다. CSS .bottom_sheet { display: flex; position: fixed; bottom: 0; width: 100%; height: 10%; border-top-left-radius: 30px; border-top-right-radius: 30px; background-color: #FFFFFF; overflow-..

HTML 0% 간단하게 slider bar 위에 button을 놓았다. img는 button 안에 위치한다. span 요소는 눌렀을 때 몇 퍼센트인지 나타내기 위함이다. CSS .slider_bar { display: flex; position: fixed; right: 5%; top: 35%; bottom: 20%; width: 2%; height: 40%; background: linear-gradient(to bottom, rgba(176, 196, 238, 1) 20%, rgba(176, 196, 238, 0.75) 35%, rgba(176, 196, 238, 0.5) 60%, rgba(176, 196, 238, 0.25) 85%, rgba(176, 196, 238, 0) 100%); border..

포트폴리오를 제작해야 할 일이 있어서 넷플릭스 디자인으로 만들어 보았다.시작 페이지body 포트폴리오를 시청할 프로필을 선택하세요. Jade Rabbit Boss Baby Larva Red css.main{ bottom: 0; ..

나는 주변의 문제들을 해결하는 방법을 고안하고, 기능을 구현해서 배포하는 것을 꿈꾸어 왔고, 이번 졸업요건 사이트를 만들면서 그 꿈을 실현해 보았다. 계기 동기 형 중에 졸업을 앞두고 있는 형이 있었다. 나도 마찬가지로, 수강신청을 할 때 즈음이었다. 3학년을 앞두고 있었기 때문에, 졸업요건을 따져가면서 어떤 과목을 수강해야 하는지 꼼꼼히 따져보며 장바구니 에 담을 과목을 고민하고 있었다. 주변의 문제들을 눈에 불을 켜고 찾고 있었던 때라, 개발하기 너무 좋은 타겟이라고 생각했다. 벤치마킹 웹 사이트를 제작하기 전에, 먼저 만들어져 있는 사이트를 둘러봤다. 세종대학교의 졸업요건 검사 사이트인 Please Graduate. 사이트가 정말 잘 되어있다고 생각해서 벤치마킹하고 웹사이트를 제작했다. 후에는 사이..