저는 현재 프론트엔드 개발자를 준비하면서 여러 프로젝트를 해봤는데, 그 때마다 어떤 언어와 프레임워크를 써야 하는지 제대로 생각하지 않고 썼던 기억이 납니다. 그래서 오늘은 프론트엔드에서 주로 쓰이는 언어와 프레임워크들을 비교해서 정리해보려고 합니다. 주로 사용하는 언어 HTML, CSS, JavaScript는 웹 개발을 배우기 시작할 때 프론트엔드에서 기초로 배우기도 하고 빠질 수 없는 대표적인 언어 3대장 입니다. 하지만 요즘 채용공고를 보면 JavaScript 뿐만 아니라 TypeScript를 사용해본 경험이 있는 사람을 뽑는 동향이 보입니다. 그렇다면 두 언어의 차이는 과연 무엇일까요? JavaScript vs TypeScript JavaScript는 동적 타입 언어로 타입을 명시적으로 선언하지 ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 11~14의 내용인 벤더 프리픽스, shadow, gradient, transition에 대해 알아보겠습니다. 11. 벤더 프리픽스(Vendor Prefix) CSS3 표준으로 확정되기 이전 or 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 합니다. 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용해야 할 필요가 있습니다. Can I use?에서 브라우저별 CSS 지원 정보를 제공하고 있으니 참고 바랍니다. Prefix Free 사이트에서 라이브러리를 다운로드하고 include 하기만 하면 이 후에는 벤더 프리픽스없이 모든 CSS를 사용할 수 있습니다. ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 8~10의 내용인 position, float, 상속, 캐스캐이딩에 대해 알아보겠습니다. 8. 요소의 위치 정의 (Position) position 프로퍼티 요소의 위치를 정의합니다. top, bottom, left, right 와 함께 사용됩니다. static (기본 위치) position 프로퍼티의 기본 값이며 좌표 프로퍼티는 같이 사용할 수 없습니다. 위 → 아래, 왼쪽 → 오른쪽 순서에 따라 배치됩니다. 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치됩니다. relative (상대 위치) 기본 위치를 기준으로 좌표 프로퍼티를 사용해 위치를 이동시킵니다. static..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 6, 7의 내용인 백그라운드와 폰트 & 텍스트에 대해 알아보겠습니다. 6. Background Background 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의합니다. background-image 프로퍼티 요소에 배경 이미지를 지정합니다. background-repeat 프로퍼티 배경 이미지의 반복을 지정하며 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있습니다. 설정된 이미지의 크기 < 화면의 경우, 자동으로 이미지가 반복 출력되어 화면을 채우게 됩니다. 이는 기본값이 repeat 으로 되어있기 때문입니다. x축으로만 배경 이미지를 반복할 경우에는 repeat-x, y축..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 3~5의 내용인 CSS 프로퍼티 값의 단위와 Box model 그리고 display, visibility, opacity 프로퍼티에 대해 알아보겠습니다. 3. CSS 프로퍼티 값의 단위 CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정합니다. 키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재합니다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none 가 있습니다. 크기 단위 대표적인 크기 단위는 절대값인 px, 상대값인 em, % 입니다. 대부분 브라우저의 폰트 사이즈 기본값은..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. CSS3 lesson 1, 2의 내용인 기본 문법과 셀렉터에 대해 알아보겠습니다. 1. CSS3 Syntax CSS(Cascading Style Sheets)는 HTML과 같은 구조화 된 문서에서 각 요소의 style(design, layout etc)을 정의하여 화면에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어입니다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며, HTML은 CSS를 포함할 수 있지만 HTML 없이 단독으로 존재하는 CSS는 의미가 없습니다. 셀렉터 (Selector, 선택자) 셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단입니다. 위와 같은 구문..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 HTML lesson 7~10의 내용인 목록 및 표 태그, 이미지 및 미디어 지원 태그, 폼 태그, 공간 분할 태그에 대해 알아보겠습니다. 6. HTML5 Tag - List & Table 목록(List) 목록 태그는 내비게이션 메뉴를 만들 때 자주 사용되며, 중첩으로 사용할 수 있습니다. 순서가 없는 목록은 태그를, 순서가 있는 목록은 태그를 사용합니다. type 어트리뷰트로 순서를 나타내는 문자를 지정할 수 있으며 가능한 값으로는 1, A, a, I, i 가 있습니다. start 어트리뷰트로 리스트의 시작값을 지정할 수 있습니다. reversed 어트리뷰트로 리스트의 순서값을 역으로 표현할 수 있습니다. 테이블(Tab..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 HTML lesson 4~6의 내용인 기본 태그, 텍스트 관련 태그, 하이퍼링크에 대해 알아보겠습니다. 3. HTML5 Tag - Basic 웹 페이지를 구성하는 기본 태그는 다음과 같습니다. 문서 형식 정의 태그 (Document Type Definition, DTD) 출력할 웹 페이지의 형식을 브라우저에 전달합니다. 문서의 최상위에 위치해야 하며, 대소문자를 구별하지 않습니다. html 태그 모든 HTML 요소의 부모 요소이며 웹 페이지에 단 하나만 존재합니다. 특히 lang 어트리뷰트를 사용하는 경우가 많습니다. head 태그 메타데이터를 포함하기 위한 요소이며 웹 페이지에 단 하나만 존재합니다. 화면에 표시되지 않..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. HTML lesson 2, 3의 내용인 기본 문법, 시맨틱 요소에 대해 알아보겠습니다. 1. HTML5 Introduction & Syntax HTML5 HTML5(HyperText Markup Language)은 웹 페이지를 기술하기 위한 마크업 언어입니다. 마크업 언어? 태그 등을 이용해 문서나 데이터의 구조를 명기하는 언어 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화 합니다. HTML5 문서는 반드시 으로 시작하며, 과 사이에 기술합니다. 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하고, 브라우저에 표시되지 않습니다..
