프론트엔드 개발
-> HTML,CSS,JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것.
즉, HTML,CSS,JS를 사용해서 웹페이지를 만들어서 그 페이지를 사용자에게 보여주는 것 그리고 사용자가 그 보여지는 페이지를 실제로 사용하는 것 그런 과정을 만드는 것이 바로 프론트엔드 개발입니다.
프론트,백엔드
프론트엔드는 사용자의 앞에 보이는 그 웹사이트를 말하는 것이며, 이 웹사이트라는 것을 프론트엔드 개발자만으로는 구현하기 힘들기때문에 실제로 보안을 요구하는 데이터들이나 기타 비즈니스 로직 같은 사이트가 동작하기 위해서 굉장히 핵심적인 여러 가지 정보들은 백엔드 개발자가 구현합니다.
비즈니스 로직=> 웹 사이트가 동작하는데 필요한, 핵심 데이터 처리를 수행하는 알고리즘 등을 말합니다.
둘다 하는 것을 풀스택 개발이라고 합니다.
프론트엔드 줄기
우리가 프론트엔드 개밟에서 사용할 수 있는 큰 줄기에는 세 가지가 있습니다.
HTML,CSS,JS입니다.
기본적으로 웹 브라우저, 즉 우리가 볼 수 있는 웹사이트에서 동작할 수 있는 언어는 HTML,CSS,JS밖에 없습니다.
HTML,CSS,JavaScript의 역할
HTML(Hyper Text Markup Language)
- 페이지의 제목,문단,표,이미지,동영상 등 웹의 구조를 담당.
- 기획자
하이퍼 텍스트는 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근할 수 있는 텍스트를 말합니다.
CSS(Cascading Style Sheets)
- 실제 화면에 표시되는 방법
- 색상,크기,폰트,레이아웃등을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당.
- 디자이너
JavaScript
- 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당
- 개발자
즉, HTML을 통해 구조를 만들고, 그 구조를 CSS를 통해서 정적으로 꾸며주는 역할(스타일)을 진행하고 그것을 JS를 통해 동적으로 만드는 일을 수행한다.
오픈 소스 라이선스
오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를, 누구나 접근해서 열람할 수 있도록 공개하는 것 입니다.
Apache License
아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스, 개인적/상업적 이용,배포,수정,특허 신청이 가능
MIN License
MIT에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다고 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음.
상대경로 / 절대 경로
./ ../ => 상대경로
주변에서 찾아 사용, ../는 주변에서 찾지않고 상위(상위폴더)로 올라가서 찾게 됩니다.
http / => 절대 경로
/는 최상위 경로, 루트 경로라고도 합니다.
글자와 상자
요소가 화면에 출력되는 특성, 크게 2가지로 구분
인라인(inline) 요소 : 글자를 만들기 위한 요소들
-
span : 대표적인 인라인요소 / 콘텐츠 영역을 설정하는 용도, 기본적으로 왼쪽에서 오른쪽으로 수평으로 쌓인다.
-
인라인요소는 포함한 콘텐츠의 크기만큼 자동으로 줄어듭니다.
-
인라인요소는 가로세로 크기를 지정할 수 없습니다.
-
인라인요소는 자식요소로 블록요소를 지정할 수 없습니다.
블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들.
-
div : 대표적인 블록요소 / 본질적으로 아무것도 나타내지 않는, 단순하게 콘텐츠 영역을 설정하는 용도.
-
블록요소는 기본적으로 위에서 아래로 수직으로 쌓인다.
-
부모 요소의 크기만큼 자동으로 늘어납니다.
-
포함한 콘텐츠 크기만큼 자동으로 줄어듭니다.
-
블록요소는 가로세로 크기를 지정할 수 있습니다.
-
블록요소는 자식으로 블록요소나 인라인요소를 넣을 수 있습니다.
