개발자 박가나

CSS의 box-shadow 속성을 사용하여 그림자를 넣을 수 있다.  x축 그림자를 지정한다.음수일 경우, 왼쪽에 적용양수일 경우, 오른쪽에 적용 y축 그림자를 지정한다.음수일 경우, 위쪽에 적용양수일 경우, 아래쪽에 적용 그림자의 번짐 효과를 지정한다.값이 작을수록 선명하게 적용값이 클수록 흐릿하게 적용 그림자의 크기를 지정한다.음수일 경우, 크기를 축소시켜서 적용양수일 경우, 크기를 확대시켜서 적용 그림자의 색깔을 지정한다. inset 키워드를 붙여주면 요소 외부가 아닌 내부에 그림자를 적용한다.

Today 1. [팀 소개 페이지 만들기] 프로젝트 4일차 코딩[Header] 메뉴 클릭 시 해당 Section으로 이동[방명록 Section] 내용의 길이에 따라 말풍선 width를 유동적으로 조절 팀 소개 팀원 소개 방명록 ... ... ... ..

Today 1. [팀 소개 페이지 만들기] 프로젝트 3일차 Git으로 코드 병합Github에 Repository 생성각자 로컬에서 코딩 진행할 수 있도록 clone 진행각자 코딩한 내용 push하여 하나의 프로젝트로 병합 코딩[방명록 Section] 말풍선에 실제 데이터 반영[방명록 Section] 말풍선을 최근 등록 순으로 정렬/* JavaScript 코드 */// 데이터베이스 초기화const commentDB = firebase.database().ref('comment');// 데이터 읽어오기commentDB.on('child_added', (data) => { const commentData = data.val(); // 이전 내역 임시 저장 let prev_comment = do..

Today 1. [팀 소개 페이지 만들기] 프로젝트 2일차 와이어프레임 구축Footer역할 분담하은님 : Header & Footer지영님 : 랜딩 Section & 팀 소개 Section윤솔님, 진실님, 채현님, 나 : 팀원 소개 Section & 방명록 Section코딩[방명록 Section] 말풍선 HTML, CSS 방문자 1 just now 방명록입니다. ..

Today 1. OT 캠프 안내커리큘럼 안내본격적으로 캠프를 시작하기 전, 방현재 총괄 매니저님과 이강민 튜터님께서 OT를 진행해 주셨다. 앞으로 4.5개월동안 어떤 활동을 하게 되는지 파악하고 비록 비대면이었지만 함께 할 분들의 얼굴도 처음으로 마주하면서 설레기도 하고 긴장되기도 했다.    Today 2. 팀 배정 및 인사 팀명 : I5E1구성원 : 임지영(팀장), 원윤선, 박채현, 김진실, 박가나, 박하은처음에는 개인 학습 진행반에 배정이 되었지만, 사전캠프에서 제공된 강의를 모두 수강한 상태였기 때문에 담임 매니저님께 말씀드려서 프로젝트 진행반으로 다시 배정받게 되었다. 새로 배정받은 팀에 합류를 하니 팀원 6명 중 5명이 I 성향을 가진 사람이어서 자연스레 E 성향을 가진 한 분이 팀장을 담당하..

어제 듣던 웹개발 강의를 이어서 수강하기로 했다 Today 1. [웹개발 종합반] 강의Fetch 기초데이터베이스 기초Firebase를 사용하여 데이터 삽입 및 조회Github 기초 및 배포파이썬 맛보기웹 개발 프로젝트추억 앨범스파르타플릭스 어제까지는 JavaScript를 어느정도 배우긴 했어도 HTML과 CSS가 메인이었기 때문에 프론트엔드 개발자보다는 퍼블리셔 느낌이 강했는데 오늘은 정말 프론트엔드 개발자로서의 코딩을 하는 느낌이 들었다. 서버에서 데이터를 가져와보기도 하고 반대로 웹페이지에서 입력한 데이터를 서버에 저장해보기도 하면서 웹사이트의 작동 원리와 데이터의 흐름 등을 다시 한 번 상기시킬 수 있는 시간이 된 것 같다. 하루 마무리남아있던 강의 수강을 마지막으로 사전캠프가 종료되었다. 늦게 합..

