ai-school

웹 브라우저에 접속하여 F12 혹은 마우스 우클릭-검사로 개발자 도구 활성화Console창에 명령어 입력비주얼 스튜디오 코드 (VS Code) 실행 후 명령어 입력Math.random(); 0~1 사이 랜덤한 숫자 출력Math.random()\*100; 1~100 사이

학습한내용 style.css 스타일 태그를 따로 .css문서로 만들고, 문서 링크를 끌어 써도 스타일 태그가 적용이 된다. 불리언(Boolean) > 불리언이란, 참/거짓,

a1=Web, a2=html, a3=css, a4=java 로 지정한다All을 쓰지 않고 document.querySelector('a')를 쓰면 가장 첫번째 a(a1=Web)을 가리킨다All을 써주면 id="a"항목 전체를 선택할 수 있다이를 이용해 주간모드 야간모드

> VS Code로 파이썬 접속하기 상단 터미널(T) 클릭 - 새 터미널 터미널에 'python' 입력 > 터미널로 파이썬 실행하기 커맨드라인 설정, 파일이름 입력 '실행 및 디버그

학습한 내용 파이썬에서의 참, 거짓(불리언) > 동등의 의미로 JS에서는 ===, 파이썬에서는 ==를 사용한다 파이썬에서의 조건문 > JS에서는 if(){}처럼 조건과 결과를

플라스크는 웹페이지를 찍어내는 공장이다터미널 창에 pip install falsk를 입력한다코드를 실행해보면 http주소가 나온다주소로 들어가보면 'Hello,World'라고 적힌 웹 페이지가 나온다flask의 개발환경은 Glitch.com에서 진행하였다Glitch.c

메소드 추가 > 어제 학습내용에서는 create창의 입력값이 주소창에 뜨게 된다 이번에는 입력정보를 주소로 보내지 않고, 다른 방식으로 서버에 전송하도록 해보았다 method="POST"를 입력하면 create창에서 입력한 입력값이 주소창에 뜨지 않고, 다른 방식으

Glitch의 터미널 창을 열고, sqlite3를 실행한다db.sqlite3파일을 작성한다위 코드(사전형 정보)를 커맨드 라인으로 표로 만들어 볼 것이다표 이름을 지정하고표의 정보를 입력한다그리고 표의 정보(행)를 입력한다데이터를 읽을때는 데이터를 선택한다는 뜻인'SE

