프런트엔드 개발자
애플리케이션을 사용하는 사람인 유저(User)가 애플리케이션과 소통하기 위한 창구 (User Interface)를 사용하기 좋게 구현한다.
프런트엔드 개발에 필요한 기술
HTML - tags & attributes, Semantic web
CSS - Layout(float, flex, grid), transition / animation, 반응형 웹, Preprocessor(Sass, PostCSS), CSS방법론, CSS프레임워크
Javascript
Node.js (백엔드에서 크게 다루는 기술이지만, 백엔드 사이드와 소통하기 위해서 어느정도 이해할 필요가 있음)
HTTP
Tools (Git, Webpack, Babel, ESLint, nom …)
Library / Framework (Angular, React, Vue.js), Typescript, JQuery …
알고리즘 / 자료구조
preprocessor (CSS 전처리기)
CSS 전처리기는 모듈별로 특별한 Syntac를 이용하여 방대해지는 CSS문서의 양을 효율적으로 관리해주는 통합적인 단어를 말한다.
CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 컴파일러를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환된다.
CSS방법론 - (SMACSS, BEM, OOCSS)
*CSS프레임워크 - (Bootstrap, Pure, Bulma, skeleton … )
HTML5
HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다.
내용과 구조를 담당하는 언어로서 HTML 태그를 통해 정보를 구조화 한다.
HTML5 문서는 반드시 로 시작하며 실제적인 HTML document는 2행부터 시작되는데 html 사이에 기술한다.
head 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 사이에 있는 정보들은 브라우저에 표시되지 않는다. = (웹 사용자에게 보이지 않는 내용이다.)
웹 브라우저 출력되는 모든 요소는 body 사이에 위치한다.
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>Hello World</title>
</head>
<body>
<h1>Hello world</h1>
<p>안녕하세요! HTML5</p>
</body>
</html>
Html 문서는 .html 확장자를 갖는 텍스트 파일이다.
따라서 메모장으로도 편집할 수 있지만, 일반적으로는 다양한 편의기능을 제공하는 에디터 또는 IDE(Integrated Development Enviroment)를 사용하는 것이 일반적이다.
HTML5의 기본 문법
- 요소 (Element)
HTML 요소는 시작태그와 종료태그 그리고 태그 사이에 위치한 내용으로 구성된다.
<p>Hello</p>
<p> = 시작태그 (start tag)
Hello = 내용 (contents)
</p> = 종료태그 (end tag)*태그는 대소문자를 구별하지 않으나, W3C(World Wide Web Consortium) 에서는 HTML4의 경우 소문자를 추천하고 있으므로 HTML5에서도 소문자를 사용하는 것이 일반적이다.
- 요소의 중첩 (Nested Element)
요소는 중첩될 수 있다. 즉 요소는 다른 요소를 포함할 수 있다. 이때 부자관계가 성립되다. 이러한 부자관계로 정보를 구조화하는 것이다.
중첩 관계 (부자 관계)를 시각적으로 파악하기 쉽게 indent(들여쓰기)를 활용한다.
보기좋은 코드는 읽기 쉬우며 읽기 쉬운 코드는 좋은 코드이다.
- 빈 요소 (Empty Element)
내용(content)를 가질 수 없는 요소를 빈 요소라 한다.
<meta charset=“utf-8”>와 같이 어트리뷰트(attribute)만을 가질 수 있다.
빈 요소 중 대표적인 요소는 아래와 같다.
<br>
<hr>
<img>
<input>
<link>
<meta>- 어트리뷰트 (attribute)
속성(attribute)란 요소의 성질, 특징을 정의한다. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰는 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)을 제공한다. 어트리뷰는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.
- 글로벌 어트리뷰트
글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다. 몇몇 요소에는 효과가 적용되지 않을 수 있지만, 글로벌 어트리뷰트는 대체로 모든 요소에 사용될 수 있다.
Id - 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다.
Class - 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
Hidden - css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
Lang - 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
Style - 요소에 인라인 스타일을 지정한다.
Tabindex - 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
Title - 요소에 관한 제목을 지정한다.
- 주석 (Comments)
주석(comments)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.
