• 회사를 경영하며 발생하는 정보를 기반하여 생성된 기술과 규칙,프로세스 등을 말함.

• 현재 세계 기업 경영은 고객 데이터를 활용한 플랫폼 기업 중심으로 흐름.

비즈니스를 위한 웹 플랫폼 제작을 위한 방법들

1. CMS : 워드프레스, 줌라 등 이미 완성된 시스템을 기반으로 플랫폼을 구축하는 형태

2. 직접 개발 : 라이브러리 등을 활용하여 기획, 설계, 구현의 전체 과정을 진행하여 오리지널 시스템을 구축하는 형태

3. 프레임워크를 통한 개발 : 기획, 설계, 구현의 전체 과정을 진행하지만 이미 구비된 프레임워크를 통해 빠르게 구축하며, 인적자원을 시스템화할 수 있도록 되어있는 형태. 대부분의 기업체, 기관들이 많이 사용.

린 스타트업 이론 기초

• 린 경영의 3대 원칙 : 리서치 중심 / 고객 중심 / 학문적 접근

  1. 최초의 사업계획, 즉 플랜A를 문서화하라
     2. 사업계획에서 가장 위험한 부분을 식별하라
     3. 사업계획을 체계적으로 검증하라

린 캔버스

1. 문제

• 가치, 솔루션, 핵심지표의 시작 지점.
• 고객군이 해결해야 할 1~3가지 핵심 문제 정리.
• 고객 관점에서 생각하기.
• 기존 대안들 나열. => 해당 문제를 고객들은 어떻게 처리하는지 알아야 함. => 새로운 서비스의 방향 잡기.
• 가능성 있는 얼리어답터를 타겟팅.

2. 고객군

• 목표 고객군 별 특징을 구체적으로 설정

3. 가치

• UVP (Unique Value Proposition)는 제품이 가진 차별점은 무엇이며, 구입할 가치가 있는 이유를 의미.
• 핵심가치는 홍보용 랜딩페이지의 헤드라인에 포함될 몇 개의 단어로 정리해야 함.
• 어차피 스타트업이 만든 제품은 시장에 처음 나온 것이므로 얼리어답터를 타겟해야 함.
• 고유의 가치 제안
  1. 차별화하라, 그리고 차별화 포인트가 중요한지 확인하라
  2. 얼리어답터를 목표로 삼아라
  3. 제품을 사용했을 때의 혜택에 집중하라 (권위 x, 고객 중심)
  4. 단어를 주의 깊게 선택하라 (키워드 잡기)
  5. '무엇, 누구, 왜'에 답하라
  6. 다른 훌륭한 uvp들을 연구하라
  7. 호소력 있는 선전문구를 만들어라

4. 솔루션

• 해당 문제에 대한 자신만의 해결방식
• 다른 요소들의 완성 이후에 솔루션에 대해 언급할 것
• 고객의 상황과 생각에 관계 없이 제안하려는 것 => solution이 아닌 problem으로 인식될 수 있음

전략 캔버스 작성

인바운드 채널

• 인바운드 채널 : 블로그 (기업 블로그, 기술 블로그), 검색엔진최적화 (SEO), 전자책, 백서, 웹세미나 (=웨비나)

  아웃바운드 채널

• 아웃바운드 채널 : 검색엔진마케팅 (키워드 광고, 브랜드 검색 광고), 인쇄물/TV 광고, 전시회/박람회, 판촉전화 (콜드콜) => 인스타포스팅처럼 차세대 디지털 인쇄물 (soft copy) 등 등장

직접 판매와 자동화된 판매

• 초반에 스타트업은 데이터를 확보하기 위해 직접 판매를 통해 학습해야 함
• 이후 IT 플랫폼, 검색 엔진 플랫폼과 협업하여 판매 자동화 고려
• 창업 초기, 패시브 인컴을 통한 유입 현금 흐름 -> 기초적인 자본 압박에서 자유롭게 함

린 캔버스 안에서의 위험도 이해

1. 제품 위험 (p) : 제대로 된 제품을 만드는 것

• 문제, 솔루션, 가치 제안, 핵심지표 요소와 연관

2. 고객 위험 (c) : 고객에게 도달하는 경로를 구축하는 것

• 채널, 고객군 요소와 연관

3. 시장 위험 (m) : 존속할 수 있는 사업을 구축하는 것

• 경쟁우위, 비용구조, 수익원 요소와 연관

사업 모델 순위의 가중치 순서

1. 고객 불편 수준 (문제) : 제품이 가장 필요할 것으로 생각하는 고객순 나열.
2. 접근 용이성 (채널)
3. 가격/수익 (수익원 / 비용 구조) : 수익을 극대화할 수 있는 고객군.
4. 시장 규모 (고객군) : 시장 규모가 충분히 큰 고객군.
5. 실현 가능성 (솔루션) : 구현 가능성, 고객에게 제공할 최소 기능 포함 여부 확인.

고객 인터뷰

초기엔 설문 조사나 포커스 그룹 인터뷰가 아닌, 시장 최전선에서 고객 인터뷰를 진행할 것.

• 설문 조사는 물어야 할 질문을 이미 안다고 가정. but 최초 기획에서는 상상도 못한 대답을 하는 경우가 많음.
• 최고의 초기 학습은 개방형 질문에서 얻을 수 있음.

  중요 포인트

1. 제품 설명이 아닌 학습을 중심으로 대화의 틀을 잡음.

• 고객을 학습/연구 대상으로 삼아 빠르게 변화하는 시장 needs와 wants의 흐름을 파악.

2. 고객에게 무엇을 원하는지 묻지 말고 행동만을 살펴 볼 것.

• 환불을 보증하고, 제품 선지불이나 부분 지불을 권해볼 것.
• 환불보증부로 서비스를 진행하면, 초기 현금 흐름에도 도움을 줌.
• 이를 통한 3개월 이상의 매출 트래픽 -> 신용보증재단 등에서 저리 사업자 대출도 가능.

3. 다양한 가망 고객을 만나는 것이 좋음.

• 가능하면 대면 인터뷰.
• 아는 사람부터 시작하여 가지치기.
• 인터뷰 참가비는 X
• 인터뷰에 다른 사람과 동반 (객관성 확보, 시간 관리)
• 인터뷰 직후 결과를 문서화할 것.
• 인터뷰 일정 관리를 위해서 오후 시간을 비우거나 이메일로 인터뷰 요청을 위한 문장으 미리 만들어 놓음.

프로그램 개발의 프로세스

유즈 케이스 작성

