코딩수강일지/노마드코더 코코아톡 클론코딩 수강일지 (6) 썸네일형 리스트형 노마드코더 코코아톡 클론코딩 #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 이전 1 다음