사전캠프에서 요구된 과제를 어제 모두 마무리하게 되어서 남은 사전캠프 기간 동안에는 웹개발 강의를 수강하기로 했다. Today 1. [웹개발 종합반] 강의웹 브라우저의 작동 원리HTML 및 CSS 기초구글 폰트 및 부트스트랩 가져다 쓰기JavaScript 및 JQuery 기초클라이언트와 서버의 관계웹 개발 프로젝트추억 앨범스파르타플릭스 강사님께서 이번 강의에서 사용하는 HTML 태그와 CSS 문법이 앞으로 코딩을 해나가면서 사용할 내용의 90% 이상을 차지할 것이고, JavaScript도 어려워할 것 없이 변수, 자료형, 함수, 조건문, 반복문 5가지만 잘 기억하고 활용하면 된다는 얘기를 해주셨는데 기초 강의임에도 불구하고 실제로 평소 코딩할 때 사용하는 내용의 대부분이 강의에 포함되어 있었다. 또한, ..

어제에 이어 오늘도 과제를 수행하면서 직접 코딩을 해보는 시간을 가지기로 했다. Today 1. [로또 번호 생성기 만들기] 과제행운의 넘버 버튼 클릭 시 1~45 사이 숫자 6개 무작위로 보여주기번호를 오름차순으로 정렬하기이전 결과를 저장하고 새 결과와 비교하기 numbers.sort((a, b) => a - b) 무작위로 선정된 6개의 숫자를 오름차순으로 정렬하기 위해 sort 함수를 사용하였다. sort 함수의 경우 코드 한 줄로 간편하게 정렬을 구현할 수 있기 때문에 사용하게 되었지만 시간이 날 때 버블 정렬, 삽입 정렬 등 정렬 알고리즘을 사용해서 구현해보는 것도 좋은 경험이 될 것이라는 생각이 들었다.  Today 2. [MBTI 테스트 만들기] 과제각 질문 당 하나의 답변만 선택하기답변 완료..

오늘은 강의를 수강하는 대신 과제를 수행하면서 직접 코딩을 해보는 시간을 가지기로 했다. Today 1. [숫자 기억 게임 만들기] 과제시작 버튼 클릭 시 1000~9999 사이 숫자를 무작위로 보여주고 3초 뒤 지우기숫자 입력 후 제출 버튼 클릭 시 정답 유무 보여주기숫자가 지워지기까지 남은 시간 보여주기숫자 이외의 문자 입력 시 경고 문구 보여주기정답률 보여주기 let time = 3let timer = setInterval(() => { timeArea.textContent = `${--time}초 뒤 숫자가 사라집니다.`}, 1000)setTimeout(() => { clearInterval(timer)}, 3000) 숫자가 지워지기까지 남은 시간을 보여주는 기능을 구현하기 위해 setInt..

프론트엔드 개발 부트캠프 7회차를 신청하고 최종 합격하게 되어 OT를 진행한 뒤 사전 캠프에 참여하게 되었다. 사전 캠프인 만큼 기초적인 내용의 강의 2가지가 제공되었다. 프론트 웹 개발자로서의 경력이 있는 나에게는 너무나도 기초적인 내용이었지만, 기초부터 다시 다지자는 생각으로 시작한 캠프였기 때문에 설령 알고 있는 내용이라 할지라도 다시 한 번 정리한다는 생각으로 강의를 수강하기로 했다. Today 1. OT Today 2. [프론트엔드 기초] 강의프로그래밍의 개념과 개발자의 종류프론트엔드와 백엔드의 차이프론트엔드 실습HTMLHTML 기본 구조자주 쓰이는 태그 종류JavaScript변수 및 기본 연산리스트 및 딕셔너리함수반복문 및 조건문 웹 개발자는 무슨 일을 하는지, 프론트엔드 개발자와 백엔드 개발..