• 고객의 요구사항 분석을 통해 유즈 케이스를 추출해내고 이것을 소프트웨어 설계에 활용.
• 시나리오를 작성해서 필요한 기능을 뽑아 냄.

서버 기반 언어 기초 : 플랫폼 개발 언어에 대한 이해

• 컴퓨터는 클라이언트(서비스를 받음)와 서버(서비스를 줌)로 나뉨.

• 웹 프로그래밍은 데이터를 입력받고 고객을 접하는 프론트 엔드와 데이터를 처리하고 저장하며 기능을 처리하는 백 엔드로 구분.

php

• hypertext processor PHP

• 동적 웹 페이지를 만들기 위해 설계되었으며, 이를 구현하기 위해 php로 작성된 코드를 html 소스 문서 안에 넣으면 php 처리 기능이 있는 웹 서버에서 해당 코드를 인식하여 작성자가 원하는 웹 페이지를 생성.

• 동적 웹 페이지 : 데이터에 의해 플랫폼의 특정 영역 내용이 지속적으로 변경되는 웹 페이지를 의미.

php 모듈 개발과 관련된 개념 요소들

• 데이터 (리터럴)
• 변수 (일반변수 [지역 변수, 글로벌 변수], 세션 변수)
• 상수
• 배열 / 연관 배열
• 함수 / 사용자 정의 함수
• 클래스와 객체

1. 리터럴 (데이터)

• 문자 리터럴 / 숫자 리터럴
• 문자 리터럴 : 문자 데이터를 다루며 연산 기능은 없음.
• 숫자 리터럴 : 4칙 연산, 논리 연산 등 다양한 연산 기능은 없음.
• 리터럴은 변수에 저장할 수 있음.

2. 변수

• 변수 : 데이터를 저장하기 위해 개발자와 언어엔진에 의해 이름을 할당 받은 메모리 공간을 의미.
• 변수는 새로운 값에 의해 기존 데이터를 overwrite 가능.
• 지역 변수는 반복문 등의 안쪽에서 선언, 반복문 종료시 사라짐.

• $변수명
  
  

3. 세션 변수

• 세션은 모든 정보가 사용자 측의 컴퓨터에 저장되는 쿠키와 달리 웹 서버에 정보를 저장하고 사용자 측에는 접근할 수 있는 키 값을 저장한다.

• 과거에는 쿠키 때문에 해킹 당하는 경우가 있었으며, 세션은 서버네 저장하기에 비용 증가로 잘 안 썼음. 지금은 클라우드 등 자원들의 비용이 저렴해져서 주로 세션만 사용.

• 웹 서버에 데이터가 저장되고 필요할 때마다 브라우저에서 키 값으로 서버에 요청. 브라우저를 종료하는 시점에서 세션이 삭제가 되도록 설정 가능.

• ``` session_start() 함수로 시작

• 세션 변수는 페이지 간 이동을 해도 변수 값이 사라지지 않음.

4. 상수

• 변하지 않는 고정값.

• define("X", "Hello World!");
  
  

5. 배열

• 배열 : map으로 이루어진 순서가 있는 집합. map은 한 쌍의 key, value로 이루어짐.
• ``` $arr[0] = "apple"; $arr[1] = "banana";

• $arr = array("apple", "banana");
  

6. 연관 배열

