웹 프론트엔드를 잘 배우고 싶으신가요? 또 무엇을 마스터해야합니까?

웹 프론트엔드를 시작하려면 먼저 주니어 웹 프론트엔드 엔지니어가 무엇인지부터 시작해야 합니다.

내 생각에 따르면 프론트엔드 엔지니어를 초급, 중급, 중급, 네 가지 레벨로 나눕니다. 및 고급,

입문 레벨 프론트엔드가 무엇인지 이해하는 것(아직도 프론트엔드가 무엇인지 모르는 사람이 많음), 기본적인 html, css, 자바스크립트 구문을 이해하는 것(이것에 대해서는 많은 것들이 있습니다) 언어 ​​​​온라인에서 검색하면 기본 구문 전체 기술 시스템에서 가장 중요한 것은 최고의 웹 기술 튜토리얼) 호환성을 고려하지 않고 디자이너의 디자인에 따라 페이지를 만들 수 있으며 배웠습니다. 일부 프레임워크(예: 끔찍하지만 여전히 멋진 jQuery, zepto, bootstrap 등)의 사용에 대해 설명합니다.

입문 단계를 거친 후에는 프런트 엔드가 무엇인지 이해하고 기본 구문을 배우고 간단한 페이지를 독립적으로 만들 수 있습니다. 그런 다음 계속해서 학습하여 프런트 엔드 수준에 도달해야 합니다. 주니어 프론트엔드 엔지니어는 프론트엔드 전반에 대한 명확한 이해와 다양한 기술 활용에 능숙해야 합니다.

