AI스쿨_개발일지

웹 기초, html 기본구조, html 각종 태그 실습 \- static page layout(정적 웹): 브라우저 창 크기에 상관없이 웹 요소 크기,위치 정해져있음 \- liquid page layout(동적 웹): 브라우저 창 크기에 따라 웹 요소 크기 변동되

학습내용 html 태그의 속성(inline, block), html 구조 짜기 (기존 사이트 여러 개 참고) html 태그의 속성: inline, block inline: 한 줄 출력, 공간 점유 불가, 상하배치 불가 (ex. ``) block: 줄바꿈 출력, 공간

학습내용 월말평가 (머신러닝, 파이썬), css 기초 github 소스코드: 월말평가 cognitive service 종류 OCR(Optical Character Recognition): 문자, 숫자를 학습을 통해 인식 Computer Visiohn: 사진이나 동영상

css 가상선택자, before&after, dothome과 file zila이용해 도메인에 웹 파일 업로드, css 강의 실습, helbak사이트 혼자 연습행동 관련 디자인 적용a:link 방문한 적 없는 링크a:active 클릭 유지 시a:hover 마우스 올릴 때

학습내용 박스모델, 마진병합, display, vertical-align, position 박스 모델 html 요소의 레이아웃을 구성하는 4가지 요소로 margin, padding, border, content이 있다. 레이아웃의 공백, 구조를 빠르게 파악할 수 있도

z-index, float과 clear, overflow, flex, 중앙정렬, 기본레이아웃 실습형제 관계 태그에서 깊이 조절하는 속성 (앞으로 오기, 뒤로 보내기)단위 없이 숫자만 전달. default=03차원 특징을 갖고 있는 position 속성값에서만 사용 가능

오늘분 실습 영상 다시보기, helbak 사이트 혼자 따라하기github소스코드원래 오늘 봐야했던 부분을 어제 다 해버려서 오늘은 전에 혼자 만들어 본 helbak 사이트 html 설계도에 css 요소를 추가해보기로 했다.helbak사이트링크helbak-1helbak-

transform, transition, animation, 실습github소스코드rotate(음수~양수deg): 2차원 회전(좌우)scale(width, height): 비율로 크기 조절skew(x축, y축): 3차원 회전translate(x축, y축): 상하좌우 이

학습내용 네이버 리빙 메뉴 만들기, 카카오톡 친구목록 페이지 만들기, tripadvisor홈페이지 만들기(+animation) github소스코드 네이버 리빙 메뉴 네이버리빙메뉴실습 github소스코드-네이버리빙 주요포인트 리스트 메뉴에 마우스 커서를 올리면 제목에

미디어쿼리 기초, 실습 일부github소스코드사용자의 디바이스 화면 크기에 따라 html 요소의 속성 및 배치등이 달라지는 레이아웃들이다.사용자의 디바이스 유형, 크기에 따라 웹사이트의 스타일을 수정할 때 사용한다. 여기서는 사용자가 접속한 기기의 width값을 기준으

bootstrap agency 반응형 홈페이지 따라하기github소스코드전체 요소 담는 태그인 <container>에 고정 넓이값을 주고 margin: 0 auto;로 좌우 중앙정렬을 한다.flex 속성 중 flex-wrap을 이용해 자식 요소들의 width값이

kidsgao 웹페이지 만들기 전반부github소스코드pc버전kidsgao-pcmobile 버전kidsgao-mobile이번에 kidgao 페이지 실습하기 전 완성된 html, css 파일 및 이미지파일 디렉토리를 받았는데, 지금까지와 다르게 파일들이 좀 더 자세하게

kidgao 웹페이지 만들기2어제에 이어 웹페이지 따라 만들기를 계속 했다. 어제 배운 것과 거의 동일한 방식을 사용해서 만들고 있어서 시간은 걸리지만 어려운 것은 없었다. 그래서 오늘 새로 배운 점들을 간략하게 정리하고 실행 페이지와 소스코드 링크만 첨부하려고 한다.

kidsgao 웹페이지 따라하기3 (마지막)github소스코드kidsgao-pc3kidsgao-mobile3<morning>의 <sun>의 애니메이션 시작 시 딜레이가 있다보니 원래 위치에서 애니메이션 시작 위치로 갑자기 이동하는 것이 부자연스러웠다. 그래서