• 숫자뿐만 아니라 문자열까지도 배열 요소의 인덱스로 사용할 수 있음.
• 만약, 정수와 문자열 외의 다른 타입의 값을 키 값으로 사용하면, 내부적으로 정수와 문자열로 타입 변환이 이루어짐.
• ``` $arr["banana"] = 2000;

• $arr = array("apple" => 1000, "banana" => 2000);
  

7. 클래스와 객체

• 객체에 대한 설계도
  • 객체 : 런타임 위에서 작동되는 기능 + 저장 능력
• 클래스 이름은 PSR에 따라 대문자로 시작하고, 단어 간의 연결마다 대문자를 사용하는 StudlyCaps 형식을 따름. (= Pascal Case)
• 클래스는 object를 중심으로 특정 역할을 하는 타입을 말함.
• 내부적으로는 멤버변수와 메소드를 가질 수 있음.
• 클래스 타입의 변수를 인스턴스라고 부름.
• 멤버 변수 = 속성 = 프로퍼티
• 메소드 = 클래스 안에서 정의된 함수

상속과 트레이트

• 상속 : 이미 만들어져 있는 상위의 클래스로부터 코드를 물려받는 것을 의미 -> 자식 클래스명 extends 부모 클래스명
• 트레이트 : 인터페이스와 같은 기능. 수직 상속은 하나만 가능하므로, 수평 상속을 통해 코드 재사용성 극대화. -> trait SayMorning{;}

   -> `Class Guest extends User{

  use SayMorning;}`

  접근 제한자

  1) public : 모든 접근 허용 2) protected : 같은 폴더에 있는 객체와 상속관계의 객체들만 허용 3) private : 현재 객체 내에서만 허용

php 내장 함수

• 컴퓨터 언어는 설치시 자동으로 설치되는 내장함수와 추가적인 설치를 해야 하는 외장함수가 있음.

• 보통 외장함수의 경우 라이브러리라고 호칭함.

• explode() => split() 메서드 in python
  $string = "사과,귤,감,밤";
  $array = explode(',',$string);

• implode() => join() 메서드 in python
  
  

• print_r() => 배열 구조 출력

• require() => 외장 데이터 사용 가능

• checkdate() => 날짜가 유효한 양력 날짜인지 판단

• nl2br() => enter를 br 태그로 자동 변환

• id_dir() => 해당 디렉토리가 존재하는지 알려주는 정보 함수

• mkdir() => 디렉토리를 만들어주는 함수

• header() => 브라우저의 주소창 로케이션 내용을 설정

• isset($_POST["name"]) => name에 데이터가 존재하면 true
  
  
  
  

사용자 정의 함수

• function print_copyright() {
  print "<FONT size = 2>";
  print "Copyright 2022 Danha All rights reserved.";
  print "</FONT>";}
  

데이터 전달 과정

1) post

• 페이지 단위로 큰 데이터 전달할 때 사용.

2) get

• url을 활용해서 데이터 전달.
• 검색 엔진이나 저장된 데이터베이스에서 원하는 데이터를 찾고자 할 때 사용.
• 데이터 전달에 제한이 있음.
• 보안 취약.

관계형 데이터베이스의 특징

• DB를 구성하는 개체(entity)나 관계(relationship) 모두를 relation이라는 표로 표현.
• 장점 : 간결하고 보기 편리함. 다른 DB로 변환이 용이. 대부분의 메이저 데이터베이스 제품군이 관계형 데이터베이스.
• 단점 : 성능이 다소 떨어짐.

데이터베이스 테이블 구성 요소

1) 기본키

• 후보키 중에서 선택한 주키 (main key)
• 모든 사용자가 unique하게 가지고 있는 속성
• null 값을 가질 수 없음.
• 외래키 : 다른 릴레이견의 기본키를 참조하는 속성. 외래키를 통해 테이블 간 연결이 가능.

2) 테이블(릴레이션) = 개체

3) 열 = 속성

• 데이터베이스를 구성하는 가장 작은 논리적 단위.
• 파일 구조 상의 데이터 항목 또는 데이터 필드에 해당.
• 변수에 비유 가능

4) 행 = 튜플 = 레코드

• 한 사람의 데이터는 행 단위로 저장되므로 하나의 데이터는 결국 튜플.
• 속성의 모임으로 구성. 여러 셀이 모여 튜플을 구성.

PHP 범용 DB 접속 개체 PDO

PDO (PHP Data Object) : 여러 데이터베이스를 제어하는 방법을 표준화한 것

• DB 종류에 따라 다른 드라이브, 드라이브 종류에 따라 다른 API를 사용했지만 PDO로는 같은 방법으로 범용 가능

• MySQLi는 MySQL DB에서만 작동.

• PDO도 MySQLi와 마찬가지로 Prepared Statement 지원. Prepared Statement : 자주 사용되는 SQL을 DB가 이해하기 쉬운 형태로 해석해놓은 것. 일종의 템플릿 형식. 효율성 면에서 좋고, SQLInjection에 강함.

• %s : string
• %c : a single character
• %d : integer
• %f : floating - point

  New Style String Formating

  str.format()

• > : 오른쪽 정렬
• < : 왼쪽 정렬
• ^ : 가운데 정렬

  print("He paid {0:>10} dollars.".format(10)) 
  print("He paid {0:>10} dollars.".format(100)) 
  print("He paid {0:>10} dollars.".format(1000)) 
  print("He paid {0:>10} dollars.".format(10000))
  

He paid 10 dollars. He paid 100 dollars. He paid 1000 dollars. He paid 10000 dollars.

- 기호 삽입

print("He paid {0:.<10} dollars.".format(10)) print("He paid {0:.<10} dollars.".format(100)) print("He paid {0:.<10} dollars.".format(1000)) print("He paid {0:.<10} dollars.".format(10000))

- 소수점 자릿수 
   - 정수 표현 : 0Nd
   - 소수 표현 : 0.Nf
   --> 자릿수 모자르면 0으로 채움

print("He paid {0:0.2f} dollars.".format(math.pi)) print("He paid {0:0.3f} dollars.".format(math.pi)) print("He paid {0:0.4f} dollars.".format(math.pi)) print("He paid {0:0.5f} dollars.".format(math.pi))

# String Interpolation (f-string)

table = {'Sjoerd': 4127, 'Jack': 4098, 'Dcab': 7678} for name, phone in table.items(): print(f'{name:10} ==> {phone:10d}')

Sjoerd ==> 4127 Jack ==> 4098 Dcab ==> 117678

# String Functions
- find() : 위치 반환, 없으면 -1
- index() : 위치 반환, 없으면 error

• 코드의 간결성
• 코드의 재사용성
• 코드 수정의 용이성
• 프로그램의 모듈화

내장함수 Vs. 사용자 정의 함수

• 내장함수 : 자주 사용하는 기능을 미리 만들어 내장시킨 함수
• 사용자 정의 함수 : 프로그래머가 필요에 의해 만든 함수

  Arbitary Arguments, *args

• arguments의 개수를 모를 때 *를 붙임 -> tuple로 받음

  Arbitary Keyword Arguments, **kwargs

• arguments가 많은데 그 즁 몇 가지 값만 변경하여 전달할 때 사용 -> dic으로 받음

Variable Scope

• 지역변수
  • 함수 내부에서만 유효한 변수
  • 함수가 호출되었을 때 생성, 벗어날 때 사라짐
• 전역변수
  • 전체에서 유효
  • 프로그램이 시작될 때 생성, 끝날 때 사라짐

전역 변수의 값을 함수 안에서 사용하는 방법

1) global 키워드 사용 2) 매개변수 전달

High Order Function (고차함수)

• 함수를 다루는 함수
• 함수를 인자로 받거나 함수를 반환하는 함수
• 고계 함수는 lambda() 함수와 주로 사용
• map, reduce, filter
• 맵리듀스(map-reduce) 알고리즘 : 대용량 분산처리 시스템에서 각각의 work를 쪼개서 여러 시스템에 나눠 주고 (map) 다시 그 결과를 합쳐서 (reduce) 반환해주는 알고리즘

  reduce()

• 반드시 두 개의 전달 인자가 있어야 함

  from functools import reduce
  reduce(lambda x, y: x+y, {2: '안녕', 4: '하세요'})
  # 6

• range, tuple : immutable
  • 객체가 만들어지면 값 변경 불가
• list, set, dict : mutable
  • 객체가 만들어진 이후에도 값 추가, 삭제, 수정 가능

    객체

• 데이터와 그 데이터에 관련된 동작(절차, 방법, 기능)을 모두 포함한 개념
• python에서 모든 것이 객체

  List

• 다수의 데이터, 타입이 다른 데이터를 하나의 변수에 저장하고자 할 때 매우 유용

  Indexing and Slicing

• 변수 [시작 : 끝 : 증감] -> 범위 끝 미포함

  아이템 추가

  ```
• list.append(item)
• list.extend(list2)
• list.insert(index, item)

  ### 아이템 제거

• del list[index]
• list.remove(item) : list에서 첫 번째로 나오는 item 삭제

  ### 아이템 정렬

• list.sort()
• sorted(list)
• list.reverse

  ### list 연산자

• list + list
• list * 숫자 (0이나 음수일 경우 빈 리스트 반환)
• 우선 순위 : * > +

  ### 문자열을 list로 생성

• list() : 인자로 문자열이 아닌 다른 자료형이 들어갈 수 있음
• split() : 인자를 기준으로 나눠 list 형성

  ### range() 함수로 list 생성

• arr = list(range(숫자)) ```

  tuple

• 리스트와 같이 순서가 있는 아이템들의 묶음
• 리스트와 동일하지만, 튜플은 immutable
• 리스트에서 사용하는 연산, 인덱싱, 슬라이싱 등 모두 동일하게 사용 가능 ```
• t1 = ()
• t2 = 1, 2, 3
• t3 = (1, )
• t4 = t1 + t2
• t5 = t1 * 3 ```

  dictionary

• key - value 쌍으로 이루어진 자료구조
• value에는 다양한 자료형이 들어갈 수 있음
• key에는 immutable type만 들어갈 수 있음

  Key Search

  ```
