본문 바로가기

분류 전체보기9

[CSS] Flex box에 관한 내용 정리 (1) - Flex Container 속성 아래 코드를 보면서 display : flex에 대해 이해해보자. 부모 요소 : 노란색 박스인 flex_container를 Flex Container(플렉스 컨테이너) 자식 요소 : 초록색 박스인 container_item을 Flex Item(플렉스 아이템) Flex Container가 Flex에 대해 전체 영향을 받는 공간이고 영향을 받는 공간 내 아이템들이 속성에 따라 배치 되는 것임 See the Pen Untitled by Hoon (@hoon_ceo) on CodePen. 이러면 CSS에서 설정해줄 수 있는 속성이 있는데, 이를 2가지로 확인이 가능함. Flex Container에 적용되는 속성 Flex Item에 적용되는 속성 1. Flex Container에 적용되는 속성 1) Flex의 w.. 2023. 12. 1.
Web(웹)개발을 위한 Visual Studio code Extension 추천 모음 Visual Studio Code 프로그램을 자주 설치하고 사용하는데 Extension이 헷갈려서... 정말 좋은 Extension들이 있지만 Web개발 시 꼭 필요하다고 느꼈던? 혹은 너무 중요한 것들만 적어보고자 한다. 개발내용 확인 시 필요한 Extension 1. Live Server * 필수 - 내가 코딩하고 있는 홈페이지를 확인할 수 있는 실시간 서버가 열린다. 2. Live Preview * 필수 - VS code 내에서 브라우저를 키지않고 확인이 가능함. 위 2가지는 내가 치고있는 코드가 어떻게 적용되는지 확인해야 하므로 필수라고 생각 ! 아래부터는 코드칠 때 편리한 Extension 1. Auto Rename Tag - Tag이름이 자동으로 변경되는 아주 소중한 툴 - 수정할 때나 코드 .. 2023. 12. 1.
대화형 인공지능 AI 만들기 Project(2) - Python을 활용한 인공지능 만들기 해당 프로젝트의 인공지능은 python을 활용하여 만들기로 결정하였다. 우선 음성 인식 전, Text 기반으로 Text를 출력하는 챗봇형태로 먼저 구현하기로 결정하였다. 구현에 필요한 것들 1. Pandas 데이터를 분석하고 각종 처리를 할 때 이용하는 파이썬 언어 기반의 라이브러리 나는 비개발자라 이런 자세한 것은 모르겠고 쉽게 설명하면 데이터량이 많은 것 (=빅데이터)을 분석할 때 필요하다. * 설치방법 터미널 창 혹은 cmd창 아래 문구 입력 pip install pandas +추가) Pip upgrade 필요시 터미널창에 아래문구 입력 (pip3로 실행해야함) pip3 install --user --upgrade pip 2. SentenceTransformer Sentence Transformer.. 2023. 11. 20.
대화형 인공지능 AI 만들기 Project(1) - 구조 설계 언리얼 엔진내에서 인공지능과 대화하는 것을 목표로 해당 프로젝트를 진행해보려고한다. 비개발자 출신인 나로서, 일단 어떠한 구조로 진행될지 명확하진 않지만 한번 방향성을 잡아보려고한다. 1. 유저의 음성을 VR Device 내 내장되어 있는 마이크로 입력을 받는다. 2. 해당 음성을 .wav 형태로 VR Device와 서버와의 통신을 통해 서버로 전달한다. 3. 서버에서 해당 .wav 형태의 언어를 분석한다. 4. AI로직에서 해당 언어를 자연어처리하고 그에 상응하는 데이터테이블 중 가장 점수가 높은 답변을 도출한다. 5. 도출 된 답변을 음성으로 변환하여 VR Device에 전달하고 유저는 VR Device에서 음성을 스피커를 통해 전달받는다. 사실 옛날 기획이라고 하기에도 뭐한 기획을 할때는 쉬워보였는.. 2023. 11. 20.