helbak 사이트 따라하기, 실무팁지난 시간까지는 kidsgao 웹사이트를 적응형으로 만들었는데, 이번엔 반응형 웹사이트 만드는 것을 연습하기 위해 helbak 사이트를 따라 만들어 보았다. 이 사이트는 특이하게 미디어쿼리 밖에서 모바일 버전을 먼저 작업하고 미디어쿼

chrome 확장 프로그램 소개, 네이버 메인페이지 따라하기 1: header와 main-leftgithub소스코드naver-main1wapplayzer: 웹사이트에 사용된 기술스택 알아냊CSSviewer: 웹사이트 요소에 사용된 css 속성 알려줌whatfont :

네이버 메인 페이지 오른쪽 부분, footer 부분github소스코드네이버메인2로그인 버튼을 <a>태그로 제작: display:block으로 크기 조절하게 변경하였다.왼쪽 배너와 크기 맞도록 padding값을 약간 조정하였다.주로 flex를 사용해서 좌우 배치를

네이버 쇼핑페이지 header, main 만들기github소스코드네이버쇼핑페이지1원래 과정에선 자바스크립트도 포함되어 있었는데, 진도에 맞추다보니 자바스크립트를 공부할 시간은 따로 주지 못하게 되었다고 한다. 자바스크립트 강의 영상은 제공해준다고 하니 오늘부터는 정해진

네이버 쇼핑 footer, 네이버 웹툰 header, main-left의 상단 만들기github소스코드네이버쇼핑footer세로선 만들기1: ::before을 사용해서 글자 사이 세로선을 만들려고 했는데, block 설정을 안 해주니 width값과 배경색을 줘도 보이지

학습내용 웹툰 홈 main-right, footer, 웹툰 상세 main-left 남은 강의들을 8월 말까지 다 완료하기 위해 수강 스케줄을 새로 짰다. 웹툰 홈 main-right footer 웹툰 상세 main-left 어려웠던 점 해결방법 소감

네이버 블로그 홈 header, main-left, main-right, footer 만들기github소스코드naver-blog-allheader의 왼쪽 영역과 오른쪽 영역을 flex로 정렬할 때 오른쪽 영역의 공간이 지정되지 않아서 정렬이 잘 안됐다. 영상에서도 일단

네이버 블로그 challenge 페이지, 네이버 뉴스 메인 headergithub소스코드네이버 블로그 challengehot topic 메뉴에서 실제 페이지를 보니 세 항목이 동등하고 선택된 항목이 효과 들어간 식이라서 임의로 구조를 좀 바꾸어 주었다.hover로 버튼

네이버 뉴스홈페이지 main-left, main-right, footer, 네이버 연예뉴스 headergithub소스코드뉴스 mainbefore로 세로 줄 만드는 부분도 반복되니 다음부터 이것도 별도 클래스 만들어봐야겠다.링크로 이동하는 a태그의 기능은 추후 javas

네이버 연예 뉴스 main-left (1), (2)github소스코드naver-ent-left-allent-left-headlineborder-radius: 1px 2px 1px 4px: 속성값으로 픽셀값 4개를 준다면 순서대로 top-left, top-right, b

네이버 연예뉴스 main-right, footer, 네이버 게임 headergithub소스코드ent-main-rightsecton-11btn 요소는 inline-block 속성인데 inline요소는 기본적으로 공백 가지고 있다. 공백 없이 정렬하고 싶을 땐 flex-s

네이버 게임 main-left 전부github소스코드naver-game-main-leftsection, section-title, section-body 등 많은 부분의 속성이 겹쳐서 default 클래스를 만들어 활용하였다. 모든 버튼은 내부 아이콘만 다르고 같은 속

네이버 게임 main-right, footergithub소스코드naver-game-main-rightright-secton 등의 클래스명을 사용해 게임 페이지 오른쪽에 들어갈 영역의 default 클래스를 만들어주었다. 다른 페이지에도 비슷한 이름을 사용한다면 추가로

네이버 e스포츠 header, main-leftgithub소스코드naver-esport-header-main-leftposition:fixed의 위치 이동은 브라우저를 기준으로 함. left, top을 이용해 스크롤 내려도 왼쪽 상단 같은 위치에 고정되게 만듦. z-i

네이버 e스포츠 main-right, webfont 적용, 오디오 header, main-left 일부github소스코드naver-esport-main-rightborder-radius: 사각형의 네 모서리 개별 설정이 가능inherits 속성값: 부모의 속성값 상속s

