프론트엔드 8주 완성 with React : react 강의

1주차 강의

05 웹 이미지 

비트맵(bitmap), 벡터(vector)

비트맵 - Raster(.jpeg, .gif , .png)

:픽셀이 모여 만들어진 정보의 집합, 레스터(Raster)이미지라고도 부름)

-확대/축소시 계단 현상 , 품질저하(찌그러짐)

-정교하고 다양한 색상을 자연스럽게 표현(대부분의 사진)

-수학적으로 계산해서 출력하게되면 용량이 굉장히 커짐

 

벡터 - Vector(.svg)

:점,선,면의 위치(좌표), 색상 등 수학적 정보의 형태(shape)로 이루어진 이미지

-확대/축소에서 자유로움, 용량변화가 없음

-정교한이미지(인물, 풍경 사진같은)를 표현하기 어려움

-단순구조 아이콘, 로고등이 관리하기 용이

 

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

-해상도의 영향에서 자유로움

-CSS, JS로 제어 가능

-파일 및 코드 삽입 가능

 

기호	설명	기호	설명	기호	설명
`	백틱,그레이브	*	Asterisk 에스터리스크 , 별표	?	퀘스천 , 물음표
~	틸드, 물결표시	-	하이픈, 대시, 마이너스	/	슬래시
!	Exclamation mark 엑스클러메이션 , 느낌표	=	이퀄, 동등	|	버티컬바
@	At sign, 앳, 골뱅이	" "	쿠테이션, 큰따옴표	\	백슬래쉬 , 역슬래쉬
#	샵, 넘버, 우물정	' '	어퍼스트로피 작은따옴표	( )	퍼렌서시스 , 소괄호, 괄호
$	달러	:	콜론	{ }	브레이스 , 중괄호
%	퍼센트	;	세미콜론	[ ]	브래킷, 대괄호
^	캐럿, ~이상	,	콤마 , 쉼표	< >	앵글 브래킷, 꺽쇠괄호
&	엠퍼센트 Ampersand	.	피어드, 닷, 점, 마침표

07 오픈소스 라이선스(저작권)

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

Apache License

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

 

MIT License

메사추세츠공과대학에서 소프트웨어 학생들을 위해 개발한 라이센스

개인소스에 이라이센스를 사용하고 있다는 표시만 지켜주면되며 나머지는 사용에대한 제약이 없음

 

BSD License

MIT와 동일

 

Beerware

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

 

chapter 02

프로젝트 :  폴더(디렉토리)단위

컨트롤 h는 모든 해당글자를 바꾸기

 

chapter 03

 01.DocType(DTD)

상대경로 vs 절대 경로

상대경로

./ (생략가능) 주변

../ 상위폴더

 

절대경로

http(https)

/ (//)

 

chapter 04 웹에서 시작하기

03 Emmet

자동완성

단축키

 

chapter 05 html 개요

01 기본문법

03빈태그

<태그>

-편리함

-HTML5

 

<태그 />

-안전함

-엄격함

-XHTML/ HTML5

 

04 .전역속성

data속성

data-이름= 데이터

데이터셋 속성은 data-속성명="속성값" 으로 1개의 데이터셋 속성을 정의합니다.

DOM 속성으로 변환될 때 "data-" 는 제외하고 "속성명"만 셀제 속성 이름으로 사용합니다.

자바스크립트는 DOM 생성 시점에 "data-" 로 시작하는 속성들을 하나로 모아 "dataset" 맵(Map)으로 따로 모아서 관리합니다.

 

데이터셋 속성 추가

HTML 어트립뷰트 추가 메서드를 사용해

엘리먼트노드.setAttribute("속성명", "속성값");

방식으로 노드에 데이터셋 속성을 추가합니다.

추가한 속성은 DOM 노드의 dataset 맵 속성으로 등록되며, HTML 태그 속성으로 추가됩니다.

또는, DOM 프로퍼티 접근 방식으로 엘리먼트노드.dataset.새데이터셋속성이름 = "속성값"; 방법으로도 데이터셋 속성을 추가할 수 있습니다.

 

chapter 07

css개요 01 기본 문법, 주석

07.선택자_가상 요소

ABC::before

가상요소 선택자 : 선택자 ABC 요소의 내부 앞에 내용을 삽입

.box::before{

content:”앞”;

}

<div class=”box”>

Content!

</div>

화면에 출력

앞! Content!

ABC::after

가상요소 선택자 : 선택자 ABC 요소의 내부 뒤에 내용을 삽입

.box::after {

content:”뒤”; < content는 비워두더라도 필수로 들 어가야한다. 안쓰면 동작이 안됨

}

<div class=”box”>

Content!

</div>

화면에 출력

Content!뒤!

 

08 선택자의 속성

<input type=”text”>

<input type=”password”>

<span data-fruit=name=”apple”>사과</span>

 

[ABC]{
	color:red;
}

[type:password]{
	color:red;
}
타입은 인풋에 다있기때문에 모든 input이 바뀌게된다 password or text 등등등 해당 속성 지정 가능

[data-fruit=name] {
	color:red;
}

09스타일 상속

상속되는 css속성들

모두 글자/문자 관련속성들

(모든 글자/문자 속성은 아님 주의!)

font-style

font-weight

font-size

line-height

font-family

color

text-align

09 스타일 상속

height : inherit;

inherit강제 상속 부모요소의 height를 가져옴

10.선택자 우선순위

선언방식 

상속은 점수를 계산하지않는다 점수가 같으면 더마지막에 해석된내용이 우선된다. 점수계산법에 익숙해질것

각각의 점수를 표기

 

 

점수 계산

0 1(태그) 10(클래스) 100점(아이디) 1000점(인라인선언방식) 정도만 계산할수있도록 할것

1번 10 1 10 .list li.item

2번 10 1 10 .list li:hover

3번 10 1 .box::before before이 요소=태그

4번 100 1 #submit span

5번 1 10 10 1

6번 1 h1

7번 10 :not(.box) 부정한 상태로 선택해야한다 가상클래스이지만 점수로 계산하지않고 .box만 계산해서 10점