leah

my dev_log

0%

1차 세미나_03/04/21

Posted on Edited on In ,

1차 세미나

Git

  1. 버전 관리 용이
    1. 수정한 내용 비교 가능
    2. 파일을 이전 상태로 돌릴 수 있음
    3. 프로젝트 자체를 이전 상태로 돌릴 수 있음
    4. 누가, 언제 만들었는지 추적할 수 있음
    5. 파일 복구 가능
  2. 협업 용이
    1. 브랜치로 분기를 지정하여 기능별로 분리하여 작업할 수 있음
      • feature
      • develop
      • release
      • master
    2. glt flow를 이용하여 브랜치 병합 과정에서 충돌을 최대한 피하기 위해서
      • 충돌 시
        1. pull request 을 이용하여 자동으로 merge되는 것을 방지함
        2. 버전 선택 가능
    3. 각자 다른 부분을 작업한 후 합칠 수 있음
  3. 브랜치를 통한 비선형적인 개발
  4. 원격 저장소가 있다면 어디서나 개발 가능 (Github)
    1. 어디서나 clone 받을 수 있음
    2. 하나의 repository를 여러 사람과 공유할 수 있음
    3. remote가 남아있다면 복구 가능
image-20210403152928735
  • LOCAL
    • Working Directory
      • 새로 생성: Untracked
      • 변경됨: Modified
    • Staging Area
      • Commit할 파일들을 모아놓는 공간
    • Repository
      • Commit 후에 버전이 기록되는 공간
      • history 관리
  • REMOTE

Git 관련 용어

  • Working Tree
  • Commit
  • Branch
  • Merge
  • HEAD

Git 기본 명령어

Screenshot 2021-04-03 at 14 47 31

개인 작업 시

  1. local
1
2
3
4
5
git init <folder name>

cd <folder name>

code .

  1. git

    • new Repository 생성

    • 1
      2
      git remote add origin <address>
      git remote -v // 상태 확인

  2. update

1
2
3
git add .
git commit -m "initial commit"
git status
1
git log // log 확인
1
git push origin master // 원격 저장소 master 브랜치 업데이트

WEB

WEB 동작 원리

Screenshot 2021-04-03 at 14 55 24 image-20210403145603056
  • DNS (Domain Name Server)
  • 3-way / 4-way handshake

URL / URI

  • URL
    • http://sopt.org:80/wp
    • 인터넷 상의 자원의 위치
  • URI
    • http://sopt.org:80/wp/url.pdf
    • 인터넷에 있는 자원을 나타내는 식별자

http://sopt.org:80/wp/?page_od=2519

  • protocol
    • http
    • 원거리 통신 장비 사이에서 메시지를 주고받는 규칙
    • http는 www 상에서 하이퍼텍스트를 주고받는 규칙
    • // 없어도 작동함

  • domain name

    • sopt.org
    • 네트워크 상에서 컴퓨터를 식별하는 호스트명
    • DNS에서 IP 주소로 변경해준다
    • e.g. 172.217.25.238 : google.com

  • port

    • 80
    • 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위
    • 다른 방으로 들어가는 문과 같다
    • e.g. 80번: HTTP, 443번: HTTPS

  • path

    • wp
    • 요청한 자원에 대한 웹 서버 내 경로

  • query

    • ?page_id=2519
    • 웹 서버에 제공하는 추가 파라미터

  • IP

    • 통신에 필요한 각 장치를 나타내는 주소

  • HTTP

    • request

      image-20210403150515508
      • http method

    • reponse

      Screenshot 2021-04-03 at 15 24 58
      • status code

HTML

HyperText Markup Language

웹 페이지의 뼈대를 담당한다.

  • HyperText

    • 참조를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
    • 웹 상에 존재하는 여러 문서끼리 참조할 수 있는 기술

  • Markup Language

    • 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지
    • 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어가 아님
    • e.g. 마크다운
  • <!DOCTYPE html> 명시
  • semantic tag 지원
  • form 기능 개선
  • 다양한 API 지원

Tag

1
<tag attribute="value"> ...content... </tag>

  • 태그 이름은 대소문자 구분이 없다

  • 태그가 엇갈려서 중첩되면 안 된다

  • 여러 속성이 tag에 들어갈 수 있음

  • content

    • 텍스트 / 다른 태그
    • 감싸진 태그의 자식노드가 됨

  • <단독 태그 />

    image-20210403153939010

구성 Tag

<html>

  • 전체 html 을 감싼다
  • <!DOCTYPE html> 을 벗어날 수 없음

<head>

