본문 바로가기
반응형

Spec UP - Frontend/패스트캠퍼스_FrontEnd12

Node.js JavaScript : 웹 브라우저에서 여러 요소들을 동적으로 움직이거나 외부와 통신하기 위해 사용하는 언어 Node.js : 또 다른 자바스크립트 실행환경, 즉 브라우저 밖에서도 자바스크립트를 실행할 수 있다. Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. 웹서비스 실현 시 프론트엔드(HTML, CSS, JavaScript)와 백엔드(Java, PHP, Python) 개발이 필요한데 Node.js를 이용하면 백엔드에서도 JavaScript를 이용할 수 있다. 즉, 자바스크립트 언어만으로도 웹서비스를 구현할 수 있는 장점이 있다. 01. Node.js 설치 방법 Node.js의 경우 버전이 계속 변경되다보니 주로 노드 버전관리자(NVM)를 함께 설치한다. (구글링 #n.. 2021. 12. 13.
JS 선행(DOM API) DOM API (Document Object Model Application Programming Interface) DOM은 문서 객체 모델(Document Object Model)을 의미하며 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현을 제공하고 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서의 구조, 스타일, 내용 등을 변경할 수 있게한다. 그렇다면 DOM 구조는 무엇일까? DOM은 위의 이미지처럼 Tree형식의 자료구조로 되어있어 DOM 트리라고도 한다. Tree에서 위쪽의 노드를 부모노드, 아래쪽 노드를 자식노드라고 부르며, 최상단의 부모노드가 없는 노드를 Root(뿌리) 노드라고 하고 반대로 자식노드가 없는 노드를 Leaf(잎).. 2021. 10. 21.
JS 선행(표기법/데이터종류/변수/함수/조건문/메소드체이닝/defer) 1) 프로그래밍 표기법 ① dash-case(kebab-case) : 일반적으로 마이너스 기호를 사용하여 단어와 단어 사이를 꼬챙이 - 로 꽂은듯한 표기법. : HTML, CSS에서 주로 이용 ② snake_case : 언더바를 사용하여 단어와 단어 사이를 잇는 표기법 : HTML, CSS에서 주로 사용 ③ camelCase (낙타의 혹) : 첫글자만 소문자로 표기하고 다음에 오는 단어부터 맨 앞글자를 대문자로 적는 표기법. : JavaScript에서 주로 사용 ④ PascalCase : 카멜케이스와 유사하지만, 첫 단어의 맨 앞글자도 대문자로 적는 표기법. : JavaScript에서 많이 사용. 2) Zero-based Numbering : 일반적으로 숫자는 1부터 번호를 매기지만, 프로그래밍에서는 특.. 2021. 10. 20.
CSS 속성 Part 2. HTML에서 속성 : Attributes CSS에서 속성 : Properties JS에서 속성 : Properties CSS를 통해 적용하는 스타일 목차 박스 모델 글꼴, 문자(기울기, 두께, 크기, 높이, 글꼴, 색상, 정렬, 장식, 들여쓰기) 배경 (배경 색상, 이미지 삽입, 이미지 반복, 이미지 위치, 이미지 크기, 이미지 스크롤) 배치 (position-relative, absolute, fixed/stack order) 플렉스(정렬) (flex- flex container, flex items) 전환 (transition, 속성명, 지속시간, 타이밍함수, 대기시간) 변환 (transform,원근법, 이동, 크기, 회전, 기울임, 뒷면숨김) 띄움 애니메이션 그리드 다단 필터 2-1) 글꼴 ① fo.. 2021. 10. 17.
CSS 속성 Part 1. (박스모델) HTML에서 속성 : Attributes CSS에서 속성 : Properties JS에서 속성 : Properties CSS를 통해 적용하는 스타일 목차 박스 모델 : 너비, 단위, 여백, 테두리, border-radius, box-sizing, overflow, display, 투명도 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 1) 박스모델 속성 ① width, height : 요소의 가로/세로 너비 기본값 : auto(브라우저가 너비를 자동 계산) / 단위 :px, em, vw 등 단위로 지정 Hello : span은 대표적인 인라인 요소로 가로와 세로너비가 콘텐츠의 크기만큼 자동으로 줄어든다. Hello : div은 대표적인 블록요소로 가로너비는 부모요소의 크.. 2021. 10. 17.
CSS 선언방식/주석/선택자 CSS 선언방식 1) 내장방식 : head 태그 내에 의 내용(contents)으로 스타일을 작성하는 방식. 장점 : 별도의 CSS 파일을 만들지않아도 적용가능. 단점 : CSS 내용이 많아지는 경우 html문서가 길고 복잡해짐. 2) 인라인방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음) 장점 : 선택자를 설정하지 않아도 태그 내에서 바로 찾아 편리함. 단점 : CSS 우선순위가 높아 추후 유지보수가 어려울 수 있음. 3) 링크방식 : 로 외부 css 문서를 가져와서 연결하는 방식(여러개 css파일 연결 가능) 4) @import 방식 : CSS의 @import 규칙으로 CSS문서 안에서 또다른 CSS문서를 가져와 연결하는 방식 ex:) html 문서에서 main.css라는 .. 2021. 10. 16.
HTML (문법/빈태그/inline/block/태그/주석/전역속성) HTML의 기본문법 내용 여기서 태그로 감싸진 부분이 코드로 동작하게 되는데 이것을 요소(Element)라고 부른다. 앞쪽의 태그는 시작(열린)태그, 뒤쪽 태그는 종료(닫힌)태그라고 부른다. HTML의 부모/자식관계 //부모요소이자 상위(조상)요소 //부모요소이자 자식요소 내용 //자식요소이자 하위(후손)요소 //자식요소 : 주로 줄바꿈과 들여쓰기를 통해 가독성을 높임. 빈 태그(Empty) 일반적인 html문법에서는 시작태그와 종료태그가 짝을 이루는데 시작태그만 있고 종료태그가 등장하지 않는 홀로있는 태그를 빈 태그라고 부른다. 이러한 빈태그의 방식은 두가지가 있다. 1) 편리함, HTML 1,2,3,4,5 호환 2) 시작태그만 보아도 빈 태그라는 것을 인지할 수 있어 안전한 개발 가능, XHTML/H.. 2021. 10. 16.
브라우저 스타일 초기화 크로스 브라우징이 필요한 이유에 대해 알아봅시다. 크로스 브라우징 : 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법 위와 같이 라는 태그에만 style을 지정해준 예시를 살펴보겠습니다. 해당 html 문서를 실행하여 웹사이트에서 '개발자도구'를 통해 확인해보면 아래와 같이 body 태그에는 아무런 스타일지정을 하지 않았음에도 Styles에 margin:8px; 가 설정되어있는 것을 볼 수 있습니다. 여기서 body 태그에 지정된 styles은 크롬 브라우저에서 제공하는 설정이며, 동일한 웹페이지를 다른 브라우저에서 열게되면 조금씩 상이하게 style이 확인될 수 있습니다. 그래서 개발을할때에 브라우저의 기본적인 styles을 .. 2021. 10. 16.
codepen.io / HTML,CSS,JavaScript 학습 HTML, CSS, javascript 코드를 작성하고 테스트해볼 수 있는 사이트 https://codepen.io/pen/ Create a New Pen ... codepen.io HTML은 태그 안에 입력한다는 기준으로 작성. (html 문서기본정보 선언할 필요 없음) 로그인 없이도 테스트 가능하나 작성한 내용을 저장하기를 원하는 경우 로그인 필요. 2021. 10. 16.
무작정시작하기_HTML // HTML의 버전을 설정 //문서의 전체범위, Html 문서가 어디에서 시작하고 끝나는지 알려주는역할. HTML 문서에 JS문서 연결하는 방법 * 웹사이트가 열릴때 영어/한국어 번역 선택하도록 나오는 경우, 일반적으로 한국어 사이트를 제작하기때문에 번역을 묻는 팝업이 나오지않도록 하는 방법. // lang(language의 약어)은 지정할 문서의 언어를 명시하는 HTML 속성. // 한국어로 동작시키는 경우 lang을 ko로 수정할 것. 정보를 의미하는 태그 살펴보기(feat. head 태그) 화면에 이미지 출력하기 의 형태로 코드 작성. (프로젝트 폴더에서 사용할 이미지파일들을 images 폴더를 별도로 생성하여 관리하는 것을 권장. 상대경로 ./ (작성된 파일 기준 주변파일 찾기, 생략가능) .... 2021. 10. 16.
반응형