프론트엔드/기본개념/특수문자 정리

프론트엔드개발

HTML, CSS, JS를 사용해 그래픽 사용자 인터페이스(GUI)로 변환하고
그것으로 사용자와 상호작용할 수 있도록하는 것.

 

 

HTML(Hyper Text Markup Language) : 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당.

CSS(Cascading Style Sheets) : 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적) 스타일을 담당.

JavaScript : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당.

 

 

<웹표준과 브라우저>

웹표준 : 웹표준(Web Standard)이란, '웹에서 사용되는 표준기술이나 규칙'을 의미, W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술.

크로스 브라우징 : 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자경험(같은 화면, 같은 동작 등)을 주 수 있도록 제작하는 기술, 방법 (Ex : 크롬과 엣지에서 동일한 스크립트가 다르게 구동될 수 있는 문제)

뷰포트 : 하나의 웹페이지가 출력(렌더링) 되는 전체 영역

 

<웹이미지>

비트맵 : 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster)라고 부름. 정교하고 다양한 색상을 표현하기 좋음.

- jpg(jpeg) : 손실 압축, 용량이 적음. 

- png : 비손실 압축, 비교적 용량이 큼. Alpha Channel(투명도) 지원.

- gif : 이미지 파일 내 이미지 및 문자열 같은 정보를 저장, 비손실 압축 방식,

        움짤이나 애니메이션에 이용(다양한 색상지원은 되지않음)

-webp : jpg,png,gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷,

           손실/비손실 압축 지원, Alpha Channel 지원, GIF같은 애니메이션 지원.

-svg : 마크업언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷,

        해상도의 영향에서 자유롭고 CSS와 JS로 제어가능.

벡터 : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)으로 이루어진 이미지. 정교한 이미지(인물,풍경)를 표현하기 어려우나 확대/축소에서 자유롭고 용량변화가 없음.

 

<특수문자 용어> 특수문자의 영어/한글 이름과 키보드 위치

` : 백틱(Backtick), 그레이브(Grave) : 숫자 1 왼쪽 키보드

~ : 틸드(Tilde), 물결표시

! : 엑스클러메이션(Exclamation mark), 느낌표

@ : 앳(At sign), 골뱅이

# : 샵(sharp), 넘버(Number sign), 우물정

$ : 달러(Dollar sign)

% : 퍼센트(percent sign)

^ : 캐럿(Caret)

& : 엠퍼센드(Ampersand)

* : 에스터리스크(Asterisk), 별표

- : 하이픈(Hyphen), 대시(Dash), 마이너스

_ : 언더스코어(Underscore), 로대시(Low dash), 밑줄

= : 이퀄(Equals sign)

" : 쿼테이션(Quotation mark), 큰따옴표

' : 아포스트로피(Apostrophe), 작은따옴표

: 콜론(Colon)

; 세미콜론(Semicolon)

, : 콤마(Comma), 쉼표

. : 피리어드(Period), 닷(dot), 점, 마침표

? : 퀘스천(Question mark), 물음표

/ : 슬래시(Slash)

| : 버티컬바(Vertical bar)

＼: 백슬래시(Backslash), 역슬래시

( ) : 퍼렌서시스(Parenthesis), 소괄호, 괄호

{ } : 브레이스(Brace), 중괄호

[ ] : 브래킷(Bracket), 대괄호

< > : 앵글 브래킷(Angle Bracket), 꺽쇠갈호

 

<오픈소스 라이선스> - 무료로 이용가능한,

오픈소스 : 어떤제품을 개발하는 과정에서 필요한 소스코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것

라이선스 : 저작권

1) Apache License

: 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스

  개인적/상업적 이용, 배포, 수정, 특허신청이 가능.

2) MIT License

: MIT에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고있다는 표시만 지켜주면 되며 나머지 사용에 대한 제약은 없음.

3) BSD License

: BSD에서 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고있다는 표시만 지켜주면 되며 나머지 사용에 대한 제약은 없음.

4) Beerware

: 오픈소스 개발자를 만나는 경우 맥주를 사줘야하는 라이선스.(사실상 무료)