CO_JUN 개발일지

프로젝트의 변경사항들을 타임캡슐(버전)에 담기

추적하지 않는(untracked) 파일: Git의 관리에 들어간 적 없는 파일

tigers.yaml 파일 하나만 타임캡슐에 넣고 상태 확인  ( 파일 하나 담기 )

타임캡슐 묻기 ( Commit )

입력 시작 후 FIRST COMMIT 입력 ( 통상적으로 프로젝트 첫 버전이 만들어질때 쓰임 )

저장하고 종료해야 되니 ESC로 입력 종료 후 :wq 입력

소스트리와 터미널에서 commit된거 확인

다음 변경사항들을 만들고 타임캡슐에 묻기

새로 추가된 파일이 없을 경우에는 해당 처럼 add랑 commit을 한번에 할수 있음

Git에서 과거로 돌아가는 두 방식

reset

revert

과거로 돌아가기 실습

reset 사용해서 과거로 돌아가기

돌아갈 시점 add team Cheetas 커밋 해시 확인 후 복사 ( 앞에 일부만 복사해도 되고 전체 복사해도 됨 )

git reset --hard (돌아갈 커밋 해시) 입력 하면 해당 시점 으로 돌아감

reset 하기 전 시점으로 복원해보기

해당 내용은 사용할일이 없지만 현 커밋상태로 초기화되는 명령어때문에 실습

revert 로 과거의 커밋 되돌리기

Add George to Tigers에 내용을 확인해보면 George가 추가 된 모습

소스트리에서 Revert 생성되고 내용에 George가 지워진채로 커밋된거 확인

Revert를 하고 싶은 시점으로 돌아가면 해당 시점 수정하기 전 시점으로 돌아가는거다

위에 보면 알겠지만 Add George to Tigers에 수정한 시점은 George가 추가 된 모습임

Revert를 하면 George가 삭제되고 커밋

Replace Lions with Leopards의 커밋 되돌려보기

Replace Lions with Leopards revert를 하게되면 leopards.yaml 수정한 내역때문에 충돌 메세지 나옴

여기서 컴퓨터는

hint: "git add/rm <pathspec>", then run ( add를 해주던가 remove를 진행 하고)
hint: "git revert --continue". ( 해당 명령어를 입력 해달라고 요청 하고 있음)

지금 실습은 leopards.yaml를 삭제 해야 되기때문에 밑에 처럼 입력

reset 사용해서 revert 전으로 되돌아가기

커밋해버리지 않고 revert하기

git status 확인 해보면 modified가 아직 add만 된 상황 커밋을 다시 해줘야됨

이게 어떤 상황에서 사용되냐면 원하는 다른 작업을 추가한 다음 함께 커밋할때 사용

취소하려면 git reset --hard

SourceTree로 진행 해보기

변경사항 만들고 커밋하기

SourceTree로 revert 해보기

SourceTree로 reset 해보기

https://www.youtube.com/@yalco-coding 얄코님 유튜브 내용 정리 ( 개인 공부용 )

저작자표시

'GitHub' 카테고리의 다른 글

GitHub 사용하기( GitHub시작, 원격 저장소, push, pull, 원격의 브랜치, SoureceTree 진행 ) (0)	2023.02.01
branch(여러 개, 합치기, 충돌 해결, SourceTree 진행 해보기 ) (0)	2023.01.31
Git 시작하기 (0)	2023.01.29
깃허브(GitHub) 입문 ( Git, sourcetree ) (1)	2023.01.19

Git 전역으로 사용자 이름과 이메일 주소를 설정

GitHub 계정과는 별개로 설정

프로젝트마다 협업할때 사용 어떤 작업을 누가했고 연락 방법을 위해서 설정

기본 브랜치명 변경

master, slave 흑인노예, 그의 주인을 상징하던 단어이므로 요즘 main이나 다른걸로 브랜치명 설정

프로젝트 생성 & Git 관리 시작

소스트리로 해보기

현존하는 저장소 추가

Git의 관리에서 특정 파일/폴더를 배제 하기

포할할 필요가 없을 때

- 자동으로 생성 또는 다운로드되는 파일들 ( 빌드 결과물, 라이브러리 ) 용량차지

포함하지 말아야 할 때

- 보안상 민감한 정보를 담은 파일

