본문 바로가기
반응형

유튜브로 코딩배우기

반응형
[자기계발]/유튜브로 코딩배우기 2021. 8. 15. HTML <div> 대신 사용하는 것들. 바로 시맨틱(Semantic) 태그 웹사이트를 만들 때 div를 남발하는 경우가 많은데, 그렇지 않고 의미있는 태그들을 사용하는 것이 좋다. 이 태그들을 시맨틱 태그 (Semantic tag)라고 하며 "의미의"라는 뜻이다. 이것을 봄으로써 다른 사람이 만든 웹사이트를 볼 때, html 태그의 의미를 정확하게 파악할 수 있다. , 태그는 non-semantic 태그이고, ,, 등 밑에 나오는 태그들이다. header 웹사이트의 브랜드를 나타내줄 수 있는 로고나 사용자들을 위한 중요한 메뉴 아이템이 들어 있다면 대신에 를 사용하는 것이 좋다. 만약 안에 여러가지 메뉴들이 모여있으면 뒤에 보다는 를 사용하는 게 좋다. 는 다른 페이지로의 링크를 보여주는 구획을 담당한다. 메뉴, 목차, 색인에 주로 쓰인다. footer 웹사이트 제일 아래에 마..
[자기계발]/유튜브로 코딩배우기 2021. 8. 9. CSS Flex-box , 반응형 웹사이트의 필수조건 미디어 쿼리 여기서는 CSS에서 유용하게 쓰이는 Flex-box에 대해서 알아볼 것이다. Flex-box가 나오기 전에는 float와 position으로 어렵게 아이템들을 배치 했지만 이제 float는 원래 목적에 맞게 image와 text를 어떻게 배치할 건지에 대해 정리할 때만 쓴다. Flex box margin, border, padding을 이용해여 box를 여러개 정렬하는 거는 한계가 있다. 여러개의 아이템을 수평/수직으로 정렬할 때, 박스를 동일한 '간격'과 '사이즈'로 배치할 때 사용하는 것이 flexbox이다. Flexbox 2가지만 이해하면 큰 그림을 이해할 수 있다. Flexbox에는 'container 에 지정되는 속성값들'과 'item 에 지정되는 속성값들'로 나누어져있다. flexbox를 만들..
[자기계발]/유튜브로 코딩배우기 2021. 8. 8. CSS 기초 이론, 레이아웃 정리, 색깔 코드 사이트, Emmet 사용법 CSS 복습을 다시해보려고 한다. 이번에는 생활코딩이 아닌 '드림코딩엘리' 유튜브 채널에서 공부를 하였다. 이 강의를 보고나니 생활코딩의 강의는 너무 오래됐다는 것을 알게되었다. 오래된 강의를 보고 어려운 방법으로 어렵게 개발하는 것은 좋지 않다고 생각한다. IT 쪽은 매년 많은 업데이트가 일어나는데 구식에 얽매여있기 보다는 좋은 기능을 유용하게 쓰는 현명한 사람이 되자. CSS 기초이론 padding은 안 쪽 여백 / border는 테두리 / margin은 바깥 쪽 여백 이다. padding: (top, bottom,) (right, left) 순으로 적는데 생략해서 쓰려면 ( ) 는 세트로 생각하며 된다. padding: 20px 0px; 이렇게 하면 (위 아래)는 20px (양옆)은 0px 이렇게 ..
[자기계발]/유튜브로 코딩배우기 2021. 8. 5. [드림코딩 엘리] 자바스크립트 Object를 만드는 방법, key 사용법, 이번 편에서는 자바스크립트 Object를 알아볼 것이다. 오브젝트란 자바스크립트의 데이터 타입 중 하나이며 관련 데이터 및 기능의 모음이다. Javascript의 거의 모든 객체는 Object의 사례이다. const name ='ellie'; const age = 4; print(name, age); function print(name, age) { console.log(name); console.log(age); } primitive 타입은 변수 하나당 값 하나를 담을 수 있고, 이름과 나이를 각각 parameter로 전달해줘야 한다. 만약에 위에처럼 코드를 작성하면 관리하기도 힘들고, logical 하게 골고루 생각할 수 없기 때문에 좋지 않다. 그래서 objet를 쓰는 것이다. 1. Literals..
[자기계발]/유튜브로 코딩배우기 2021. 8. 3. [드림코딩 엘리] class와 object의 차이점, 객체지향 언어 클래스 정리 이번 편의 핵심은 사물과 물체들을 class로 정리할 수 있는 눈을 기르는 능력을 갖는 것이다. 강의가 끝나고 어떻게 저것들을 class로 만들 수 있을지 생각해보라. 또한 쇼핑몰 만들 때 or 수강신청 프로그램을 만들 때 어떻게 class로 잘 정리할 수 있을까를 생각해보자. Class 와 Object class를 이용해서 상속과 다양성이 일어날 수 있는데 이런 모든 것들이 가능한 것이 바로 객체지향 언어이다. e.g.) 캡슐화, 상속, 다양성 등 person 이라는 class 안에는 name과 age 라는 속성이 있고, speak() 말하는 function이 들어있다. class 안에는 이름과 나이 같은 속성(field)가 들어있고, 말하는 행동(method)가 들어있다. class는 조금 더 연관이..
[자기계발]/유튜브로 코딩배우기 2021. 8. 1. [드림코딩 엘리] 자바스크립트 Function Expression이란? 저번 글에서는 Function declaration을 알아보았다. 이번에는 Function Expression에 대해 알아보자 1. Function Expression / First-class function // functions are treated like any other variable // can be assigned as a value to variable // can be passed as an argument to other functions // can be reteurend by another function // 1. Function Expression // a function declaration can be called ealier than it is defiend. (hoist..
[자기계발]/유튜브로 코딩배우기 2021. 7. 25. [드림코딩 엘리] 자바스크립트 연산, 반복문. 헷갈리는 ++i, i++ 이해 / 짝수, 홀수 구하는 방법 이번편에서는 기본 문법인 자바스크립트 연산과 반복문을 배운다. 예전에 생활코딩으로 공부했을 때 봤던 내용들이여서 복습겸 봤는데 제일 큰 수확 2가지가 있었다. 드디어 ++i 와 i++ 의 차이점을 알게되었다는 점(앞에 ++가 붙으면 먼저 변수에 할당되어서 들어가는 것이고 / 뒤에 붙으면 그대로 들어가서 계산이 된 다음에 ++가 되는 것. for 문에서 보통 i++를 쓴다). 짝수와 홀수를 구하려면 4 % 2 == 0 (나누고 나머지의 값이 0이냐 == 0이냐 짝수이냐 묻는것 / !==를 쓴다면 홀수이냐 묻는 것이다) 이런식으로 구할 수 있다는 점. 드림코딩 엘리는 마지막 퀴즈를 통해 직접 연습하게 한다는 점에서 좋은 강의 인 것 같다. 1. String concatenation // 1. String c..
[자기계발]/유튜브로 코딩배우기 2021. 7. 23. [드림코딩 엘리] 자바스크립트 최신 ES6강의! 데이터타입, var 보다는 let을 쓰기, hoisting이란? 타입스크립트란? 코딩 유료강의를 찾다가 드림코딩이 괜찮다고 해서 강의를 신청하였다. HTML, CSS, JavaScript를 생활코딩에서 배웠으므로 유료강의중 이 3가지를 모두 활용하는 브라우저 101를 선택하였다. 가격은 $100불로 117,000원 정도이다. 하지만 진도를 나가자마자 콱 막히게 되었다. 까먹은 부분이 매우 많았으며 또 사용하는 코드도 달랐다. 다시 강의를 자바스크립트 강의를 듣자니 또 너무 시간이 걸리지 않나 하고 생각했지만 드림코딩 엘리님의 강의를 듣고 나니 겸손해졌다. 생활코딩도 물론 좋지만 강의가 너무 오래돼서 인지 엘리님과의 코드와는 많이 달랐다. 그래서 2배속으로 한번 훑어보자는 마음을 접고 다시 차근차근 배워나가기로 했다. 매일 1강씩 출발! 프로그래밍 언어에서 가장 중요한것은 입력 / 연..

티스토리툴바