참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 잘 정리해둔 글이 있어서 링크를 남긴다. 추가로 flex에 이어서 grid에 대한 설명도 있으니 필요하면 찾아서 사용하자. flex에 대한 설명 : https://studiomeal.com/archives/197 grid에 대한 설명 : https://studiomeal.com/archives/533 지금 당장 알아야 할 것은... flex-direction으로 배치의 방향(가로축 row, 세로축 column)을 선택한다는 사실. 선택한 축 방향으로 정렬하고 싶으면 프로퍼티로 justify-content:를 사용한다. 선택한 축의 수직 방향으로 정렬하고 싶으면 프로퍼티로 align-items:를 사용한다..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS Pseudo-classes 가상 클래스, 의사 클래스로 번역되어 사용되고 있다. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :..

유튜브 클론 코딩 참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 유튜브를 클론 코딩하면서 배운 Html, CSS, JS를 사용해보자. 빠르게 태그 만들기 vscode에선 이렇게 작성한 다음 tab을 누르면 빠르게 태그를 생성해준다. .는 해당 태그의 id 값을 뜻한다. header 태그, id가 player인 section 태그, id가 info인 section 태그 그리고 id가 upNext인 section 태그를 생성한다. li*3 li 태그 3개를 빠르게 만드는 방법이다. .hashtags . 앞에 아무것도 없으면 div 태그가 기본값으로 설정되어있다. 태그안에 태그 빠르게 button 태그를 안에 포함하는 li 태그 5개를 빠르게 생성하는 방법 Fon..

유용한 사이트 출처 : https://www.youtube.com/watch?v=67stn7Pu7s4 가. Html 태그 참고 HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org 나. 어울리는 레이아웃 색 조합 Color Tool - Material Design Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of a..

객체예고 - 생활코딩 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 객체 자바스크립트의 객체에 대하여 알아본다. 객체의 예시로 자금까지 사용한 document도 객체에 속한다. 여타 언어와 크게 다르지 않다. 객체는 프로퍼티와 메서드를 포함하고 .(객체 접근 연산자)를 통해서 이것들에 접근할 수 있다. 객체 문법 가. 객체 선언 객체를 만드는 {}기호를 객체 리터럴(object literal)이라고 한다. 요소를 구분하기 위해서 , 콤마를 사용한다. 나. 객체 프로퍼티 추가하기 coworkers.subject = "JavaScript"; 간혹 key에 공백을 포함한 경우가 있다. 이때 coworkers.prior knowledge = “..

배열과 반복문의 활용 - 생활코딩 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 1. 배열과 반복문 정통적으로 배열과 반복문은 같이 사용되는 경우가 많다. 가. 실습 : 리스트 작성 Loop & Array count one two three four 같은 효과를 내는 더 효율적인 방법이 있다. ... one two three four ... 해당 코드를 배열과 반복문을 이용해서 대체하면 유지보수 측면, 중복 최소화, 가족성 측면에서 유리하다. ... ... 배열의 크기만큼 배열의 값을 리스트로 작성한다. Loop & Array count 2. 콘솔 개발자 도구를 잘 다루면 편하다. 우클릭 → ‘검사’ 클릭 → ‘console’ 콘솔창을 ..

배열 - 생활코딩 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 배열 배열 선언 ... ... 배열에 값을 추가하는 법 ... ... Array - JavaScript | MDN JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다. developer.mozilla.org push() 외에도 pop() , shift() , unshifth() 등의 기능도 제공한다. pop() : 가장 뒤에 값을 반환하고 삭제 그리고 전체 길이는 줄어듬. shift() : 가장 앞에 값을 반환하고 삭제 그리고 순서를 한 칸씩 앞으로 당김. unshift() : 가장 앞에 값을 추가하고 그리고 순서를..

변수와 대입 연산자 - 생활코딩 변수와 대입 연산자 2017-12-01 03:26:24 opentutorials.org 이 글은 이고잉님의 오픈튜토리 강의를 듣고 정리한 내용입니다. JS 학습의 방향성 이미 파이썬, C, Java를 배웠다. 이 짬(?)을 바탕으로 빠르게 JavaScript를 배워보겠다? 배경지식을 바탕으로 부족하거나 새로운 지식만 짚고 넘어갈 것이다. 제어할 태그 선택하기 버튼 2개를 생성했다. night 버튼을 누르면 배경은 어둡게, 글자는 밝게 만들고 싶다. 또 day는 그 반대로 기능하도록 만들고 싶다. WEB Html 코드다. input 태그에 onclick 속성을 추가한다. 클릭 이벤트가 발생한 경우 실행할 JavaScript 코드를 추가한다. 설명은 아래에. document...