Web Dev 214

11 :: DOM, 노드

엘리스 SW 엔지니어 트랙 11일차 오규석 코치님 DOM 이해하는 날 Document Object Model 태그는 노드라고 할 수 있다고 하신다 DOM 구성 될 때 태그, 텍스트, 주석까지 모두 노드다 Test1 // h1 태그도 노드 Test2 // 들어있는 Test2도 노드 // 줄바꿈도 노드 Test3 Test4 // 이 녀석도 노드 // 모든게 노드!! 라고 적은 이 주석도 노드 노드 탐색 nextSibling firstChild previousSlbling nextElementSibling 등 하지만 직접 getElementyById, querySelector로 가져오기 때문에 잘 사용할 일은 없다고 한다 JavaScript에서 노드 만들어서 HTML에 넣기 let header = docume..

Web Dev/ELICE 2021.11.09

10 :: 자기소개 페이지 만들기

엘리스 SW 엔지니어 트랙 10일차 오늘은 한 가지만 하면 됐다 주어진 내용이 담긴 자기 소개 페이지를 만드는 것이다 지금까지 복습한 HTML, CSS, JavaScript 이용해서 만들었다 한 눈에 봐도 멋진 자기소개서를 만들려고, figma도 키고, 리소스도 찾아봤다 결과는 과연 . . . 굉장히 심플한 1페이지 자기소개서가 완성됐다 이 것도 시간이 꽤 걸렸다 갑자기 하려니까 쉽지 않구만~ 머리속에 있는 상상을 코드로 끄집어 내는 연습이 귀찮아도 해봐야 되나보다 결국엔 만족할 수 있는 포트폴리오를 만들어야 되니까

Web Dev/ELICE 2021.11.06

9 :: JavaScript 활용, 난이도 급 상승

엘리스 SW 엔지니어 트랙 9일차 온라인 강의날 오늘도 조금 일찍 시작했다 연산자, 조건문, 반복문의 기본 사용법을 알아보는 시간 이매 해봤던 내용이라 쑥쑥 넘어갔다 넘어가다 보니 JavaScript 활용해서 무언가를 만들어보는 내용으로 들어갔다 주사위 놀이, 소수출력 등 쉬운 문제를 풀었다 별거 아니ㄴ.. 갑자기 문제 난이도 급상승! 한번에 푸는 문제도 있고 시간이 걸려도 100점 통과 못하는 사태 속출중 readline 원 없이 써봤네 const readline = require('readline') 와우 오늘은 10시간을 넘겼다.. 한 문제 75점 빼고 전부 통과했다 75점 문제 때문에 평생 99% 유지예정 /********추가********/ 아니 11시간 넘겼고 다른 레이서들의 도움으로 못 풀은..

Web Dev/ELICE 2021.11.05

8 :: JavaScript 입출력, Number() parseInt(), 정규표현식 복습

엘리스 SW 엔지니어 트랙 8일차 온라인 강의날 오늘은 아침 일찍부터 시작!! 온라인 강의날의 좋은 점은 원하는 시간에 맞춰서 할 수 있다는 것 오늘은 일찍시작해서 일찍 끝난다~~ 점심쯤에는 추가적으로 뭐 할지 생각해봐야지 오늘은 JavaScript 데이터 타입 Property와 몇 개의 Method 그리고 JavaScript 문제를 풀었다. ES6 문법인 화살표 문법부터 console에서 입력을 받는 법 입력을 받아서 간단한 문제를 푸는 듯 알고리즘 코딩 테스트를 염두한 것일까? 풀릴 땐 참 재밌어~ 문제 중에 훅! 하고 정규표현식이 나왔네 다 까먹었는데.. freeCodeCamp에서 정규표현식 부분만 복습 해봐야겠다 복습중 match()랑 test() 방향이 같았으면 좋을텐데 오늘의 궁금증 해결 Nu..

Web Dev/ELICE 2021.11.04

7 :: egoing님 명언, 템프릿 리터럴, 객체지향

엘리스 SW 엔지니어 트랙에서 배운것 생활코딩 이고잉 선생님 실습강의는 오규석 코치님 어제 배운 내용 복습으로 시작했다 자바스크립트를 사용하는 방법 3가지 변수란 무엇인가 boolean 데이터 타입 등 등등 반복문을 배우기 위해 배열의 개념을 알아봤다 egoing님이 자주 하는 말씀 0.1초가 걸리는 일을 1억번하면 115일이 걸리는데 115일 동안 그 일을 하는 것보다 JavaScript를 115일 동안 잘해지는게 더 좋지 않나요? debugger의 신기함 언제 쓰일지 모르겠지만 분석할 때 필요한 기능을 가지고 있는 것처럼 보인다 템플릿 리터럴 `` 누가 만들었건 너무 고마운 사람 이고잉님 설명을 엄청 잘하신다 영업하시면 영업왕 되실 듯 알고 있던 사실이 놀랍게 다가오도록 설명을 하신다 들으면서 계속 ..

