본문 바로가기
728x90
반응형
SMALL

전체 글1627

[Website] 컴포넌트 (Component) (2) 컴포넌트 (Component) Dropdowns 버튼이나 링크 등에 드롭다운 메뉴를 추가할 수 있다. 사용자가 상위 요소를 클릭하면 드롭다운 메뉴가 표시되어 다양한 옵션을 선택할 수 있다. Modals 사용자에게 추가 정보를 제공하거나 입력을 받기 위해 현재 페이지 위에 오버레이 형태로 표시되는 대화 상자이다. 모달은 경고 메시지, 로그인 폼, 이미지 뷰어 등 다양한 용도로 사용할 수 있다. Carousels 이미지, 텍스트, 동영상 등의 콘텐츠를 슬라이드 형식으로 표시하는 반응형 슬라이더이다. 사용자는 이전 / 다음 버튼이나 인디케이터를 통해 슬라이드를 전환할 수 있다. Tooltips 사용자가 특정 요소에 마우스를 올렸을 때 추가 정보를 표시하는 작은 팝업 상자이다. 도움말이나 설명 텍스트를 제공하기.. 2023. 6. 5.
[Website] 컴포넌트 (Component) (1) 컴포넌트 (Component) 부트스트랩 컴포넌트는 웹 페이지의 디자인과 기능을 향상시키는 데 도움이 되는 미리 만들어진 요소들이다. Buttons 다양한 스타일, 크기 및 상태를 가진 버튼을 만들 수 있다. Navbar 웹 페이지의 상단에 탐색 링크를 배치하는 반응형 네비게이션 헤더이다. 부트스트랩의 Navbar는 브랜드 로고 및 탐색 링크, 검색 폼, 드롭다운 메뉴 등을 지원한다. Alerts Alerts 컴포넌트는 사용자에게 피드백을 제공하는 데 사용되는 스타일이 있는 경고 메시지이다. 간단한 경고부터 닫기 버튼이 있는 경고 메시지까지 다양한 유형의 알림을 만들 수 있다. Cards 이미지, 텍스트, 링크 등의 콘텐츠를 그룹화하는 유연한 컨테이너이다. 카드는 블로그 게시물, 프로필 정보, 이미지 갤.. 2023. 6. 5.
[Website] 레이아웃 / 그리드 시스템 레이아웃 (Layout) 레이아웃 (layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소이다. wrap : 모든 레이아웃을 감싸고 있는 레이아웃 header : 기본적으로 웹 사이트 로고나 메인 메뉴가 들어가는 레이아웃 container : sidebar 레이아웃과 content 레이아웃을 감싸는 레이아웃 sidebar : 서브 메뉴를 표시하는 레이아웃 content : 페이지의 내용을 표시하는 레이아웃 footer : 저작권 글이나 기타 메뉴가 들어가는 레이아웃 컨테이너 (Container) 컨테이너는 웹 페이지의 콘텐츠를 감싸 주는 역할을 한다. 부트스트랩에서는 레이아웃을 구성하는 데 필요.. 2023. 6. 5.
[Web Crawler] AutoCrawler AutoCrawler 구글과 네이버 이미지를 멀티 프로세스로 빠르게 크롤링할 수 있는 라이브러리이다. 현재 구글 사이트에서는 로직 문제로 위 라이브러리로는 수집 불가하다. 설치 방법 사이트에서 git clone을 하거나 zip 파일로 다운로드한다. 사용 방법 python main.py [--skip true] [--threads 4] [--google true] [--naver true] [--full false] [--face false] [--no_gui auto] [--limit 0] 네이버에서 크롤링하고자 한다면 --naver true 그리고 구글에서는 --google true로 터미널을 통해 실행한다. https://github.com/YoongiKim/AutoCrawler/tree/master.. 2023. 6. 5.
[Object Detection] YOLOv5 커스텀 데이터 학습 YOLOv5 커스텀 데이터 학습 yolov5에서 git clone하거나 zip 파일로 다운한다. 데이터셋 구조 데이터는 아래와 같이 이미지 파일이 있는 이미지와 바운딩 박스 정보가 있는 txt 라벨 폴더로 구성하고 각 폴더에 부여하고자 하는 정답 폴더로 구분한다. dataset/ ├── images/ │ ├── class1/ │ │ ├── img1.jpg │ │ ├── img2.jpg │ │ ├── ... │ ├── class2/ │ │ ├── img1.jpg │ │ ├── img2.jpg │ │ ├── ... │ ├── class3/ │ │ ├── img1.jpg │ │ ├── img2.jpg │ │ ├── ... ├── labels/ │ ├── class1/ │ │ ├── img1.txt │ │ ├─.. 2023. 6. 5.
[Object Detection] YOLOv8 YOLOv8 실시간 객체 감지 및 이미지 세분화 모델의 최신 버전인 Ultralytics YOLOv8은 딥러닝 및 컴퓨터 비전의 최첨단 발전을 기반으로 구축되어 속도와 정확성 측면에서 비교할 수 없는 성능을 제공한다. 간소화된 디자인 덕분에 다양한 애플리케이션에 적합하고 에지 장치에서 클라우드 API에 이르기까지 다양한 하드웨어 플랫폼에 쉽게 적응할 수 있다. Ultralytics YOLOv8은 이전 YOLO 버전의 성공을 기반으로 하고 성능과 유연성을 더욱 향상시키기 위해 새로운 기능과 개선 사항을 도입한 최첨단 SOTA (state-of-the-art) 모델이다. YOLOv8은 빠르고 정확하며 사용하기 쉽도록 설계되어 광범위한 객체 감지 및 추적, 인스턴스 세분화, 이미지 분류 및 포즈 추정 작업에 .. 2023. 6. 4.
[Object Detection] CVAT (COMPUTER VISION ANNOTATION TOOL) CVAT (COMPUTER VISION ANNOTATION TOOL) CVAT는 캘리포니아 어바인 툴의 Video Annotation Tool 버전을 완전히 재설계하고 재구현한 버전이다. 컴퓨터 비전을 위한 무료 온라인 대화형 비디오 및 이미지 주석 도구이다. 속성이 다른 수백만 개의 객체에 주석을 달기 위해 사용하고 있다. 많은 UI 및 UX 의사 결정은 전문 데이터 주석 팀의 피드백을 기반으로 한다. https://www.cvat.ai/ CVAT Powerfull and efficient open source data annotation platform for computer vision datasets www.cvat.ai 2023. 6. 4.
[JavaScript] 날짜 (Date) 날짜 (Date) Date 객체를 사용하여 매 순간 변화하는 시간과 날짜에 관한 정보를 손쉽게 얻을 수 있다. Date 객체는 연월일, 시분초의 정보와 함께 밀리초 (millisecond)의 정보도 함께 제공한다. html 반갑습니다. js // 날짜 객체 생성 var date = new Date() console.log(date) // 연도 정보 얻기 var year = date.getFullYear() console.log(year) // 월 정보 얻기 var month = date.getMonth() console.log(month) // 날짜 정보 얻기 var currentDate = date.getDate() console.log(currentDate) // 요일 정보 얻기 var current.. 2023. 6. 2.
[JavaScript] 배열 (Array) 배열 (Array) 배열 (array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다. 배열을 구성하는 각각의 값을 배열 요소 (element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스 (index)라고 한다. html 반갑습니다. js // 20개의 변수를 가진 배열 생성 var names = new Array(20) // 배열 인덱스는 항상 0부터 시작 names[0] = "메시" names[1] = "호날두" // 배열 요소 출력 console.log(names[1]) // 값을 가진 배열 생성 var player = ["메시", "호날두", "네이마르", "레반도프스키"] console.log("player = " + player) console.log("2번째 선수: " +.. 2023. 6. 2.
[Website] 부트스트랩 (Bootstrap) 부트스트랩 (Bootstrap) 부트스트랩은 웹 개발자들이 빠르게 반응형 웹사이트를 만들 수 있도록 도와주는 오픈 소스 프레임워크이다. 부트스트랩 5는 HTML, CSS, JavaScript를 사용하여 제공되며 다양한 레이아웃, 그리드 시스템, 컴포넌트 등을 제공하여 웹 개발을 손쉽게 만들어 준다. jQuery 제거 : 부트스트랩 5에서는 jQuery를 사용하지 않는다. 대신, Vanilla JavaScript로 작성된 코드로 대체되어 더 가볍고 빠른 웹사이트를 제공한다. 사용자 정의 및 확장성 : 부트스트랩 5는 사용자 정의가 더욱 쉽도록 설계되었다. 개발자들은 SCSS 변수를 활용하여 기본 스타일을 쉽게 변경할 수 있으며, 더 많은 유틸리티 클래스를 통해 디자인을 빠르게 조정할 수 있다. 개선된 그리.. 2023. 6. 1.
728x90
반응형
LIST