프론트엔드 기초1 (개념)[운동하는IT]

찐 코린이라 프론트에 대해 자세힌 알지 못하지만 기본적인 것을 정리했습니다 ㅎㅎ

 

간단한 개념정리

 

html, css, js,를 사용해 데이터를 그래픽 사용자 인터페이스(gui)로 변환하고 그것을 사용자와 상호 작용하도록 하는 것
UX/UI  (User Experience/User Interfaces)
UX란? 사용자 경험의 핵심은 "느낌, 태도, 행동"
UI는 인터페이스, 즉 정보기기나 소프트웨어의 화면 등 사람과 접하는 면을 말한다. 반면 UX는 경험이다.
사용자에 앞에 보이는 페이지를 만드는 것 앞단

핵심 정보들은 백엔드(뒷단)

html(hyper text markup language)
페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 

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

js(javascript)
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리 담당


서버에 업로드하여 사용자가 볼 수 있도록 한다. 웹앱 즉 웹사이트





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

W3C의 표준화 제정 단계는 크데 다음과 같이 4가지 단계를 가집니다.
초안(Working draft, WD)
후보권고안(Candidate Recommendation, CR)
제안권고안(Proposed Recommendation, PR)
권고안(W3C Recommendation,REC )


브라우저 공급업체도 W3C 표준에 따른다.
각각 브라우저 마다 다르기 때문에  동일하게 동작 하고
제작하는 기술 크로스 브라우징이 필요함 단 요즘 다들 동일하게 하기 때문에
크로스 브라우징이 없어지는 추세


브라우저 창(윈도우)

브라우저 탭

브라우저 주소창

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




웹에서 사용할 수 이미지
1) 비트맵: 픽셀이 모여 만들어진다
정교하고 다양한 색상을 자연스럽게 표현
확대 축소 시 계단 현상, 품질 저하.
jpg, png, 인물, 풍경 같은 거

jpg(joint photographic coding experts group)dms 풀컬러와 그레이스케일의
압축을 위해 만들어 졌으며 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용
손실압축(손실되며 압축됨) 용량이 확 줄어든다. 여러번 압축하면 이미지 색상이 않좋아짐
표현 색상도(24비트, 약 1600만 색상)가 뛰어남
이미지 품질과 용량을 쉽게 조절 가능
가장 널리 쓰이는 이미지 포맷

png(portable nerwork graphics)는 gif의 대체 포맷으로 개발됨
비손실 압축 용량이 비교적 크다
8비트 (256색상)/ 24비트(약 1600만 색상) 컬러 이미지 처리
alpha channel지원 (투명도)
W3C권장 포맷

gif(graphics interchange format)는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
비손실 압축
여러장의 이미지를 한 개의 파일에 담을 수 있음
(움짤, 애니메이션)
8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

Webp
jpg, png, gif,를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
완벽한 손실/비손실 압축지원
gif 같은 애니메이션 지원
alpha channel 지원(손실, 비손실 모두)
최근에 나와서 하위호환성을 꼭 확인해야함



2) 벡터 : 점, 선, 면의 위치로 만든다
확대 축소에서 자유로움, 용량변화가 없음
정교한 이미지를 표현하기 어려움 
svg 등 단순 구조의 아이콘, 
material design(머터리얼 디자인)은 고품질 디지털 경험을 
구축하 수 있도록 구글에서 만든 디자인 시스템 방식

svg(scalable vector graphics)는 마크업 언어(html/xml) 
기반의 벡터 그래픽을 표현하는 포맷
해상도의 영향에서 자유로움
css와 js로 제어가능
파일 및 코드 삽입 가능



특수 문자 용어
그레이브, 백틱 = `
틸드, 물결표시 = ~
엑스클러메이션, 느낌표 = !
앳, 골뱅이, 앳 사인 = @
샵, 넘버사인, 우물정자 = #
달러 사인 = $
퍼센트 사인 = %
캐럿 = ^
앰퍼센드 = &
에스터리스크, 별표시 = *
하이픈, 대시, 마이너스 = -    
언더스코어, 로우대시, 밑줄 = _
이퀄 사인 = =
쿼데이션, 큰 다운표 = "
작은 다운표 아포스트로피 = '
콜론 = :
세미콜론 = ;
피리어드, 닷, 점, 마침표 = .
퀘스천, 물음표 = ?
슬래시 = /
버티컬 바 = |
백슬래시, 역슬래시 = \
페렌서시스, 소괄호, 괄호 = ()
브레이스 중괄호 = {}
브래킷 대괄호 = []
앵클브래킷, 꺽쇠괄호 = <>



오픈 소스 라이선스(저작권이 붙어있다.)
오픈소스란 어쩐 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 
누구나 접근해서 열람할 수 있도록 공개하는 것
인터넷에 열려있는 소스지만 저작권이 있는 것도 있다.
일반 개인이 사용하 수 있느냐 상업적 이용이 가능하냐 확인할 것


무료인 오픈소스 라이선스들
1) apache license
아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스
개인적/ 상업적 이용 배포 수정 특허 신청이 가능

2) mit license
매사추세츠공과대학에서 소프트웨어 학생들을 위해 개발한 라이선스
개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며
나머지 사용에 대한 제약은 없음

3) bsd license
bsd(berkeley software distribution) 버클리 캘리포니아 대학에서 개발한 라이선스
mit와 동일한 조건

4) beerware
오픈소스 개발자에게 맥주를 사줘야 하는 라이선스
물론 만날 수 있는 경우