코딩수강일지 (28) 썸네일형 리스트형 노마드코더 코코아톡 클론코딩 #6 수강일지 (개인확인용도/간단정리) VSC 단축키 1. html 기본코드 생성 : html 파일에서 가장 처음에 !(느낌표) 2. 주석처리(한줄) : Ctrl + / 3. 한줄 코드 위아래 이동 : Alt + ↑↓ 4. css link 코드 생성 : link:css 5. navigation 생성 시 nav>ul>li*4>a 입력 하면 아래와 같이 생성 됨! * 주석 HTML : CSS : /* 주석 */ BEM(Block Element Modifier) : 알아보기 쉽게 코드를 짜기위한 작성 규칙 block(재사용 가능한 기능적으로 독립적인 페이지 컴포넌트) ex) .btn { } elements(엘리먼트는 블럭을 구성하는 단위) ex) .btn__price { } (btn 안에 price) modifiers(블럭.. 노마드코더 코코아톡 클론코딩 #5 수강일지 (개인확인용도/간단정리) Git (Version control system) - Binary format으로 파일을 인식해서 어떤 파일이든(img, excel 등) 변경내역을 추적하는 것이 가능 Github : Git의 변경내역을 추적, 저장해서 볼 수있는 사이트 - repository : 코드를 저장하는 폴더 - commit(complete course mutation) : 코드를 저장하는 시점 - Git hub repository에는 반드시 README.md(markdown)파일이 있어야함(repository 위쪽 소개글) ★ git hub 저장순서! VSC에서 파일저장 → (changed된) 파일 git hub desktop에서 선택 → 아래 commit 타이틀 작성 → commit → Push 노마드코더 코코아톡 클론코딩 #4 수강일지 (개인확인용도/간단정리) Advanced CSS Transition (어떤상태(state)에서 다른상태(state)로 가는 변화를 애니메이션화) ex) "a" tag가 hover(마우스가 올려진) 상태일 때, green으로 변하는데 transition으로 10s간 천천히 변하도록 함 a { transition : background-color 10s ease-in-out; } a:hover { background-color: green; } 조건 1. 어떻게 상태를 변화시킬지 state(ex.hover)쪽에 적어주어야 함 조건 2. transition 코드는 처음 생겨난 태그(root)의 element에 적어주어야 함(그래야 마우스를 뗀상태에서도 동작) ease-in function : 브라우저에게 변화.. 노마드코더 코코아톡 클론코딩 #3 수강일지 (개인확인용도/간단정리) CSS (Cascading Style Sheet) cf) Cascading - 순차적인,연속적인 (브라우저는 위에서 아래로 읽히고 가장 마지막에 있는 코드가 적용됨★순서가 중요) - HTML에 CSS코드를 적용시키는 방법 1. HTML 파일 내 부분에 태그를 이용해 작성하는 방법 (inline CSS) 2. styles.css 파일을 따로 만들고 그 안에 CSS 코드를 작성한 뒤 HTML 파일에서 태그를 이용하여 CSS 파일과 연결 (external CSS) ex) - rel(relationship) : HTML 파일의 stylesheet의 관계라는 것을 명시해줌 ★ css 코드 작성 방법 tag name or # + id or . + class or *(css파일 전체적용) {.. 노마드코더 코코아톡 클론코딩 #2 수강일지 (개인확인용도/간단정리) VSC 파일명은 항상 소문자로 작성 브라우저는 항상 content를 보여줌 단축키 - 태그 앞 뒤 한번에 수정 Ctrl + D(하나씩 선택됨)(전체선택 Ctrl + F2) HTML - 브라우저는 tag를 이해 할 수 있기 때문에 tag 사이에 text를 넣어줌 (tag는 아무말이나 마음대로 만들수 있지만 브라우저가 이해 할 수 있는 tag는 한정돼있음) - attributes(속성) = 태그에 추가하는 정보 (속성값은 "큰따옴표"로 작성)(작은따옴표 X) - html 문서는 항상 코드로 시작 (필수는 아니지만 브라우저에게 text 파일이 아니라 html문서 라고 알려주는 역할) - HTML 문서는 HEAD(웹사이트의 환경 설정), BODY(사용자가 볼 수 있는 내용)로 구성됨 (.. 노마드코더 코코아톡 클론코딩 수강일지 #1 (개인확인용도/간단정리) 웹사이트는 단지 Text 파일일 뿐이다. 그 text 파일을 브라우저가 이해해서 사용자에게 보여주는 것 뿐 1. HTML JS로 크롬앱만들어보기 챕터3(#3) 내용정리 #3.0 - web page의 console(F12)창에 document 치면 작성된 그 페이지의 HTML볼 수 있음 document도 딕셔너리 형태로 저장되어있어 document.title , document.body 처럼 값을 불러 올 수 있음 * 결론적으로 Web page는 document라는 object를 보여주는 것 브라우저는 document 라는 object를 전달하는 방식으로 작동 * 더 중요한 건 JavaScript코드에서 HTML 코드를 수정할 수 있다는 것 document.title = " ~ " // HTML코드의 document 라는 object안의 title property를 document.title 이라는 JS 코드로 수정 할 수 있음 #3.1 JS로 크롬앱만들어보기 챕터2(#2) 내용정리 ◈ 기본개념 ◈ 브라우저는 html을 통해서만 .js파일과 css파일을 읽어들일 수 있다.(.js 파일과 css파일을 html 파일에서 불러와서 여는것) 용어 정리 data type 자료형 constant 상수 variable 변수 array 배열 element 요소(배열 내부의 값) object 객체 property 속성(객체 내부의 값) key : value 속성명 : 속성값 method 메소드(객체의 속성이 함수 자료형일때) function 함수 parameter 매개변수(함수를 정의할때 사용되는 변수) argument 인자(함수가 호출될때 넘기는 변수값) - property에 접근하는 방법 변수명.a; // 'a' 변수명['a']; // 'a' Data type string - 문자, float-.. 이전 1 2 3 4 다음