주니어 프론트 엔드 엔지니어: 가장 먼저 알아야 할 것은 다양한 브라우저의 호환성을 처리하는 방법입니다(예: IE 브라우저에서 createElement의 차이점은 무엇입니까? 이제 기본적으로 모든 회사에서 요구할 것입니다. html5, css3, javascript에 능숙한 사람을 모집할 때, 이 능숙함은 여러분의 손끝에서 그들을 선택할 수 있다는 것을 의미합니다.

다음은 주니어 프론트엔드 엔지니어가 어떤 구체적인 지식을 배워야 하는지에 대해 이야기하고, 그런 다음 다양한 CSS 전처리기와 후처리기를 이해하고, 일반적인 프론트엔드 MV* 프레임워크(angularjs, backbone, Reactjs, etc.) 그리고 이러한 프레임워크의 원리를 알고 있어야 합니다. 또한 nodejs 사용에 능숙해야 하며, 노드 기반의 다양한 프런트엔드 구성 도구(grunt, gulp 등)를 사용할 수 있어야 하며, github 또는 github 사용에 능숙해야 합니다. gitlab을 사용하고 모듈화, 구성 요소화, 엔지니어링 등에 대해 잘 알고 있어야 합니다. 마지막으로 모바일 페이지를 개발하는 방법과 페이지 성능을 최적화하는 방법을 알아야 합니다.

주니어 웹 프론트엔드 엔지니어의 기술 시스템

1.HTML 부분

우선, 공통 태그의 사용법과 다양한 속성을 숙지해야 합니다.

html: 페이지의 루트 요소입니다. head: 모든 head 요소의 컨테이너인 페이지의 head 태그입니다. body: 페이지에 표시되는 콘텐츠가 배치되는 페이지의 기본 태그입니다. 제목: 페이지 제목입니다. 메타: 문서 헤드에 위치하며 키워드, 설명 등 페이지에 대한 메타 정보를 제공합니다. 링크: 문서와 외부 리소스 간의 관계를 정의합니다. 가장 일반적인 용도는 스타일 시트를 도입하는 것입니다. script: script 태그 이 태그에 js 스크립트 코드를 배치하거나 이 태그의 src 속성을 사용하여 외부 태그를 도입할 수 있습니다. 스타일: 스타일 태그, 이 태그에는 CSS 코드를 작성할 수 있습니다. a: 하이퍼링크, href 속성은 링크할 장소를 나타내고, target 속성은 여는 방법을 나타냅니다. img: 이미지 태그, src 속성은 이미지의 위치를 ​​나타냅니다. form: form 요소, 내부 입력, 선택, 텍스트 영역 및 기타 태그는 상대적으로 중요합니다. div: 문서의 파티션이나 섹션을 정의합니다. div를 사용하여 페이지 레이아웃 및 기타 작업을 수행할 수 있습니다. 또한 ul, li, p, 버튼, iframe, p, table 등의 태그도 일반적으로 사용되며 nav, section, article, header, side, footer 등의 의미 태그도 이해해야 합니다.

위 태그를 이해하는 것 외에도 몇 가지 새로운 HTML5 API인

오디오 및 비디오 태그에 대해서도 어느 정도 이해해야 합니다.

캔버스: 차트 및 기타 이미지와 같은 그래픽을 정의합니다.

입력 태그, 이메일, 전화, URL 및 기타 유형의 허용 속성입니다.

getElementByClassName은 클래스 이름을 기반으로 요소 노드를 가져옵니다.

다중 파일 선택 다중 파일 선택 속성.

html 가져오기, 템플릿

프로세스 태그, webGL 및 기타 콘텐츠.

알아야 할 몇 가지 지식 포인트가 있습니다:

1. doctype의 역할. 2. 유니코드, utf8 및 기타 인코딩 간의 원리와 차이점. 3. 페이지 성능을 최적화하는 방법. 4. png, jpg, webp, gif와 같은 이미지 형식의 다양한 장점. 5. HTML 인라인 요소와 블록 수준 요소의 차이점. 6. 모바일 웹 개발에서 일반적으로 사용되는 헤드 태그. 7. 웹 의미론. 8. 브라우저의 캐싱 원리.

2. CSS 부분

CSS에 관해서는 온라인에서 chm 형식의 CSS 참조 매뉴얼을 다운로드한 다음 매뉴얼에 적힌 대로 각각 입력하는 것이 제 생각입니다.

css는 대략 다음과 같은 지식 포인트로 나뉩니다.

1 위치 지정 레이아웃

1. 위치 속성의 7개 값(정적 | 상대 | 절대 | 고정 | 중심 | 페이지 |

2. 글리프 레이아웃 또는 3열 레이아웃을 구현합니다(왼쪽 및 오른쪽 너비는 고정되고 가운데는 화면에 맞게 조정됨).

3. 플로트 및 클리어 플로트 방법, 플렉스 레이아웃, 그리드 레이아웃.

② 박스 모델

1. Margin, padding, border 3가지 속성이 있습니다.

2. 접이식 상자 관련 콘텐츠.

3.다중 열 레이아웃 모듈 다중 열 레이아웃 모델.

3 텍스트 글꼴

1. 강제 줄 바꿈 또는 줄 바꿈 없음, 공백 지우기.

2. 텍스트 정렬, 크기(크롬 글꼴을 12px보다 작게 설정하는 방법), 들여쓰기 및 변환.

3. 단위(em, rem, px 등), 색상(rgb, rgba, hls).

4 변형, 전환 및 애니메이션

1. 변형의 다양한 가치의 역할과 호환성.

2.전환 애니메이션 유형, 베지어 곡선의 원리.

3.애니메이션에 대한 다양한 설정, @keyframes 규칙.

4. 브라우저 다시 그리기 및 리플로우.

⑤ 선택자

1. 선택자의 분류, 가중치 및 우선순위입니다.

2. 상속할 수 있는 속성과 상속할 수 없는 속성은 무엇인가요?

3. 의사 클래스와 의사 요소는 무엇이며 그 기능은 무엇입니까?

위 내용은 모두 기본 사항입니다. 이 외에도 Less, Sass, stylus 등 CSS 전처리기를 이해해야 CSS 개발 효율성이 크게 향상됩니다. .CSS 후처리기.

3. JavaScript 부분

여기서는 js의 기본 지식에 대해 이야기하지 않겠습니다. js를 구문 수준과 사용 수준에 따라 두 부분으로 나누었습니다.

구문 수준에 따르면:

첫 번째는 JavaScript의 객체 지향 측면입니다. 즉, JavaScript에서 캡슐화, 상속 및 다형성을 구현합니다.

① 캡슐화: js에서는 ES6의 const 및 let 기능인 클로저, 범위 및 범위 체인을 통해 캡슐화를 달성할 수 있습니다. ② 상속: 프로토타입 체인 기반 상속, 생성자 기반 상속, 결합 상속, 기생 상속 등, ES6 클래스 키워드인 프로토타입 및 __proto__. ③ 다형성: JavaScript에서 다형성은 인수를 사용하여 구현됩니다. 1. 호출자, 피호출자의 역할 및 기타 인수 방법. 2. 적용 메소드와 호출 메소드의 기능이 다릅니다. 3. Array.prototype.slice.call을 사용하여 배열 객체를 배열로 변환합니다. 4. Shift, Splice, Push, Filter, Map, Reduce, forEach 등과 같은 다양한 배열 방법.

그리고 3가지 팩토리 패턴, 빌더 패턴 등과 같은 JS 디자인 패턴이 있습니다.

마지막으로 이것은 다양한 상황에서 무엇을 의미합니까?

사용 수준에 따라:

첫 번째이자 가장 중요한 것은 ajax, ajax의 원리, ajax의 도메인 간 방법: jsonp, iframe을 사용하는 location.hash, postMessageAPI, websocket, 서버 프록시 등입니다.

그 다음에는 프로토콜 헤더, 상태 코드 및 tcp 프로토콜, udt 프로토콜 및 http 프로토콜의 기타 내용이 있습니다. 브라우저 캐시, 클라이언트 스토리지 콘텐츠: localstorage, sessionstorage, indexDB, 쿠키 등

마지막으로 파일 읽기(fileReader), 가져오기, Promise, 웹 소켓 등과 같은 몇 가지 새로운 js API가 있습니다. caniuse에 가서 어떤 새로운 기능이 있는지 확인할 수 있습니다.

위에서 말한 내용은 단지 몇 가지 일반적인 개념일 뿐입니다. 프론트엔드 HTML, CSS 및 JavaScript에서 숙달해야 할 몇 가지 사항을 나열했습니다. 아직 프론트엔드에서 알아야 할 지식이 많이 있습니다. 모든 사람이 연구하고 작업해야 하는 최종 필드입니다.

학습 과정에서 문제가 발생하거나 학습 자료를 얻고 싶다면 학습 교류 그룹에 가입하실 수 있습니다

위 내용은 웹 프론트엔드를 잘 배우고 싶으신가요? 또 무엇을 마스터해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!