네이버 오디오클립 main-left, main-right, footer, 오디오 카테고리 페이지github소스코드naver-audio-main어제 '오늘의 오디오클립' 영역을 만들 때 사용했던 버튼을 default 클래스로 변경했다.영역에 따라 위아래 위치만 top으로

트위치 사이트 상단 네비게이션github소스코드twitch-header\--color-text-base 등 최신 브라우저에서만 지원되는 기술 등이 많이 사용되어 알아보기 힘들었다.페이지 배경 대부분 어두운 색이라 배경색과 기본 글자색을 바꾸어주었다.자주 쓰이는 버튼 색

트위치 left area, content-bannergithub소스코드twitch-left-area상단 nav 부분을 제외한 본문 영역 전체를 감싸는 main-container 부분에 min-width를 적용했는데 내부 콘텐츠들이 브라우저 크기가 줄어들 때 계속 줄어드

학습내용 트위치 content, footer, css 추가설명 github소스코드 twitch-content, footer content 영역 default 클래스 content 내부 요소들은 중앙정렬되어야 함으로 content-container라는 클래스를 만들어서

유튜브 전체 영역 나누기, 상단 nav 만들기github소스코드youtube-top-nav상단 nav, 왼쪽 nav는 fixed, 내용 부분은 absolute로 모든 영역이 3차원이기 때문에 미리 모든 영역을 감싸는 div를 하나 만들어준다. 최소 넓이값을 지정해서 일

유튜브 왼쪽 nav, content 부분 전부githubyoutube-left-nav&content내용물은 많지만 동일한 디자인이 반복되고 있어서 빠르게 만들 수 있었다.로그인 영역을 만들 때, txt-wrap이 내부 요소의 크기를 제대로 인식하지 못해서 레이아웃이 겹

유튜브 채널 페이지, 탐색 페이지github 소스코드youtube-allyoutube-channelbackground-size: cover, background-position: center를 이용해 배너 영역 전체를 배경 이미지로 채워주었다.실제 페이지처럼 배너 오른

네이버 모바일 버전 페이지(1)github소스코드m-naver-1-all미디어쿼리 viewport html 코드: 디바이스 화면 크기에 맞게 콘텐츠 확대 및 축소해주는 역할모바일 화면을 위해 wrapper 클래스로 화면 넓이를 제한하였다.overflow-x: hidde

네이버 모바일 페이지(2), 자바스크립트 변수와 데이터타입(1), (2), 제어문, 전역/지역변수, 스코프, 호이스팅 (1)m-naver-2-allgithub소스코드-네이버모바일배치 방향만 다른 리스트 객체 구현을 위해 html class 이름 및 배치만 바꾸어 주었다

반복문, 문자열과 배열의 property와 methodshtml에 javascript 적용하는 간단한 실습github js-ex-1 ~ js-ex-4, naver-ex 안 js파일까지github소스코드while(조건) {행동} : 조건이 참이면 행동 실행do {행동}

생성자함수, prototype, this (1), (2)js-typinggithub커밋객체 지향 프로그래밍 (OOP - Object Oriented Programming)생성자 함수: 첫 글자 대문자로 작성생성자 함수 안 this는 인스턴스 자체를 가리킴Person 생

자바스크립트 DOM 기능github커밋DOM (The Document Object Model)document(js와 연결된 html문서), element(html태그), attribute(html태그의 속성들)getElements~: collection이라는 유사배열

자바스크립트 주요기능 구현하기(1), (2): To-do, MouseAnimation, Scroll-top, Modalgithub소스코드js-todo목표: 추가 버튼 클릭 시 input에 입력한 값을 할 일 리스트로 옮기고, 각 리스트 아이템의 삭제 버튼 누르면 삭제,

자바스크립트 주요기능 구현하기(3): Snackbar, Accordian, Slidegithub커밋js-snackbar목표: 버튼 클릭 시 화면 아래 메시지가 올라오면서 페이드인했다가 2초 뒤 페이드아웃하며 아래로 사라지게 하기visibility는 transition으

제이쿼리 기본 (1), (2)github소스코드라이브러리: 반복적으로 사용되는 주요 기능 더 쉽게 제작할 수 있도록 미리 작성된 코드압축된 production vs 압축 안 된 development 버전production 파일은 속도 빠르게 하기 위해 용량 적게 압축한

자바스크립트 플러그인, 라이브러리(1): owl2, select2github소스코드이미지 등의 콘텐츠를 회전해서 보여주는 디자인 만드는 플러그인js-plugin-owl2owl2참고링크html select, option의 디자인 및 기능을 관리하는 플러그인js-plugi