.gitignore 파일을 사용해서 배제할 요소들을 지정

.gitignore 파일 생성 후 제외할 파일 secrets.yaml 파일명 입력

git status 명령어로 상태 확인해보면 secrets파일 없어진거 확인

.gitignore 형식

https://git-scm.com/docs/gitignore 해당 사이트에서 참고

https://www.youtube.com/watch?v=1I3hMwQU6GU 얄코님 유튜브 참고

저작자표시

'GitHub' 카테고리의 다른 글

GitHub 사용하기( GitHub시작, 원격 저장소, push, pull, 원격의 브랜치, SoureceTree 진행 ) (0)	2023.02.01
branch(여러 개, 합치기, 충돌 해결, SourceTree 진행 해보기 ) (0)	2023.01.31
변경사항들 버전 관리 (commit, reset, revert, SourceTree로 진행 해보기 ) (0)	2023.01.30
깃허브(GitHub) 입문 ( Git, sourcetree ) (1)	2023.01.19

CSS란?

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어

CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어

HTML5에서는 HTML는 정보와 구조화, CSS는 styling의 정의라는 본연의 임무에 충실한 명확한 구분이 이루어짐

HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있음

그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없다

CSS3의 용어

셀렉터 (Selector, 선택자)

CSS는 HTML 요소의 style(design, layout etc)을 정의하는데 사용

이를 위해서 선행되어야하는 것은 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 함

프로퍼티 (Property / 속성)

셀렉터로 HTML 요소를 선택하고 {} 내에 프로퍼티(속성)와 값을 지정하는 것으로 다양한 style을 정의할 수 있음

프로퍼티는 표준 스펙으로 이미 지정되어 있는 것을 사용하여야하며 사용자가 임의로 정의할 수 없음

여러 개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)으로 구분

값 (Value / 속성값)

셀렉터로 지정한 HTML 요소에 style을 적용하기 위해 프로퍼티를 사용했다.

프로퍼티의 값은 해당 프로퍼티에 사용할 수 있는 값을 “키워드”나 “크기 단위” 또는 “색상 표현 단위” 등의 특정 단위로 지정하여야 한다.

HTML과 CSS의 연동

HTML은 CSS를 포함할 수 있다. CSS를 가지고 있지 않은 HTML은 브라우저에서 기본으로 적용하는 CSS(user agent stylesheet)에 의해 렌더링

연동하는 방법

Link style

HTML에서 외부에 있는 CSS 파일을 로드하는 방식이다. 가장 일반적으로 사용

html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css">
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

css


h1 { color: red; }
p  { color: white; background: black; }

Embedding style

HTML 내부에 CSS를 포함시키는 방식

매우 간단한 웹페이지의 경우는 문제될 것이 없겠지만 Link style을 사용하는 편이 좋음

HTML과 CSS는 서로 역할이 다르므로 다른 파일로 구분되어 작성하고 관리되는 것이 바람직

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 { color: blue; }
      p  { background: pink; }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

Inline style

HTML요소의 style 프로퍼티에 CSS를 기술하는 방식

JavaScript가 동적으로 CSS를 생성할 때 사용하는 경우가 있음

하지만 일반적인 경우 Link style을 사용하는 편이 좋음

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color: green">Hello World</h1>
    <p style="background: beige">This is a web page.</p>
  </body>
</html>

Reset CSS 사용하기

모든 웹 브라우저는 디폴트 스타일(브라우저가 내장하고 있는 기본 스타일)을 가지고 있어 CSS가 없어도 작동함

그런데 웹브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각이어서 주의가 필요

Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용

즉, 브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜 주는 역할을 한다.

자주 사용되는 Reset CSS

Eric Meyer’s reset

normalize.css

Eric Meyer’s reset

reset.css파일 생성

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

여기서 해당 코드를 html에 link로 추가해도 되지만, 코드가 복잡해지기 때문에

작업 중이던 style.css파일에 import로 추가해 사용

저작자표시

form

form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있음

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>


    <form>
    ...
    form elements (input, checkbox, radio button, submit button...)
    ...
    </form>


</body>
</html>

GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며

HTTP request method라 함

GET

GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식
예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1

전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가

1개 이상의 전송 데이터는 ‘&’로 구분

URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있음. (최대 255자)

REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청

POST

POST 방식은 Request Body에 담아 보내는 방식

URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느림

REST API에서 POST 메소드는 특정 리소스의 생성을 요청

전에 미니프로젝트했던거 참고

https://cojun.tistory.com/16

2023-01-12 4주차 Flask, GET, POST, API

Flask 시작 1. 서버 만들기 from flask import Flask app = Flask(__name__) @app.route('/') def home(): return 'This is Home!' if __name__ == '__main__': app.run('0.0.0.0',port=5000,debug=True) from flask import Flask app = Flask(__name__) @app.route('/

cojun.tistory.com

input

input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용

input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분

form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 됨

서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 key=value의 형태로 전송

<!DOCTYPE html>
<html>
  <body>
    <h3>button</h3>
    <input type="button" value="Click me" onclick="alert('Hello world!')">
    <hr>

    <h3>checkbox</h3>
    <input type="checkbox" name="fruit1" value="apple" checked> 사과<br>
    <input type="checkbox" name="fruit2" value="grape"> 포도<br>
    <input type="checkbox" name="fruit3" value="peach"> 복숭아<br>
    <hr>

    <h3>color</h3>
    <input type="color" name="mycolor">
    <hr>

    <h3>date</h3>
    <input type="date" name="birthday">
    <hr>

    <h3>datetime</h3>
    <input type="datetime" name="birthdaytime">
    <hr>

    <h3>datetime-local</h3>
    <input type="datetime-local" name="birthdaytime">
    <hr>

    <h3>email</h3>
    <input type="email" name="useremail">
    <hr>

    <h3>file</h3>
    <input type="file" name="myfile">
    <hr>

    <h3>hidden</h3>
    <input type="hidden" name="country" value="Norway">
    hidden filed는 사용자에 표시되지 않는다.
    <hr>

    <h3>image</h3>
    <input type="image" src="img/img_submit.gif" alt="Submit" width="48" height="48">
    <hr>

    <h3>month</h3>
    <input type="month" name="birthdaymonth">
    <hr>

    <h3>number</h3>
    <input type="number" name="quantity" min="2" max="10" step="2" value="2">
    <hr>

    <h3>password</h3>
    <input type="password" name="pwd">
    <hr>

    <h3>radio</h3>
    <input type="radio" name="gender" value="male" checked> 남자<br>
    <input type="radio" name="gender" value="female"> 여자<br>
    <hr>

    <h3>range</h3>
    <input type="range" name="points" min="0" max="10" step="1" value="5">
    <hr>

    <h3>reset</h3>
    <input type="reset">
    <hr>

    <h3>search</h3>
    <input type="search" name="googlesearch">
    <hr>

    <h3>submit</h3>
    <input type="submit" value="Submit">
    <hr>

    <h3>tel</h3>
    <input type="tel" name="mytel">
    <hr>

    <h3>text</h3>
    <input type="text" name="myname">
    <hr>

    <h3>time</h3>
    <input type="time" name="mytime">
    <hr>

    <h3>url</h3>
    <input type="url" name="myurl">
    <hr>

    <h3>week</h3>
    <input type="week" name="week_year">
  </body>
</html>

select

복수개의 리스트에서 복수개의 아이템을 선택할 때 사용

서버에 전송되는 데이터는 select 요소의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로하여 key=value의 형태로 전송

함께 사용할 수 있는 태그는 다음과 같다

<!DOCTYPE html>
<html>
  <body>
    <select name="cars1">
      <option value="volvo" selected>Volvo</option>
      <option value="saab" disabled>Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>

    <select name="cars2" size="4" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi" selected>Audi</option>
    </select>

    <select name="cars3">
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars" disabled>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
    </select>
  </body>
</html>

textarea

textarea 태그는 여러 줄의 글자를 입력할 때 사용

<!DOCTYPE html>
<html>
  <body>
    <textarea name="message" rows="10" cols="30">Write something here</textarea>
  </body>
</html>

button

button 태그는 클릭할 수 있는 버튼을 생성

<input type="button">과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않음

button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있음

<!DOCTYPE html>
<html>
  <body>
    <button type="button" onclick="alert('Hello World!')">Click Me!</button>

    <input type="button" value="Click Me!" onclick="alert('Hello world!')">
  </body>
</html>

button 태그는 어트리뷰트만을 받아들이는 input 태그와 달리 콘텐츠로 문자열은 물론 HTML 요소를 받을 수도 있다는

장점이 있

오래된 IE를 지원해야 한다면 input 태그를 사용하는 것이 바람직

fieldset / legend

fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용

legend 태그는 fieldset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
      <fieldset>
        <legend>Login(제목 정의)</legend>
        Username <input type="text" name="username">
        Password <input type="text" name="password">
      </fieldset>
  </body>
</html>

저작자표시

'HTML' 카테고리의 다른 글

이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그 (0)	2023.01.27
목록(List)와 표(Table) 형식 표현을 위한 태그 (0)	2023.01.27
Hyperlink (0)	2023.01.27
텍스트 관련 태그 (0)	2023.01.26
웹페이지의 구성하는 기본 태그 (1)	2023.01.26

이미지

웹페이지에 이미지를 삽입하는 경우, img tag를 사용

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div>
    <img src="https://img.danawa.com/prod_img/500000/836/116/img/1116836_1.jpg?shrink=330:330&_v=20100624115551" width="100">
</div>
<div>
    <img src="img/dogs.jpg" width="100">
</div>
<div>
    <img src="assets/images/wrongname.gif" alt="이미지가 없습니다.">
</div>
</body>
</html>

첫번째는 절대경로 url로 설정

두번째는 상대경로 파일위치로 설정

세번째는 이미지가 없을때 alt 메세지 나오게 설정

미디어

audio

audio 태그는 HTML5에서 새롭게 추가된 태그

IE8 이하에서는 사용할 수 없음

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <audio src="mp3/test.mp3" controls></audio>
</div>
</body>
</html>

source

웹브라우저 별로 지원하는 음악 파일 형식이 다름

파일 형식에 따라 재생되지 않는 브라우저가 존재한다는 뜻

source 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있음

type 어트리뷰트는 생략 가능

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<audio controls>
    <source src="mp3/test.mp3" type="audio/mpeg">
    <source src="mp3/test.ogg" type="audio/ogg">
</audio>

</body>
</html>

비디오

video 태그는 HTML5에서 새롭게 추가된 태그

IE8 이하에서는 사용할 수 없음

audio 태그와 마찬가지로 파일 형식의 차이 문제가 발생할 수 있음

source 태그를 사용하여 형식 차이 문제를 해결

type 어트리뷰트는 생략 가능

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<video width="640" height="360" poster="mp4/test_poster2.jpg" controls>
  <source src="mp4/test2.mp4" type="video/mp4">
  <source src="mp4/test2.webm" type="video/webm">
</video>

</body>
</html>

poster 이미지 파일 지정

동영상 파일 경로 지정

저작자표시

'HTML' 카테고리의 다른 글

사용자와의 커뮤니케이션을 위한 폼 태그 (0)	2023.01.27
목록(List)와 표(Table) 형식 표현을 위한 태그 (0)	2023.01.27
Hyperlink (0)	2023.01.27
텍스트 관련 태그 (0)	2023.01.26
웹페이지의 구성하는 기본 태그 (1)	2023.01.26

CO_JUN 개발일지

전체 글

변경사항들 버전 관리 (commit, reset, revert, SourceTree로 진행 해보기 )

프로젝트의 변경사항들을 타임캡슐(버전)에 담기

Git에서 과거로 돌아가는 두 방식

과거로 돌아가기 실습

reset 하기 전 시점으로 복원해보기

Replace Lions with Leopards의 커밋 되돌려보기

reset 사용해서 revert 전으로 되돌아가기

커밋해버리지 않고 revert하기

SourceTree로 진행 해보기

'GitHub' 카테고리의 다른 글

Git 시작하기

Git 전역으로 사용자 이름과 이메일 주소를 설정

소스트리로 해보기

Git의 관리에서 특정 파일/폴더를 배제 하기

'GitHub' 카테고리의 다른 글

CSS 기본 문법

CSS란?

CSS3의 용어

HTML과 CSS의 연동

Reset CSS 사용하기

사용자와의 커뮤니케이션을 위한 폼 태그

select

'HTML' 카테고리의 다른 글

이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그

미디어

'HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바