• dic[key] # key가 없으면 error
• dic.get(key) # key가 없으면 error

  ### Iteration

• dic.keys() # list로 반환
• dic.items() # tuple로 반환

Set

• Add
• Update : 여러 값 동시에
• Remove

  Set Operators and Methods

  ```
• s1 & s2 / s1.intersection(s2)
• s1 | s2 / s1.union(s2)
• s1 - s2 / s1.difference(s2) ```

• not > and > or 순으로 우선순위가 높음

  프로그래밍 제어 구조

  순차 구조

  조건 구조

  반복 구조

반복문

while True, break

• break가 있어야 while True 구문 빠져나올 수 있음
• 프로그래밍 언어에서 0 이외 모든 값은 True

  continue

• continue를 만나게 되면 아래코드로 넘어가지 않고 다시 while 조건식으로 분기

for 문

• for 변수 in 범위
  • 범위에는 리스트, 튜플, 문자열 등이 들어갈 수 있음
  • 반복에 필요한 변수를 미리 만들 필요 없음

    List Comprehension

    x = [3 * i for i in range(1, 11) if i % 2 == 0]

• end, sep, file

  print(1,2,3, file = open('file.txt', 'w'))'

• open() 함수로 객체 형성
• file.txt에 출력 결과 저장

Data Type 변환 함수

숫자형

• int
• float
• complex (복소수)
• bool (불리언, 논리 자료형)

  문자형

• str
• bytearray
• bytes

  컨테이너형

• range
• tuple
• list
• set
• dict

수식 표현

• 값과 연산자로 이루어짐
• 연산자의 종류
  • 산술 : +, -, *, /, //
    • 대입 : =
    • 비교 : >, <, =>, =<, !=, ==
    • 논리 : and, or, not
    • 멤버 : in, not in
    • 비트 : &, |, ^, <<, >>
    • 식별 : is, is not

Numeric Types : Integer and Float

• Integer : 정수형 데이터 타입
  • Python에서는 정수 데이터를 표현할 수 있는 범위의 한계가 없음
• Float : 실수형 데이터 타입
  • 소수점 16자리까지 표현 가능
  • exponenet의 표현에도 한계가 존재

String Type

• " 또는 '를 출력하기 위해선 상반된 기호 사용
• escape characters : \n, \t, \, ", '

복합 연산자

• a *= b
• a /= b
• a //= b
• a %= b
• a **= b

• 블록 요소 + 가로 사이즈 명시 + margin:auto : 가운데 정렬

2-1. JS 개요

01. 표기법

dash-case(kebab-case) : html / css

• the-quick-brown-fox

  snack_case : html / css

• the_quick_brown_fox

  camelCase : js

• theQuickBrownFox

  PascalCase : js

• TheQuickBrownFox

02. Zero-base Numbering

특별한 경우를 제외하곤 0부터 count

03. 주석

// 한 줄 메모 /* 여러 줄 메모 */

2-2. 자료형

01. String

let myName = "Heropy"; let hello = (backtick)hello ${myName}(backtick)

02. Number

정수 / 부동 소수점

03. Boolean

true, false 두 가지 값만 가지는 논리 데이터

04. Undefined

let undef;

값이 할당되지 않은 상태

05. Null

let empty = null;

어떤 값이 의도적으로 비어있음

06. Object (객체 데이터)

여러 데이터를 key:value 형태로 저장 { }

let user = {age = 23}; console.log(user.age);

07. Array (배열 데이터)

여러 데이터를 순차적으로 지정합니다. [ ]

let fruits = ['Apple', 'Banana']; console.log(fruits[1]);

2-3. 변수

var (not recommended) let / const -> immutable 여부 차이

2-4. 함수

기명함수

function helloFunc() { console.log(1234); } helloFunc();

익명함수

