1. 깃&깃허브 학습, HTML 기초 태그 학습

Turtle-Hwan·2023년 9월 10일
commitgitgithubhtml

Web 기초

목록 보기
1/4

1) git & github 학습

형상 관리 : 소프트웨어의 변경 사항을 체계적으로 추적하고 통제하는 것

  • 변경 관리 ⊂⊂ 버전 관리 ⊂⊂ 형상 관리
  • 형상 관리 도구들 : CVS, SVN, Git, Perforce 등
  • Git은 분산형 버전 관리 시스템 이다.

Git은 여러 군데에 흩어져서 개발되던 소프트웨어의 코드를 한 데 모으고, 코드의 세부 변경 사항들을 추적하는 것을 돕기 위해 만들어졌다.

Git과 Github은 다르다!

  • Git은 특정 로컬 폴더(directory)를 버전, 변경 사항 추적이 가능한 git 폴더로 만들어 준다.
  • Github, GitLab는 이렇게 만들어진 로컬 저장소(내 컴퓨터)의 폴더를 어디서나 접근할 수 있게 상태를 복사해서 올려둘 수 있는 원격 저장소(remote, Cloud 저장소)의 개념이다.
  • 로컬 저장소의 git history를 remote 저장소로 올릴 때 git push를 사용하고, remote 저장소의 git history를 로컬 저장소와 동기화 시킬 때 git pull을 사용한다.
  • Github 뿐 아니라 사설 git 서버도 제작할 수 있다.
  • Github에서는 Git 기본 기능들 외에도 issue, milestone, pull request, github action 등 형상 관리에 도움되는 다양한 추가 기능을 제공한다.

Git 다운받기

git download

  • git bash : git 명령어를 사용가능한 shell 창 (기본 옵션은 vim 기반)

git 명령어 (git 저장소 생성, git 사용자 초기 설정)

git 저장소 생성 방법

  1. 원격 저장소에 있는 것을 로컬 저장소에 clone한다. 
git clone [원격 저장소 주소]
git clone https://github.com/Turtle-Hwan/Turtle-Hwan.github.io.git
  1. 로컬 저장소에 새로 저장소를 만드는, init 한다.
#저장소로 만들고 싶은 위치로 이동 후, init 한다.
git init
  • 현재 디렉토리가 git 저장소라면, .git 디렉토리가 생긴다. ⇒⇒ .git 디렉토리만 지우면 git history가 모두 삭제된다.

git 사용자 초기 설정

  • 컴퓨터에 git을 처음 깔면, 현재 git 사용자의 이름과 이메일 초기 설정이 필요하다.
git config user.name "이름"
git config user.email "이메일"
# 항상 적용되는 global 설정 확인
git config --global

# 이 저장소에만 적용되는 설정 확인
git config -l
git config --list

git commit : git 에서 특정 버전을 저장하는 것 (스냅샷을 남긴다)

commit 절차

  1. 파일 생성 및 수정, & 저장
  2. git add [파일 이름들] / git add . : 모든 파일 add
  3. git commit -m "커밋 메세지"
  • 커밋 메세지는 issue 기반을 명확하게 써 주는 것이 좋다. commit convention 참고하여, 무슨 기능을 추가했는지, 무슨 오류를 해결했는지 등.

git의 세 영역

Working Directory : 현재 작업 중인 디렉토리 (.git이 있는 곳)

  • git commit을 할 때, 개인정보(개인키, 비밀번호, 환경변수 등)은 버전관리에 포함시키면 안되고 .env 파일 등으로 따로 관리하는 것이 좋다. 공개 repository에 올라갈 경우, 악용될 가능성이 있기 때문!!
  • .gitignore 파일을 만들고, 여기에 파일/폴더 명을 써주면 Staging Area로 넘어가지 않는다. (.gitignore 파일 자체도 넘기지 않을 수 있다.)

Staging Area : 특정 버전(commit)으로 관리하고 싶은 파일들

  • git add : Working Directory에서 원하는 파일들을 Staging Area로 넘기는 명령어
  • git status : 현재 Staging Area에 담긴 파일들을 보는 명령

Repository : commit 들이 저장되는 영역

  • git commit : Staging Area에 있는 모든 파일들의 버전 기록을 Repository에 남기는 명령어
  • git commit --amend -m "수정할 메세지 : commit 수정
  • git log : Repository의 commit 기록을 보는 명령어
    출처 : 한이음 프로젝트 git 강의

git history

  • git은 history를 쌓아가는 방식으로 작동한다.
  • 즉, 파일을 삭제하면 삭제한 기록이 남으며, commit을 삭제하더라도 삭제했다는 기록이 남아서 git reflog 명령으로 찾아내서 복구 가능하다.

commit 비교 / commit 이동 / commit 삭제

commit 비교

git diff {commit_id1} {commit_id2}
  • 두 commit 사이의 차이점을 보여준다. (linux의 diff와 같은 동작)
  • commit ID는 첫 4자리만 적어도 된다.
  • 추가된 줄을 +로, 제거된 줄을 -로 나타내준다.
  • git log -p 도 비슷한 동작이다. (git log -p -2 : 최근 2개의 diff 옵션)

commit 간 이동, commit 삭제

  • commit을 계속 해야 하는 이유는 나중에 그 시점(버전)으로 이동할 수 있기 때문이다.
  • (HEAD) 포인터가 가리키는 곳이 현재 우리 눈에 소스 코드가 보이는 버전(commit)이다. 
git reset --hard {commit_id1} #commit_id1로 이동
  • reset을 통해 원하는 이전 버전으로 이동한 후, 새로운 commit을 쌓아나가면 원래 있던 commit을 삭제한 효과를 낼 수 있다. (git reflog로 삭제된 commit id도 찾을 수 있다.)