학습내용 자바스크립트 플러그인, 라이브러리(2)-1: introJs github소스코드 introJs 사용자가 서비스 페이지 안에서 기능들을 자연스럽고 쉽게 파악할 수 있도록 각 요소 관련 팝업을 띄워 보여주는 튜토리얼 기능 제작 라이브러리 introJs introJ

자바스크립트 플러그인, 라이브러리(2)-2: sweetalert2github소스코드자바스크립트 팝업 기능 및 디자인을 더 쉽고 예쁘게 만들도록 도와주는 라이브러리js-sweetalert2강의보다 최신 버전이 많이 나와서 최신 버전으로 연습하였다.cdn링크예시코드에 화살

자바스크립트 플러그인, 라이브러리(3): GreenSock, Bootstrapgithub소스코드animation에 특화된 javascript 플러그인js-greensockgsap.to(target, value)target: querySelector 스타일로 html 태

예전에 연습용으로 만든 아이디어스 홈페이지에 자바스크립트 기능 추가하기: 실시간 검색어, 움직이는 배너, 하트 토글버튼 만들기github소스코드예전에 혼자 연습하기 위해 아이디어스 메인 페이지 일부를 카피캣 해놓은게 있었다. 일부 html 및 css 코드를 먼저 효율적

아이디어스 메인페이지 main, footer 영역 제작. 스크롤 위치에 따라 top버튼 보여주는 기능github소스코드실제 페이지에는 더 다양한 영역들이 많은데, 구조가 다른 것들을 하나씩 만들어보기로 했다.먼저 미리 제작해두었던 '오늘의 작품' 영역을 클래스화한 후,

아이디어스 작가 페이지 제작idus-artist-pagegithub소스코드메인 페이지에서 제작한 header와 footer를 그대로 사용했다.또한 메인페이지의 카드 html 코드도 가져와서 수정해서 사용했다.메인페이지의 상단 네비게이션에 id로 영역 연결해주었다.메인페

프로젝트 사이트 요구사항 정리하기, 웹빌더 '식스샵' 사용해보기, 프로그래머스 알고리즘 문제 1개 풀이프로젝트를 의뢰한 기업에서 전혀 피드백이 없어서 아직 혼란스럽다. 일단 일반적인 쇼핑몰 사이트를 구성하면 된다고 이해하긴 했지만 나를 포함한 팀원들의 사기가 떨어져보인

대구AI스쿨 팀프로젝트(기업과 연락, 타팀 팀장 및 매니저님과 소통), 알고리즘 문제 1개 풀기, 연습용 웹 프로젝트 기획 시작프로젝트 목표: 웹 빌더 사용해 클라이언트를 위한 쇼핑몰 사이트 제작전제조건: 웹 빌더 포함 프로젝트 제작에 사비 지출 불가, 기업에서 결제해

대구AI스쿨 프로젝트, 알고리즘 문제 풀기, 개인프로젝트 웹 기획어쩌다보니 우리 조 사이트만 유료버전으로 만들 수 있고 다른 조들은 무료 버전으로 만들어야 한다. 마음이 약간 불편하다.코드 직접 삽입하는 방법을 알아냈다.팀원들과 함께 아임웹 고객 사이트들과 핀터레스트,

대구AI스쿨 프로젝트, 알고리즘6개 조 중 우리 조 사이트만 유료 전환되어 어제부터 만들고 있던 중 기업에서 결제를 취소하여 사이트가 만료되었다. 그로 인해 디자인 모드 진입이 아예 불가능하게 되어 잠시 진행을 멈추고 기업에 사정을 알아보았다.기업과 1차 소통: 사이트

대구AI스쿨 프로젝트오프라인으로 만나서 새로운 무료사이트 개설 후 처음부터 만들기 시작했다.새로 업데이트 된 기업 요구사항 확인사이트 기본 설정: 사이트 정보, 사업자 정보 등 입력메인페이지 디자인 작성: 로고 삽입, 메뉴 설정, 기업 페이지로 링크 연결 등테스트 상품

대구AI스쿨 프로젝트10조-무통장입금 주문관리개인 통장끼리 입금하는 방식으로 무통장 입금 테스트를 했다. 무통장 입금은 계좌번호만 띄워주고 알아서 입금, 확인하는 방식이라 결제 안해도 될 것 같아서 해봤는데 역시 잘 됐다.테스트용으로 1원짜리 상품을 만들었다.배송 완료