let world = function () { console.log('World~'); world();

2-5. 조건문

let isShow = true; if (isShow){ comsole.log('Show!');} else { coosole.log('World');

2-6. DOM API

Document Object Model : HTML 요소 Application Progranmming Interface : 명령들 -> JS로 html을 제어할 때 쓰는 명령들

js가 html에 정상적으로 접근하기 위해선

1. script 태그를 body 태그 맨 마지막에 작성 2. defer 속성 시용

HTML 요소 1개 검색

const bowEl = document.querySelector('.box')

HTML 요소의 클래스 정보 객체 활용

bowEl.classList.(add/remove)('active'); let isContains = boxEl.classList.contains('active'); console.log(isContains);

HTML 요소에 적용할 수 있는 메소드

bowEl.addEventListener()

Arguments 추가 가능

bowEl.addEventListener(1, 2)

1 - 이벤트 (Event, 상황)

bowEl.addEventListener('click', 2)

2 - 핸들러 (Handler, 실행할 함수)

bowEl.addEventListener('click', function() { console.log('Click!');)

HTML 요소 모두 검색

const bowEl = document.querySelectorAll('.box')

찾은 요소들 반복해서 함수 실행

bowEl.forEach(function () {});

Getter / Setter

console.log(bowEl.textContent); -> getter bowEl.textContent = 'HEROPY'; -> setter

3. 메소드 체이닝

메소드를 연달아 쓰는 기법

display

• flex : 블록요소처럼 flex container 정의
• inline-flex : 인라인 요소처럼 flex container 정의

*flex-directrion *

• row (default)
• row-reverse
• column
• column-reverse

flex-wrap : flex items 묶음 여부

• Norwap (default) : 묶음(줄 바꿈) 없음
• wrap : 여러 줄로 묶음 => 칸이 모자라면 줄 바꿈

justify-content : 주 축의 정렬 방법

• flex-start (default) : flex items를 시작점으로 정렬
• flex-end : flex items를 끝점으로 정렬
• center : flex items를 가운데 정렬

align-content : 교차 축의 여러 줄 정렬 방법 (두 줄 이상 있을 때)

• stretch (default) : flex items를 시작점으로 정렬 => 늘어나려는 성질

• flex-start : flex items를 시작점으로 정렬

• flex-end : flex items를 끝점으로 정렬

• center : flex items를 가운데 정렬

align-items : 교차 축의 한 줄 정렬 방법 (content보다 많이 씀)

• stretch (default) : flex items를 교차축으로 늘림

• flex-start : flex items를 각 줄의 시작점으로 정렬

• flex-end : flex items를 각 줄의 끝점으로 정렬

• center : flex items를 각 줄의 가운데 정렬

플렉스 (정렬) Items

order => html 구조를 바꾸지 않아도 순서 변경 가능

• 0 (default) : 순서 없음
• 숫자 : 숫자가 작을수록 먼저

flex-grow : flex item의 증가 너비 비율 => 남을 때 증가 비율

• 0 (default) : 증가 비율 없음
• 숫자 : 증가 비율

flex-shrink : flex item의 감소 너비 비율 => 넘칠 때 감소 비율

• 1 (default) : 증가 비율 없음
• 숫자 : 증가 비율

flex-basis : flex item의 공간 배분 전 기본 너비

• auto (default) : 요소의 content 너비
• 단위 : px, em, rem 등 단위로 지정
• 0으로 설정 => 시각적으로 비율에 맞게 나옴

전환

transition: 속성명 *지속시간(필수) 타이밍함수 대기시간

• transition-property

  • all: 모든 속성에 적용
  • 속성이름 : 전환 효과를 사용할 속성 이름 명시

• transition-duration

  • 0s (default) : 지속 시간 없음
  • 시간

• transitiom-timing-function

  • ease(default) : 느 - 빠 - 느
  • linear : 일정
  • ease-in : 느 - 빠
  • ease-out : 빠 - 느
  • ease-in-out: 느 - 빠 - 느
    • 관련 사이트
      • easing 함수 치트 시트
      • easing functions mdn
      • tweenmax easing

• transition-delay : 대기 시간 지정

  • 0s (default) : 대기 시간 없음
  • 시간 : 대기 시간 지정

변환

transform: 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임;

2D 변환함수

• px

  • translate(x, y) : 이동(x축, y축)

  • translateX(x) : 이동(x축)

  • translateY(y) : 이동(y축)

  • scale(x, y) : 크기(x축, y축)

    • 특정 단위 입력 X => 배수 의미

• deg

  • rotate(degree) : 회전(각도)

  • skewX(x) : 기울임(x축)

  • skewY(y) : 기울임(y축)

3D 변환함수

• px

  • perspective(n) : 원근법(거리) => 제일 앞에 명시

• deg

  • rotateX(x) : 회전(x축)

  • rotateX(y) : 회전(y축)

perspective 속성 vs. 함수

• perspective: 600px

  • 적용 대상 : 관찰 대상의 부모

  • 기준점 설정 : perspective-origin

• transforrm: perspecctive(600px)

  • 적용 대상 : 관찰 대상

  • 기준점 설정 : transform-origin

backspace-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부

• visible(default) : 뒷면 보임
• hidden : 뒷면 숨김

박스 모델 : w, h, 내부/외부 여백

글꼴, 문자

배경 : 배경 색상/이미지

배치

플렉스 (정렬) : 수평 정렬

전환 : 요소의 전후 상태를 애니메이션으로 연결

변환 : 요소 회전, 이동, 크기 조절 => 요소에 변화를 주는 속성

띄움 : 요소를 공중에 띄움 => 주변에 글자가 흐를 수 있게 함

애니메이션 : 전환보다 복잡한 구조의 애니메이션

그리드 : 행과 열이 있는 2차원 구조를 만들가 위한 속성

다단 : 텍스트를 여러 단으로 나눔

필터 : 요소 블러, 반전, 흑화 ...

너비 : 요소의 가로, 세로 너비

auto *(default): 브라우저가 너비를 계산 *단위 : px/em/vw 등으로 지정

*span *: 콘텐츠가 포함된 영역만큼 줄어듦

*div *: 가로 => 부모 요소만큼 늘어남 / 세로 => 컨텐츠가 포함된 영역만큼 줄어듦

max-width, max-height : 요소의 최대 너비

• none (default) : 제한 없음
• auto : 브라우저가 계산

min-width, min-height : 요소의 최소 너비

• none (default) : 제한 없음
• auto : 브라우저가 계산

CSS 단위

1. px : 픽셀 2. % : 상대적 백분율 3. em : 요소의 글꼴 크기 4. rem : 루트 요소 (html) 글꼴 대비 크기 5. vw : 뷰포트 가로 너비의 백분율 6. vh : 뷰포트 세로 너비의 백분율

외부 여백 단축 속성 margin

• 0 (default) : 외부 여백 없음

• auto : 브라우저가 계산 (가운데 정렬)
• 단위 : px/em/vw 등 단위로 계산, 음수값도 가능
• margin : __ => 모든 방향 일괄 적용
• margin : __ __ => 위/아래 좌/우
• margin : __ __ __ => 위 좌/우 아래
• margin : __ __ __ __ => 위 우 아래 좌 (시계방향)

• margin-bottom 처럼 개별 속성 지정도 가능

내부 여백 단축 속성 padding

• 0 (default) : 내부 여백 없음

• % : 부모 요소의 가로 너비에 대한 비율로 지정
• 단위 : px/em/vw 등 단위로 계산
• 요소의 크기가 커짐
• padding : __ => 모든 방향 일괄 적용
• padding : __ __ => 위/아래 좌/우
• padding : __ __ __ => 위 좌/우 아래
• padding : __ __ __ __ => 위 우 아래 좌 (시계방향)

• padding-bottom 처럼 개별 속성 지정도 가능

테두리 선(border)과 색상 표현

border : border-width border-style border-color;

• 순서는 상관 없지만, 관습대로 코딩하는 습관 기르기

• border-width :

  • medium, thin, thick px, em, % 등으로 지정하기
  • 단축 속성이자 개별 속성

• border-style :

  • none (default) : 선 없음
  • solid : 실선 (일반 선)
  • dashed : 파선 -----
  • 단축 속성이자 개별 속성

• border-color :

  • black (default)
  • transparent : 투명
  • 단축 속성이자 개별 속성

• 방향 지정 가능

  • border-top / border-bottom / border-right / border-left

** 색상 표현 **

• 색을 사용하는 모든 속성에 적용 가능한 색상 표현

• 색상 이름

  • 브라우저에서 제공하는 색상 이름 red, tomato, royalblue
  • 브라우저 마다 달라서 추천 X

• Hex 색상코드

  • 16진수 색상 #000, #FFFFFF
  • 가장 많이 사용

• RGB

  • 빛의 삼원색 rgb(255, 255, 255)

• RGBA

  • 빛의 삼원색 + 투명도 rgba(0, 0, 0, 0.5)

모서리 둥글게 (border-radius)

• 0(default) : 둥글게 없음

• 단위 : px, em, vw 등 단위로 지정
• 값이 4개 => 시계방향으로 적용

크기 계산 (box-sizing)

• 요소의 크기 계산 기준을 지정

• content-box(default) : 요소의 내용으로 크기 계산

• border-box : 요소의 내용 + padding + border로 크기 계산
• 값이 4개 => 시계방향으로 적용

넘침 제어 (Overflow)

• 요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축 속성

• visible(default) : 넘친 내용을 그대로 보여줌

• hidden : 넘친 내용을 잘라냄
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
• scroll : x축, y축 스크롤바 생성
• overflow-x / overflow-y : 개별 속성 지정 가능

display

• 요소의 화면 출력 특성

• block(default) : 상자 요소

• inline(default) : 글자 요소
• inline-block(default) : 글자 + 상자 요소
• flex : 플렉스 박스 (1차원 레이아웃)
• grid : 그리드 (2차원 레이아웃)
• none : 보여짐 특성 없음, 화면에서 사라짐
• 기타 : table, table-row, table-cell 등 ..

요소 투명도 (opacity)

• 1(default) : 불투명

• 0~1 : 0부터 1 사이의 소수점 숫자 => 0 생략 가능 .5/.6

글꼴

• font-style : 글자의 기울기

• normal(default) : 기울기 없음
• italic : 이탤릭체

• font-weight : 글자의 두께

• normal, 400(default) : 기본 두께
• bold, 700 : 두껍게
• 100 ~ 900 : 100 단위의 숫자 9개, normal / bold 이외 두께

• font-size : 글자의 크기

• 16px(default) : 기울기 없음
• 단위 : px, em, rem 등 단위로 지정

• line-height : 한 줄의 높이

• normal(default) : 브라우저의 기본 정의 사용
• 숫자 : 요소의 글꼴 크기의 배수로 지정
• 단위 : px, em, rem 등 단위로 지정

• font-family : 글꼴

• font-family : 글꼴1, "글꼴2", .. 글꼴 계열
• 후보 중 가능한 글꼴 우선 적용, 안 되면 마지막 계열 중 아무 폰트 적용
  • serif : 바탕체 계열
  • sans-serif : 고딕체 계열
  • monospace : 고정너비 글꼴 계열
  • cursive : 필기체 계열
  • fantasy : 장식 글꼴 계열
• normal(default) : 브라우저의 기본 정의 사용
• 숫자 : 요소의 글꼴 크기의 배수로 지정
• 단위 : px, em, rem 등 단위로 지정

문자

• color : 글자의 색상

• rgb(0, 0, 0) (default) : 검정색
  • 색상 : 기타 지정 가능한 색상

• text-align : 문자의 정렬 방식

• left (default) : 왼쪽 정렬
  • right : 오른쪽 정렬
  • center : 가운데 정렬

• text-decolation : 문자의 장식

• none (default) : 장식 없음
  • underline : 밑줄
  • line-through : 중앙 선

• text-indent : 문자의 첫 줄의 들여쓰기

• 0 (default) : 들여쓰기 없음
  • right : 오른쪽 정렬
  • 단위 : px, em, rem 등 단위로 지정
• 음수를 사용하면 내어쓰기

배경

• background-color : 요소의 배경 색상

• transparent (default) : 투명함
• 색상 : 지정 가능한 색상

• background-image : 요소의 배경 이미지 삽입

• none (default) : 이미지 없음
• url("경로") : 이미지 경로'url()'

• background-repeat : 요소의 배경 이미지 반복

• repeat (default) : 이미지를 수직, 수평 반복
• repeat-x : 이미지를 수평 반복
• repeat-y : 이미지를 수직 반복
• no-repeat : 이미지 반복 안 함

• background-position : 요소의 배경 이미지 위치

• 0% 0% (default) : 0% ~ 100% 사이 값
• 방향 : top, bottom, left, right, center 방향
• 단위 : px, em, rem 등 단위로 지정

• background-size : 요소의 배경 이미지 크기

• auto (default) : 이미지의 실제 크기
• 단위 : px, em, rem 등 단위로 지정
• cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
• contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

• background-attachment : 요소의 배경 이미지 스크롤 특성

• scroll (default) : 이미지가 요소를 따라서 같이 스크롤
• fixed : 이미가 뷰포트에 고정, 스크롤 X
• cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤

배치

• position : 요소의 위치 지정 기준

• static (default) : 기준 없음
  • relative : 요소 자신의 기존 자리를 기준 => 부모요소 만들어줌

• absolute : 위치 상 부모 요소를 기준, 주변 요소와 상호작용 x

• fixed : 뷰포트(브라우저)를 기준 => body를 scroll 해도 고정

• sticky : 스크롤 영역

• 같이 이용하는 CSS 속성들 (모두 음수 사용 가능)

  • 요소의 각 방향별 거리 지정 (auto : 브라우저가 계산)
    • top
    • bottom
    • left
    • right
    • z-index : 요소의 쌓임 정도를 지정
      • auto (default) : 부모 요소와 동일한 쌓임 정도
      • 숫자 : 숫자가 높을수록 위에 쌓임
        • 보통은 0 취급, 뒤로 보내려면 -1

요소 쌓임 순서 (stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

• 요소에 position 속성의 값이 있는 경우 위에 쌓임 (static 제외)

• 1번 조건과 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓임

• 1/2번 조건까지 같을 경우, HTML의 다음 구조일수록 위에 쌓임

요소의 display가 변경됨

• position 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경됨

요소를 어떤 요소로 묶어주는 행위

전역 속성 : 전체의 영역에서 모두 사용 가능한 속성

title 속성 : 요소의 정보나 설명을 지정, 마우스를 해당 요소에 올려 두면 설명 표시

style 속성 : 적용할 css 스타일 지정

class 속성 : 요소를 지칭하는 중복 가능한 이름 => . class

id 속성 : 요소를 지칭하는 고유한 이름 => # id

data-이름 속성 : 요소에 데이터를 지정

defer 속성

html 분석 후에 js 실행하도록 하는 속성

CSS 선언 방식

내장 방식 : style 태그 내부에 작성

인라인 방식 : 요소의 style 속성에 직접 스타일을 작성, 선택자 없음, 유지 보수 불리

링크 방식 : 외부 css 문서를 가져와 연결하는 방식 H <- C [병렬]

@import 방식 : css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식 H <- C <- C [직렬] => 연결이 지연될 수 O

CSS 선택자 : 기본 선택자

*전체 선택자 * * : 모든 요소를 선택

*태그 선택자 ABC *: 태그 이름이 ABC인 요소 선택

클래스 선택자 .ABC : class 속성의 값이 ABC인 요소 선택

*아이디 선택자 #ABC *: id 속성의 값이 ABC인 요소 선택

CSS 선택자 : 복합 선택자

일치 선택자 ABCXYZ: 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 => 태그 선택자 먼저

자식 선택자 ABC > XYZ : 선택자 ABC와 자식 요소 XYZ 선택

하위(후손) 선택자 ABC XYZ : 선택자 ABC와 하위 요소 XYZ 선택, '띄어쓰기'가 선택자의 기호

인접 형제 선택자 ABC + XYZ : 선택자 ABC와 다음 형제 요소 XYZ 하나를 선택

일반 형제 선택자 ABC ~ XYZ : 선택자 ABC와 다음 형제 요소 XYZ 모두를 선택

CSS 선택자 : 가상 class 선택자

css 가상 class 선택자로도 js처럼 일부 동작 제어 가능

ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

ABC:active : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

ABC:focus : 선택자 ABC 요소가 focus되면 선택

• focus가 될 수 있는 요소는 html 대화형 컨텐츠에 해당
• input, a, button, label, select 등
• tabindex 속성을 사용한 요소도 focus 될 수 있음
  • focus 속성을 통해 focus 될 수 있는 요소를 만들 수 있음
  • tab 키를 사용해 focus할 수 있는 순서를 지정하는 속성
  • 순서로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않음

ABC:first_child : 선택자 ABC가 형제 요소 중 첫째라면 선택

ABC:last_child : 선택자 ABC가 형제 요소 중 막내라면 선택

ABC:nth_child(n) : 선택자 ABC가 형제 요소 중 (n)째라면 선택

• 2n, 2n+1, 3n, n+2 ... 등을 통해 특정 요소 선택 가능

ABC:not(XYZ) : 선택자 XYZ가 아닌 ABC 요소 선택

CSS 선택자 : 가상 요소 선택자

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

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

• display : inline과 block 속성 지정 가능

CSS 선택자 : 속성 선택자

[ABC] : 속성 ABC를 포함한 요소 선택

[ABC="XYZ"] : 속성 ABC를 포함하고 값이 XYZ인 요소 선택

[ABC] : 속성 ABC를 포함한 요소 선택

[ABC] : 속성 ABC를 포함한 요소 선택

스타일 상속 : 부모/상위 요소 css가 자식/후손 요소에 영향을 미침

모두 글자/문자 관련 속성

강제 상속 : "속성: inherit"

부모 요소 스타일 따름

선택자 우선순위 (명시도)

!important : 99999999999999점

id 선택자 : 100점

class 선택자 : 10점

tag 선택자 : 1점

전체 상속자 : 0점

inline 선언 : 1000점

상속 : X

🐭 점수가 같으면 나중에 쓴 게 적용됨

1. 상대경로 ./ (생략 가능) : 주변 경로 ** ../** : 상위 경로

2. 절대경로 http(https) : 원격 사이트 주소 /(//) : 루트 경로로부터 접근

브라우저 스타일 초기화

브라우저에서 기본적으로 설정한 css 값 초기화 -> 크로스 브라우징 파일명.min.확장자와 같이 min(Minify) 키워드는 파일이 난독화나 경령화되었음을 의미 외부에서 가져와 사용하는 플러그인, 라이브러리 등을 직접 수정할 상황은 드물기 때문에 굳이 원본을 사용할 필요가 없음.

https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css

emmet

HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인 emmet은 css 선택자를 활용해 사용하는 기능

• : 곱하기 {} : 내용 삽입 $ : 순서대로 숫자 입력

empty tag

확장 기능인 속성 지정

<태그>

html 1, 2, 3, 4, 5
편리함


> ```
<태그/>

xhtml(xml), html 5 엄격, 안전함

글자와 상자

• 요소가 화면에 출력되는 특성, 크게 2가지로 구분

인라인 요소 : 글자를 만들기 위한 요소

• 요소가 수평으로 쌓임
• span : 콘텐츠 영역을 설정하는 용도, 줄바꿈 처리 => 띄어쓰기로 인식, 위아래 margin/padding 지정 무의미
• margin : 요소의 외부 여백을 지정하는 css 속성
• padding : 요소의 내부 여백을 지정하는 css 속성
• 자식요소로 블록 요소 사용 불가
• 가로, 세로 지정 불가

블록 요소 : 상자(레이아웃)를 만들기 위한 요소

• 요소가 수직으로 쌓임
• div : 본절적으로 아무 것도 나타내지 않는, 컨텐츠 영역을 설정하는 용도, 부모 요소의 크기만큼 자동적으로 늘어남, 위아래/좌우 margin/padding 지정 가능
  • 자식요소로 블록 요소 사용 가능

핵심 tag 정리

div (block)

• 특별한 의미가 없는 구분을 위한 요소

h1 (block)

• 제목을 의미하는 요소 (heading)
• 숫자 1~6 : 숫자가 작을수록 더 중요한 제목 정의
• css 초기화하면 글자 크기 같음

p (block)

• 문장을 의미하는 요소 (paragraph)

img (inline)

• 이미지를 삽입하는 요소
• src, alt(엑박) => 필수 속성

ul (block)

• 순서가 필요없는 목록의 집합을 의미

ol (block)

• 순서가 필요한 목록의 집합을 의미

li (block)

• 목록 내 각 항목

a (inline)

• 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
• href : link url
• target : 링크 url의 표시 위치
  • target = "_blank" => 새탭에 표시

span (inline)

• 특별한 의미가 없는 구분을 위한 요소

br (inline)

• 줄바꿈 요소

input (inline-block)

• 수평으로 쌓이지만, 가로/세로 좌우/위아래 여백 설정 가능
• type 속성 : 입력받을 데이터 타입 결정
• value 속성 : 미리 입력된 값
• placeholder 속성 : 입력할 값의 힌트
• disabled 속성 : 입력 요소 비활성화

label (inline)

• 라벨 가능 요소(input)의 제목
• input type = "checkbox"
  • checked 속성: 체크박스 입력 요소 체크됨
• input type = "radio"
  • 하나만 체크 가능
  • name 속성으로 여러 input 태그 그룸 묶기

table (table 요소)

• 표 요소 행과 열의 집합

tr (table 요소)

• 행을 지정하는 요소

td (table 요소)

• 열을 지정하는 요소

문서의 HTML 버전을 지정 (HTML1, HTML2, HTML3, HTML4, XHTML, HTML5(표준))

DOCTYPE은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 문서의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도

HTML, HEAD, BODY

1. HTML 태그 : 문서의 전체 범위

2. HEAD 태그 : 문서의 정보를 나타내는 범위, 웹 페이지의 제목/설명/사용할 파일 위치/CSS 같은 웹페이지의 보이지 않는 정보를 작성

3. BODY 태그 : 문서의 구조를 나타내는 범위, 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네이게이션, 메뉴, 버튼, 이미지 같이 웹페이지의 보여지는 구조를 작성하는 범위

lang

지정할 문서의 언어를 명시하는 HTML 속성 lang이 영어로 지정되어 있으면 브라우저에서 번역 기능 제공

CSS/JS 연결하기

• CSS 연결

1. <link rel="stylesheet" href="./main.css"/> 
-------------------------------------------------------------------
link tag **=> 외부 문서를 가져와 연결할 때 사용, 대부분 CSS 파일
-------------------------------------------------------------------
rel ="" : 가져올 문서와의 관계
>> stylesheet / icon ..
>> favion : 탭 화면에 뜨는 아이콘, favicon.png / favicon.ico
-------------------------------------------------------------------
href ="" : 가져올 문서의 경로
>> ./ => html 문서 파일 기준 주변에서 탐색
-------------------------------------------------------------------

2. <style> </style>
-------------------------------------------------------------------
CSS를 HTML 문서 안에 작성하는 경우에 사용

• JS 연결

1. 외부에서 JS 파일을 가지고 오는 경우
<script src="./main.js"></script>

2. 내부에서 JS를 작성하는 경우
<script> console.log("Hello World!") </script>

meta 태그

HTML 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색 엔진이나 브라우저에 제공

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
=> 모바일 환경에서의 웹 페이지 가로 너비와, 처음 출력될 때 확대/축소 여부나 정도에 관한 정보
<meta charset="UTF-8"/>
=> 문자 인코딩 방식

• 디렉토리 이름은 소문자로 관리하자
• project 단위 => 폴더 개념
• VS code에서도 파일 관리 가능
• .vscode : 현재 VS code 설정 정보가 들어있는 파일 (무시/삭제해도 됨)
  • 보통 이름이 .로 시작하는 파일이나 폴더는 숨김 전용
• 브라우저 index.html 파일을 우선적으로 탐색

VS code 단축키

• cm + o : open folder
• *cm + a *: 전체 선택
• cm + shift + p : 명령창
• alt + cm + l : beautify 단축키 바인딩
• cm + alt + s : 프로젝트 전체 저장
• cm + + / cm + - : 브라우저에서 확대/축소
• cm + b : side bar 열고 닫기
• cm + p : 빠른 열기 (파일이나 기호 검색)
• cm + shift + p : 모든 명령 표시
• cm + w : 편집기 닫기
• cm + f : 찾기
• cm + alt + f : 대체
• alt + up/down : 줄 이동
• alt + shift + up/down : 줄 위/아래에 해당 줄 복사
• shift + tab : 내어쓰기
• cm + shift + [ : 전 편집기 열기 (좌측 창으로 이동)
• cm + backslash : 편집기 분할

VS code 편리한 확장자

• beautify : 줄 맞춤 자동화
• auto rename tag : tag 이름 변경 자동화
• live server : 임시로 로컬 서버 오픈

• ` : 백틱(backtick), 그레이브(grave)
• ~ : 틸드(tilde)
• ! : exclamation mark
• @ : at sign

• : shap, 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

오픈 소스 라이선스

• 오픈 소스 라이선스
  • 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있게 공개하는 것
  • 그럼에도 저작권이 있음 => 저작권을 잘 확인하자 !
  • 개인 사용 가능/상업적 사용 가능 => 무료 사용 가능 저작권
  • apache license
    • 개인적/상업적 사용 가능, 배포/수정/특허 신청 가능
  • mit license
    • 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면, 나머지 사용에 대한 제약 없음
    • 프로젝트 소스 코드에 외부에서 가져온 오픈소스의 라이선스 내용만 정확히 명시하면 충분
    • 대부분 프로젝트에서는 자동으로 오픈 소스가 같이 빌드되기 때문에 따로 관리할 필요 없음
  • bsd license
    • mit와 동일
  • beerware

주소창에 페이지 주소 입력  -- 최초 요청 --> 서버 -- 최초 응답 (html) --> 사용자
사용자 -- 추가 요청 --> 서버 -- 추가 응답 (css, js) --> 사용자

웹 표준과 브라우저

• 웹 표준 웹에서 사용되는 표준 기술이나 규칙, W3C의 표준화 제정 단계인 'REC'에 해당되는 기술

• 크로스 브라우징 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술

  인터페이스 구조

• 창 (window)

• 탭 (tab)

• 주소창 (address bar)

• 뷰포트 (viewport) 렌더링되는 영역 (렌더링 : 브라우저의 뷰포트에 웹 사이트를 출력해내는 행위)

웹 이미지

• 비트맵 (bitmap)

  • 픽셀이 모여 만들어진 정보의 집합 (raster image)
  • .jpeg, .gif, .png
  • 정교하고 다양한 색상 자연스럽게 표현
  • 확대, 축소 시 계단 현상, 품질 저하

• 벡터 (vector)

  • 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지
  • .svg
  • 확대, 축소에서 자유로움, 용량 변화가 없음
  • 정교한 이미지 표현이 어려움
  • material image, 로고, 아이콘 등에 사용

• jpg(jpeg)

  • 손실 압축 => 용량이 획기적으로 줆
  • 이미지를 반복적으로 저장하면 손실이 크게 발생
  • 표현할 수 있는 색상과 환경이 다양
  • 용량이 작음

• png

  • 비손실 압축
  • 용량이 비교적 큼
  • alpha channel 지원 => 투명도 지원
  • gif 대체 포맷

• gif

  • 비손실 압축
  • 여러 장의 이미지를 한 개의 파일에 담을 수 있음 => 움짤, 애미메이션
  • 8비트 색상만 지원 => 다양한 색상 표현 X

• webp

  • jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
  • 완벽한 손실/비손실 압축 지원
  • gif와 같은 애니메이션 지원
  • alpha channel 지원 => 투명도 지원 (손실/비손실 모두)
  • IE 지원 불가 (하위호환성 check)

• svg

  • 마크업 언어 (html/xml) 기반의 벡터 그래픽을 표현하는 포맷
  • 해상도의 영향에서 자유로움
  • css/js로 제어 가능
  • 파일 및 코드 삽입 가능
    • svg 이미지의 복잡한 코드를 css/js로 디테일하게 제어하기는 힘듦
      • 색상이나 일부 영역의 추가/제어 혹은 간단한 형태 생성 정도