적응형 반응형 > 반응형 웹의 장단점 > 각 키워드에 대한 설명 > 외부 css파일을 불러오는 여러가지 방법 CSS파일 작성하기 > 미디어쿼리 중단점 설정하기 > ![](

어제에 이어 실습을 진행하였다 실습 1 > #### html과 css 작성 > 최대화된 창의 모습 창의 크기를 줄여 밑으로 스크롤 하면 메뉴가 안보이게 된다 ![](https://v

학습한 내용 고양이 블로그 만들기 > #### html 작성 ![](https://velog.velcdn.com/images/delcookie/post/cdd4a981-446a-4

어제에 이어 css문서를 완성한다aside 부분 작성newsletter 부분 작성popular posts 마진 수정과 footer 부분 작성 width가 600px 이상일 때, side box가 오른쪽에 위치하도록 수정하고 완성한다emmit은 코딩을 빠르게 작성할 수

부트스트랩 홈페이지에서 CDN코드를 복사해온다이 때, link 태그는 head 안에 쓰고, script 태그는 body 안에 써준다h태그와 p태그로 제목과 내용을 써주고부트스트랩은 class값으로 구조나 꾸밈작업을 할 수 있다(바탕색-글자색-가운데정렬-패딩)부트스트랩은

학습한 내용 웹 서버 구축 웹 서버를 구축하는 데에는 크게 2가지 방법이 있다 본인의 컴퓨터로 구축하는 방법(bitnami) 웹 서버 공간을 임대하는 방법(웹 호스팅)(github, dothome) 오늘은 dothome의 무료 호스팅 서비스를 이용해 웹 서버를 구축해보

학습한 내용 오늘부터 자바 스크립트를 본격적으로 배우게 된다 시작에 앞서, HTML CSS JS의 차이를 살펴보자면, > HTML: 웹 문서의 뼈대, 기초 CSS: 웹 문서를 꾸밈 JS: 사용자 동작에 반응 정도의 차이가 있는데, JS의 특징에는 > 웹 요소를

문자열 1번째가 기본 문법이다 " "의 내용이 그대로 전달된다 2번째처럼 string을 강조하기 위해 " " 안에 " "를 쓰면 오류가 생긴다 "string"을 강조한 "this is "string""구문으로 인식을 못하고, "this is"와 " "를 인식하기 때

학습한 내용 배열(array) 배열은 여러 자료들을 묶어서 활용할 수 있는 자료들로, 여러가지 요소(element)로 구성되어있다 요소에는 숫자, 문자열, 배열, 함수 등 다양한 종류의 자료들이 들어올 수 있다 > 배열의 인덱스는 0번째부터 시작한다 인덱스는 연산으

while문도 for문과 크게 다르지 않다조건문 안이 true이면 실행문을 실행하고, false이면 실행이 멈추는 원리0번째부터 무한히 반복문 실행true를 confrim으로 바꾸면 매 실행마다 확인창이 뜨게 된다확인을 누르면 true값을 입력해 다음 실행을 하고, 취

각 명령의 시작과 끝을 명확하게 구별할 수 있다함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다자바스크립트를 활용한 간단한 계산같은 식을 함수로 표현자바스크립트에서는 함수를 호출하는 코드를 어디에 적어도 상관없다다만, 프로그래밍 언어에

이벤트란 웹브라우저나 사용자가 행하는 동작이다사용자가 웹 문서 영역을 벗어나 행하는 동작은 이벤트가 아니다태그 안에서 이벤트를 처리할 때는 "on" + "이벤트명" (onclick등)을 사용한다click: HTML요소를 마우스로 눌렀을 때 이벤트가 발생dbclick:

배열(Array) 배열과 비슷한 개념으로 리스트가 있다 배열은 변수를 각각 선언하면 메모리 상에 임의로 저장되고, 중간에 데이터가 비어있어도 그 공간은 유지가 된다 리스트는 데이터가 증가하거나 감소하면 메모리 공간도 증가하거나 감소한다 Array 객체의 주요 함수 먼

오늘은 지금까지 배운 내용들을 토대로 웹 페이지를 만들어본다자바스크립트로 위와 같은 동적 효과를 주는 작업들을 할 수 있다위 html파일을 이용해 next 버튼을 누르면 다음 숫자로 넘어가고, previous 버튼을 누르면 이전 숫자로 되돌아오는 기능을 구현하려고 한다

이번 시간에는 JS의 라이브러리 중 하나인 j쿼리에 대해 배웠다j쿼리란 HTML의 스크립트 언어(자바 스크립트)를 단순화 하도록 설계된 JS의 라이브러리이다j쿼리의 주요 기능에는CSS 설렉터를 활용한 태그 접근이벤트 처리특수 효과 및 애니메이션AjaxJSON 파싱플러그

jQuery 함수 함수는 jQuery에서 가장 중요한 요소이다 JS는 생성된 객체 멤버를 추가하는 것이 자유롭다(jQuery 라이브러리) jQuery 함수는 jQuery(객체) 형태로 작성 Query 6글자 대신에 $(객체)로 작성할 수도 있다. Ready 함수 JS

Form태그 내부의 입력에 관련된 태그들에 대한 선택자:input : 모든 입력에 관련된 태그들을 선택:text : type 속성이 text인i nput 태그를 선택:password : type 속성이 password 인input 태그를 선택:radio : type 속

학습한 내용

프런트엔드 프레임워크 중 하나React, angular, vue.js 등이 있다페이스 개발에 사용한 기술공개 소프트웨어화면 출력에 특화된 프레임워크컴포넌트를 조립하여 화면 구성게임 엔진 원리를 도입하여 화면 출력 속도가 빠름(Virtual DOM)Node.js (필수)

학습한 내용 스토리북 UI컴포넌트 개발 도구 데모용 코드를 작성하는 데 도움을 주고 공통적으로 사용될 컴포넌트를 팀원들과 편리하게 공유하는 도구로 활용 구성단위는 스토리 (Story ) 하나의 UI컴포넌트는 보통 하나 이상의 Story를 가짐 장점 > 복잡한 로직 없

학습한 내용 ![](https://velog.velcdn.com/images/delcookie/post/b38a2c0e-6847-4f48-9eac-27a23477840b/image.p

학습한 내용 구현하기 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다 날씨 정보에는 도시, 섭씨, 화씨, 날씨 상태가 있다 5개의 버튼이 있다( 1개는 현재 위치, 4개는 다른 도시 ) 도시 버튼을 클릭할 때 마다 도시별 날씨가 나온다 현재 위치 버튼을 누르면 다시

학습한 내용 이번 시간부터는 지금까지 배운 내용들을 활용하여 실재하는 웹 페이지를 따라서 구현해보고, 추가 과제를 진행해 갈 예정이다 우선 Resoft 홈페이지를 똑같이 만드는 과정을 진행한다 본인이 맡은 부분은 '프로젝트' 부분 슬라이드 카드가 자동적으로 넘어가기도

지난 시간에는 리소프트 홈페이지에서 개발자 도구를 열어 코드 전체를 가져와 그대로 구현해보았다이번 시간에는 내가 담당한 파트( 프로젝트 )에 필요한 부분만 추려 구현해보았다전체 코드에서필요한 html, css만 가져와 사용하였다이 코드를 토대로 직접 코드를 작성해보았다

오늘은 지금까지 작업한 내용에 미디어 쿼리 ( 반응형 )을 적용해보았다내가 담당하게 된 파트 ( 프로젝트 )에서는 width가 940px 이상일 때 배너 4개939px ~ 767px 일 때 배너 3개766px ~ 430px 일 때 배너 2개429px 이하일 때 배너 1

학습한 내용 오늘은 지금까지 작업한 프로젝트 부분에 슬라이드 기능( slick-slide )을 구현하였다 먼저 slick-slide 기능은 jquery 라이브러리의 기능이므로 라이브러리 파일을 가져오거나, 링크를 가져오거나 해야한다 > - jquery cdn >

지난 시간에는 지금까지 조원 각자 작업한 작업물을 하나로 합쳐 하나의 웹 페이지로 만들어보았다그리고 수요일에 조원 모두 모여서 각자 작성한 코드에 대한 설명회를 하기로 하였다htmlcssjs내가 작성한 코드를 되돌아보고 다시 작성해보면서 어떤 코드가 어떤 역할을 하는지

오늘은 지금까지 작성한 코드를 다시 살펴보는 시간을 가져보았다먼저 완성본html의 head 부분에는 외부 파일(사진, css, js 등)과 cdn링크 등이 있다body부분은 프로젝트 타이틀 부분과 슬라이드 부분으로 나누었다css 파일은 먼저 가장 기본 틀html의 각

오늘 진행한 멘토링에서 나온 피드백을 토대로 코드를 깔끔하게 수정하는 시간을 가졌다기존 코드개선 코드내 작업물 말고 다른 조원들의 작업물에도 영향을 줄 수 있는 \*, h2, body, a 와 같은 선택자를 사용하지 않고내 작업물 영역 안에서만 적용되도록 선택자를 조정

오늘은 클론 코딩 마감날이다웹 페이지 코딩을 끝내고 발표에 대해 의견을 조율하는 시간을 가졌다완성된 모습미디어 쿼리도 정상적으로 적용된 모습이다2주간의 클론 코딩 프로젝트가 마무리되었다다음주부터 지금까지 만들었던 클론 웹 페이지에 여러가지 기능을 추가로 구현하게 될 것

지난 주에 1차 실무 프로젝트 과제 클론 코딩이 마무리가 되었다이번주 부터 약 4주간 새로운 과제를 시작하게 된다이번주 부터 시작하게 될 새로운 과제는 디자인 시안을 참고하여 웹 페이지를 제작하는 것이다여기서 내가 맡은 부분은 정보마당 메인과 각각의 기사들이다각 레이어

학습한 내용 오늘은 어제 작성한 html에 css를 입히는 작업을 진행하였다 헤더 이미지와 타이틀 위치를 잡아주고 REsoft 소식, news, 기사 목록에 대한 css ![](htt

오늘은 여러 개의 기사 미리보기들을 2열로 정렬하고, 기사 div간 간격을 조정하였다기사가 들어있는 목록 div를 flex-wrap으로 지정해주고, space-between으로 각각의 아이템에 간격을 주었다그리고 기사 사진과 제목, 날짜에 margin-top으로 기사

학습한 내용 어려운 내용 해결방법 학습소감

오늘은 2번째 담당 페이지인 기사 상세 페이지 html과 css를 작성하였다구현해야 할 페이지먼저 html을 작성하였다기본 css헤더부분 css왼쪽의 REsoft, NEWS, 목록으로 부분 css기사 본문 부분 css목록으로 옆에 있는 화살표 이미지에 border을 설

오늘은 구현하지 못한 애니메이션 효과를 마저 구현하고다른 조원이 담당한 상단 메뉴바와 헤더, 푸터를 내 작업물에 합치는 작업을 하였다기사 상세 부분의 좌측 '목록으로' 링크마우스를 올리면 이미지의 배경과 글자의 색이 바뀌도록 구현하였다기사 상세 부분의 하단 이전글과 다

오늘은 기사 미리보기 이미지를 다양하게 추가하였다기사 이미지에 대한 css는 이미 작성되어 있기 때문에 똑같은 클래스 명으로 div만 추가해주면 될 것이다이미지는 이미지 무료 사이트에서 가져왔다...많다css는 그대로 잘 적용되었다기사 미리보기 이미지는 자유롭게 적용해

오늘은 더보기 버튼을 구현하였다어떻게 해야 할지 감이 잡히지 않아 검색해봤더니 더보기 기능을 구현하는 데에는 여러가지 방법이 있다는 것을 알았다jquery를 이용해 구현하는 방법js 없이 css만으로 구현하는 방법보편적으로 더보기 기능을 구현할 때는 js(jquery)

오늘은 웹 페이지의 반응형( 미디어 쿼리 )를 조금 설정해보았다기본 상태( width 1280px 이상 )의 기사 상세 페이지미디어 쿼리는 메뉴바를 담당한 조원이 작성한 미디어 쿼리를 사용하였다기존에 양옆으로 배치되어있던 목록으로 버튼과 기사 본문을 위아래로 배치하고

오늘은 저번 시간에 이어 정보마당 메인 페이지의 반응형 ( 태블릿 사이즈, 모바일 사이즈 )을 구현하였다기사 상세 페이지와 마찬가지로 다른 조원이 작업한 메뉴바와 헤더, 푸터의 반응형을 작업한 곳에 이어서 구현하였다기사 목록을 2열 대신 1열로 나열하고, 이미지의 크기

오늘은 공백이 생긴 부분 ( 조직도, 특허, 지도 ) 의 애니메이션과 반응형을 남은 팀원들끼리 담당을 나누었다내가 맡은 부분은 조직도의 애니메이션이다조직도 부분으로 스크롤을 내리면 애니메이션이 작동되도록 작업을 해야한다'스크롤 애니메이션'을 검색하면 쉽게 찾을 수 있는

오늘은 오늘 진행한 멘토링 시간에 나온 피드백을 수정하였다피드백 내용은 기사 페이지의 반응형 페이지에 여백이 없어 답답해 보인다는 것이었다이를 해결하기 위해 body에 margin을 주었다양 옆에 여백이 적용되어 한 층 깔끔하게 보인다메인 페이지에서는 화면 크기가 줄어

오늘은 조직도 부분에서 왼쪽 위 '조직조'를 클릭하면 조직도의 도표가 사라지거나 나타나도록 구현을 하였다오늘 작업에 사용한 기능은 fadeToggle이다fadeToggle은 토글 기능과 fade 기능을 합쳐놓은 기능인데클릭했을 때 아이템이 나타나있지 않으면 fadeIn

오늘은 어려워하는 조원의 담당부분을 조금 구현해 도움을 주었다해당 팀원이 구현해야 할 부분다른 조원이 작업한 헤더와 푸터는 그대로 쓰고 사업현황 본문 부분만 작업하였다css일단은 에코스 부분의 왼쪽 부분만 구현하였다반대쪽 오른편 부분도 어려워하면 구현해 볼 예정이다2번

오늘은 어제에 이어 사업현황의 에코스 오른쪽 부분을 구현하였다디자인 시안위와 같이 div를 나누었다css완성한 모습글자를 오른쪽으로 정렬이 잘 되지 않는 어려움이 있었다글자 태그에 text-align right를 주면 글자가 오른쪽으로 붙는다사업현황의 에코스 부분 오른

사업현황의 에코스까지 마무리하고 모아두 구현을 시작했다구현해야 할 모아두 부분의 시안 에코스 구현했을 때와 마찬가지로 display: flex를 주고 justify-content: space-between으로 모아두 내부의 아이템을 양쪽으로 나누어주었다그리고 텍스트 c

오늘은 보고서 작성, 1차 발표 준비를 위해 지금까지 작업한 내용을 정리해보았다정보마당 메인기사 상세이렇게 작업한 내용을 정리해보니 정말 마무리가 되어간다는 느낌을 실감한다아직 1차 발표인걸 봐선 완전 끝은 아닌듯 하지만, 그래도 일단락 지었다는 기분이 들어 안심되었다

학습한 내용 오늘은 지금까지 진행한 전체 작업 내용을 한번 쭉 둘러보았다 어려운 내용 해결방법 학습소감

오늘은 리소프트 사에서 나온 최종 피드백을 수정하는 시간을 가졌다내 담당인 정보마당 부분의 피드백은 3가지였다먼저 게시물 이미지 마우스 오버시 이미지가 어두워지는 효과는 filter: brightness로 작업하였다그리고 글자색이 바뀌도록 작업하였다hover가 제대로

학습한 내용 오늘은 어제 수정한 피드백 중, 더보기 버튼이 사라지는 기능을 개선하는 작업을 하였다 어제는 단순히 클릭하면 버튼이 사라지도록 구현했지만, 오늘은 버튼이 사라지는 조건을 부여하였다 click 함수에 if 조건문을 주었다 클릭하면 모든 기사들이 fade

오늘은 정보마당의 기사에 약간의 애니메이션을 추가하는 작업을 하였다저번에 조직도 애니메이션 구현에 사용했던 AOS 라이브러리를 사용하였다먼저 head 안에 라이브러리를 불러오는 cdn 링크를 작성하고지난번과 같이 스크롤 애니메이션을 구현하고 싶은 영역에 data-aos

오늘부터는 다음주 월요일( 8.29 )에 있을 발표회를 대비하여 지금까지 작업한 내용을 전부 정리해 볼 예정이다오늘은 css를 살펴보았다REsoft 소식가장 먼저 내가 작업한 부분( .info_body )의 영역을 max-width: 1440px로 한정지어 주었다기사