2) HTML 기초 태그 학습

  • HTML : HyperText Markup Language

  • XML처럼 태그로 감싸서 특정 문구를 표현한다.
    출처 : Mozila Web Docs

  • DOM : Document Object Model

    • HTML을 크게 보면 TREE 구조이다.
    • DOM 구조를 이용해 Javascript로 HTML 문서에 접근해서 각 element를 가져오고, 추가, 수정, 삭제가 가능하다.

HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>탭 제목</title>
  </head>
  <body>
    <h1>문서 내용 - 제목 1</h1>
    <p>문서 내용 p</p>
    <div>문서 내용 div</div>
  </body>
</html>
  • <!DOCTPE html> : html 5 표준을 따른다는 것을 나타냄.
  • <head></head> : HTML 문서의 메타데이터 정의.
    • <meta charset="UTF-8"> : 해당 문서가 어떤 문자로 인식되느냐를 나타냄. (한글이 깨질 때, 이 태그가 없을 가능성이 크다.)
  • <body></body> : 브라우저를 통해 html을 열었을 때 보이는 내용 부분.

HTML element의 속성(attribute)

  • <p class="classname">내용</p> : 이때의 class="classname" 부분이 속성 부분이다.

HTML 대표 태그

<h1 ~ 6></h1 ~ 6> : 제목 기능. 글씨를 크고 굵게 표시한다.
<div></div> : 특정한 기능이 없지만 단순히 레이아웃을 나눠서 CSS를 적용시킬 때 많이 쓴다.
<img> : img 삽입 태그
<a></a> : 다른 곳으로 링크를 걸 수 있는 태그
<button></button> : 버튼을 만들어 주는 태그
<input> : 입력을 받을 수 있는 태그
<form></form> : ID, PW 등의 입력을 받을 때 쓰인다.
  • formatting tag
<b></b> <strong></strong> : 강조 기능. strong은 강조 + 중요.
<i></i> <em></em> : 이텔릭체 기능. em은 이텔릭 + 중요.
<mark></mark> : 형광펜 효과.
<del></del> : 취소선.
<u></u> <ins></ins> : 밑줄.
  • HTML entity : HTML의 문법으로 사용하는 <>, & 등을 내용으로 삽입하도록 변환 가능한 것, 특수문자

inline style (+ css)

  • <태그 style="속성이름:속성값"></태그> : 이런 형태로 css 속서을 html 요소에 직접 줄 수 있다.

a 태그 / 링크

  • <a href="링크주소">HTML 링크</a> : 원하는 다른 페이지로 이동 가능한 하이퍼링크를 생성한다.

    • target 속성으로 링크된 문서를 어디서 열 지 결졍 가능.

      • target="_blank" : 새 창이나 새 탭에서 오픈
      • target="_parent" : 부모 프레임에서 오픈

    • 링크의 상태(state)에 따라 각각 다른 css 속성을 부여 가능하다. (link, visited, hover, active)

img 태그 / 이미지

  • <img src="이미지주소" alt="이미지가 없을 시 나오는 문자열">
  • <img>를 <a></a>로 감싸서 이미지 링크 생성 가능.
  • <map></map> 태그로 이미지를 부분 부분 나누어 링크 걸기 가능

리스트

  • <ul><li></li></ul> : unordered list
  • <ol><li></li></ol> : ordered list
  • <dt><dt></dt></dt> : description list

테이블

<table>
  <caption>테이블 제목/설명</caption>
  <tr>
    <th>table 제목1</th>
    <th>제목2</th>      
  </tr>
  <tr>
    <td>내용 1</td>
    <td>내용 2</td>
  </tr>
  <tr>
    <td>내용 3</td>
    <td>내용 4</td>
  </tr>
</table>

iframe

  • <iframe src="삽입할페이지주소"></iframe> : 페이지 안의 페이지

의미 요소 (semantic element)

  • 웹 페이지 레이아웃 구성을 위한 별도의 element

  • : HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
  • : HTML 문서의 탐색 링크를 정의함.
  • : HTML 문서에서 섹션(section) 부분을 정의함.
  • : HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
  • : HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
  • : HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.

form 속성 태그

<form name="profile" action="/login.js" method="post" autocomplete="on">
  <input type="text" name="id"> <!-- id입력 -->
  <input type="text" name="pw"> <!-- pw입력 -->
  <input type="submit" value="Submit"> <!-- 서버 제출 -->
</form>

  • submit 속성을 가진 버튼 / input을 누르면 form의 action에 해당하는 서버 파일로 input 값들이 전달된다.

  • get 방식 : 주소창에 data query 추가해서 전달하는 것

  • post 방식 : request query에 따로 data를 추가해서 전달하는 것

  • input 요소의 type

    1. 텍스트 입력(text)
    2. 비밀번호 입력(password)
    3. 라디오 버튼(radio)
    4. 체크박스(checkbox)
    5. 파일 선택(file)
    6. 선택 입력(select)
    7. 문장 입력(textarea)
    8. 버튼 입력(button)
    9. 전송 버튼(submit)
    10. 필드셋(fieldset)

XHTML

  • eXtensible HTML을 의미하고, 문법 적용이 더 엄격하다.
  • React에서는 JS 속에 XHTML을 적용한 JSX 문법을 사용한다.

참고 사이트

HTML 기초 - http://www.tcpschool.com/html/html_intro_basic

profile
Turtle-Hwan
느리더라도 꾸준히 https://turtle-hwan.tistory.com/
다음 포스트

2. CSS 기초학습

1개의 댓글

comment-user-thumbnail
강아지 이름은 봄이
2023년 9월 11일

잘 보고 갑니다 ㅎㅎ👍

답글 달기