Web Dev/ELICE 2021.11.03

6 :: 전 주 복습, JavaScript 시작

엘리스 SW 엔지니어 트랙에서 배운것 이고잉님 실시간 강의 /************ 전 내용 복습 *************/ Git에서 HEAD가 가장 중요 git log --oneline --all 한 줄씩 모든 줄을 볼 수 있다. Git은 어떤 버전도 다 기억한다. 다 지켜보고 있다. 앞에서 배운 html, css 무의식적으로 할 수 있도록 연습하자 /************ 본 강의 시작 JavaScript *************/ JavaScript 사용자와 대화하는 JavaScript onclick은 중요한 예시 onclick 안에는 JavaScript를 기다린다 this 사용하면 자기 자신 사용된 태그를 반환한다고 약속되어있다. 오늘은 숫자와 문자열의 차이점 변수, boolean 타입 그리고 ..

Web Dev/ELICE 2021.11.02

5 :: Git Git Git, 1주 차 정리

엘리스 SW 엔지니어 트랙에서 배운것 Git git Git 이래 저래 사용하던 git 오늘 끝내보자!! 확인 명령어 git status staging에 있는 파일들 확인 git log .git repository에 있는 commit 히스토리 확인 commit 했던 모든 내용 확인 옵션 git log -n 상위 n개만 보여준다 git log --graph commit간 연결 관계를 아스키 그래프로 출력 branch 나오면 중요하다고 한다 아직 이해 안가지만 Git 핵심 - 가지 치기 Git Branch 만들고 - git branch 옮기고 - git checkout 브랜치 이름 Git Merge 인수합병 master로 이동해서 원하는 branch 인수합병 fast-forward 병합 master는 변함없이..

Web Dev/ELICE 2021.10.30

4 :: y축 중앙 정렬, jQuery 플러그인, form, 이미지 슬라이드 ...

엘리스 SW 엔지니어 트랙에서 배운것 김인권 선생님 모바일 웹 페이지 오늘 중요한 내용은 position이라고 하신다. 2차원과 3차원 성격을 가진 속성값들이 있다. 2차원: statics 2 & 3차원: relative 3차원: fixed, absolute relative 포함 3차원 속성을 가진 녀석들에, z-index로 3차원 세계에서 우선순위를 정할 수 있다고 한다. absolute, relative 등 position 속성을 가지고 놀아보는 시간을 가졌다. background-size 배경 이미지 크기를 정하는 속성 contain cover 를 많이 사용한다. background-attachment 배경 이미지를 position의 fixed처럼 사용한다 y축 중앙 정렬 선생님이 보통 사용하는 방..

Web Dev/ELICE 2021.10.29

3 :: 움직이고 반응하는 신기한 세계

엘리스 SW 엔지니어 트랙에서 배운것 오규석 코치님 CSS는 많이 해보는 수밖에 없다. 움직이고 반응하는 웹사이트 Transition 움직이는 과정을 보여주는 신기한 녀석 누구를 변화 시킬래? => transition-property 얼마 동안? => transition-duration 어떻게 움직일래? => transition-timing-function 딜레이 줄까? => transtion-delay .transition { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } *transition-property: all(기본값) Transitions ..

Web Dev/ELICE 2021.10.28

2 :: 온라인 강의 첫째 날

엘리스 SW 엔지니어 트랙에서 배운것 첫 온라인 강의는 HTML, CSS 기초를 알려주는 강의 김인권 선생님 HTML 태그 한글 깨질 수도 있으니까 밑의 코드는 항상 넣어주자 태그 alt를 꼭 넣어주자 태그 태그는 한 번만 사용 보통 회사 타이틀/로고는 이렇게 사용한다 중요하기에 h1 사용 태그 메뉴는 보통 이렇게 구성 메뉴1 메뉴2 태그 꼭 태그가 하나는 있어야, 검색에서 문제없이 보인다. 실습 완료하면 나오는 엘리스 안녕~ CSS 선택자, 속성, 속성값으로 구성 CSS 적용하는 방법 3가지 Inline 해당 태그에 직접 입력 Internal 같은 파일 태그 안에 입력 External 별도 css 파일 안에 입력 가독성 높고, 유지보수 용이! 캐스케이딩(Cascading) CSS 우선순위를 캐스케이딩이..

Web Dev/ELICE 2021.10.27
728x90