Screenshot 2021-04-03 at 15 41 15
  • <meta>
    • metadata // 기타 정보
  • <style>
    • 외부 style이 아닌 내부에 정의 가능

<body>

Screenshot 2021-04-03 at 15 42 21
  • space / enter 많이 해도 한개 이외에는 반영 안 됨
Screenshot 2021-04-03 at 15 47 30 Screenshot 2021-04-03 at 15 54 09
  • iframe 은 보안 문제가 있으므로 embed 이용하기

블록 / 인라인

  1. 블록
    • 줄 바꿈이 일어나는 형태
    • 영역의 너비가 상위 영역의 전체 너비만큼 늘어남
    • 내부에 다른 요소를 포함할 수 있음
    • <div> 로 블록 요소를 그룹화
  2. 인라인
    • 줄 바꿈이 일어나지 않는 형태
    • 영역의 너비가 하위 영역의 전체 너비만큼 늘어남
    • 내부에 다른 요소를 포함할 수 없음
    • <span> 으로 인라인 요소를 그룹화

Semantic Tag

  • 컴퓨터가 이해하기 쉽도록 구분한 태그
  • 의미를 가지고 있는 블록 요소
Screenshot 2021-04-03 at 15 59 40

기타

  • 주석
  • 특수 문자
Screenshot 2021-04-03 at 16 00 28

CSS

CSS3

  • 웹 문서용
  • 모듈 기반
    • 원하는 모듈만 탑재 가능
    • 필요한 모듈만 빠르게 업데이트 가능
  • 기존의 도구 없이도 화려하고 동적인 스타일 구현 가능
1
<tag style="color: red;"> ...content... </tag>

  1. tag 별로 style 첨부

  2. <head> 안에 style 첨부

  3. 외부 css 파일 import

    1
    <link rel="stylesheet" type="text/css" href="*.css">

적용 우선순위

중요도 (선언 위치)

  1. 태그 내부의 style
  2. <head> 의 <style>
  3. 2 내의 @import
  4. <link>로 연결된 css 파일
  5. 4 내의 @import
  6. 브라우저의 기본 css

대상의 명시도

  1. !important
  2. inline 스타일
  3. id 선택자
  4. 클래스 / 가상 선택자
  5. 태그 선택자
  6. 상속된 스타일

코드 순서

늦게 선언된 스타일을 우선 적용

Selector (선택자)

  1. 전체 선택자 *
  2. 태그 선택자
  3. id 선택자 #
  4. class 선택자 .

다중 값 적용 방법

  • 다중 태그는 , 로 구분
  • 다중 속성은 ; 로 구분
  • 다중 속성 값은 , 로 나열

복합 선택자

  • 선택자 사이의 띄어쓰기: 선택자 조합

    h3 p {...}

    • h3 태그 내부의 모든 p 태그

  • 선택자 사이의 > : 자식 선택자

    h3 > p {...}

    • h3 태그 바로 아래의 p 태그

가상 클래스 선택자

Screenshot 2021-04-03 at 16 33 53

Attribute (속성)

Screenshot 2021-04-03 at 16 34 27
  • text-transform
    • UPPERCASE
    • LOWERCASE
Screenshot 2021-04-03 at 16 36 26

  • position

    • absolute
      • parent-context에 맞게
      • context에 관계 없이 사용자가 지정한 위치에 고정되어서
    • relative
      • child-context에 맞게
      • context에 따라 위치 다르게 적용
    • fixed
      • 위치 변하지 않음

  • overflow

    • auto
      • 스크롤 하지 않을 때는 보이지 않음
Screenshot 2021-04-03 at 16 39 17
  • box-sizing
    • border-box 설정
      • border를 포함한 전체 box의 크기가 설정한 값과 일치하게
    • 설정 안 하는 경우
      • 추가 border 등의 값이 반영되어 box size가 달라짐
  • transform, transition 만으로 animation 효과 줄 수 있음

Box Model

Screenshot 2021-04-03 at 16 45 43
  1. content : 요소가 차지하는 공간
  2. padding : 요소와 테두리 사이의 공간
  3. border : 테두리
  4. margin : 다른 요소 사이의 빈 공간

Flexible Box

image-20210403164800193
  1. flex container
    • display
    • flex-direction
    • flex-wrap : 줄 바꿈
    • justify-content : 주 축의 정렬 방법
    • align-items : 교차 축의 정렬 방법
  2. flex items
    • flex-grow : 증가 너비 비율
    • flex-shrink : 감소 너비 비율
    • flex-basis
      • default: 0 1 auto
      • 많이 설정: 1 0 auto