프론트 엔드 웹 개발
Front-end web development| 시리즈의 일부 |
| 소프트웨어 개발 |
|---|
프런트 엔드 Web 개발은 HTML, CSS 및 JavaScript를 사용하여 사용자가 해당 웹 사이트를 보고 상호 작용할 수 있도록 웹 사이트의 [1][2][3][4]그래피컬 사용자 인터페이스를 개발하는 것입니다.
프런트 엔드 개발에 사용되는 도구
WordPress, Joomla, Drupal 등 웹 사이트의 [5]프런트 엔드를 개발하는 데 사용할 수 있는 여러 도구와 플랫폼이 있습니다.
하이퍼텍스트 마크업 언어
HyperText Markup Language(HTML)는 웹 페이지가 존재하지 않는 웹 사이트 개발 프로세스의 중추입니다.하이퍼텍스트는 하이퍼링크라고 하는 링크가 텍스트에 포함되어 있는 것을 의미합니다.사용자가 하이퍼링크가 있는 단어 또는 구문을 클릭하면 다른 웹 페이지가 나타납니다.마크업 언어는 텍스트가 이미지, 테이블, 링크 및 기타 표현으로 변환될 수 있음을 나타냅니다.사이트의 전체적인 틀을 제공하는 것은 HTML 코드입니다.HTML은 Tim Berners-Lee에 의해 개발되었다.HTML의 최신 버전은 HTML5라고 불리며 W3C의 권고에 따라 2014년 10월 28일에 출판되었습니다.이 버전에는 비디오 및 오디오 파일 등의 요소를 효율적으로 처리하는 새롭고 효율적인 방법이 포함되어 있습니다.
캐스케이드 스타일시트(CSS)
CSS(Cascading Style Sheets)는 사이트의 프레젠테이션 측면을 제어하여 사이트 고유의 외관을 갖도록 합니다.이는 다른 스타일 규칙 위에 위치하는 스타일 시트를 유지하며 장치 화면 크기 및 해상도 등 다른 입력에 따라 트리거됩니다.CSS는 외부, 내부 또는 HTML [6]태그에 추가할 수 있습니다.
자바스크립트
JavaScript는 (HTML의 선언적 언어 모델과 대조적으로) 정적 HTML 페이지를 동적 인터페이스로 변환하는 데 사용되는 이벤트 기반 필수 프로그래밍 언어입니다.JavaScript 코드는 HTML 표준에서 제공하는 문서 객체 모델(DOM)을 사용하여 사용자 입력과 같은 이벤트에 대한 응답으로 웹 페이지를 조작할 수 있습니다.
JavaScript 코드는 AJAX라고 불리는 기술을 사용하여 웹에서 콘텐츠를 능동적으로 가져올 수 있으며(원래 HTML 페이지 검색과는 별개로), 서버측 이벤트에도 반응하여 웹 페이지 익스피리언스에 진정한 동적 특성을 추가합니다.
웹 어셈블리
Web Assembly는 모든 주요 브라우저(Google, Apple, Mozilla 및 Microsoft 등)에서 지원되며 웹 브라우저에서 코드를 실행하기 위한 JavaScript의 유일한 대안입니다(플래시, Java 또는 Silverlight 등의 플러그인의 도움 없이 브라우저가 플러그인 지원을 중단함).채택 전에는 asm.js(JavaScript의 서브셋이며, 따라서 모든 브라우저에서 엄밀하게 동작한다)가 있었습니다.또한 Internet Explorer 11과 같은 브라우저에서 효율적으로 지원하는 컴파일러 대상으로도 사용됩니다.WebAssembly를 직접 지원하지 않는 브라우저에서는 asm.js로 컴파일할 수 있고, 지원되는 브라우저에서도 사용할 수 있습니다.일반적으로 프로그래머는 Web Assembly(또는 asm.js)에서 직접 프로그래밍하지 않고 Rust, C, C++ 등의 언어 또는 이론상 컴파일된 언어를 사용합니다.
개발 목표
프런트 엔드의 개발자는 이러한 점을 염두에 두고 이용 가능한 툴과 기술을 활용하여 [5]이 목적을 달성합니다.
접근성
스마트폰이나 태블릿과 같은 모바일 디바이스의 개발이 계속됨에 따라 디자이너는 모든 디바이스의 브라우저에서 자신의 사이트가 올바르게 표시되도록 해야 합니다.이를 위해서는 CSS에서 스타일시트를 사용하여 응답성이 뛰어난 웹 설계를 작성합니다.
성능
퍼포먼스 목표는 주로 렌더링 시간과 관련이 있으며 HTML, CSS 및 JavaScript를 조작하여 사이트를 빠르게 엽니다.
신속한 개발
이 기술은 빠른 개발을 가능하게 하고 시간을 절약합니다.
레퍼런스
- ^ MDN (2020-05-02). "Front-end web developer". Mozilla Developer. Retrieved 2022-07-04.
- ^ Refsnes Data (1999-07-04). "Web Development Roadmaps". w3schools. Retrieved 2022-07-04.
- ^ Refsnes Data (1999-07-04). "How To Become a Front-End Developer". w3schools. Retrieved 2022-07-04.
- ^ Refsnes Data (1999-07-04). "Front end development". w3schools. Retrieved 2022-07-04.
- ^ a b Codesido, Ivan (28 September 2009). "What is front-end development?". Theguardian.com. Retrieved 17 January 2019.
- ^ Abed, Sudad (2019). "Inserting CSS" (PDF).
