<img>

이미지를 삽입할 때 사용하는 태그이다.

<img src="이미지 경로" alt="대체 텍스트" width="숫자" height="숫자">

  • src : 이미지 파일 경로를 지정한다.
  • alt : 이미지가 제대로 표시되지 않는 상황에서 이미디 대신 표시되는 텍스트를 지정한다.
  • width, height : 이미지 크기를 조정한다. 단위는 px.

웹에서 사용하는 이미지 파일 형식

 GIF (Graphic Interchange Form) 

 색상 수 최대 256가지 - 작은 이미지에 사용, 투명한 배경 

 JPG (Joint Photographic Experts Group) 

 사진 기본 형식 

 PNG (Portable Network Graphics) 

 투명한 배경 + 다양한 색상 

 SVG (Scalable Vector Graphics) 

 벡터 이미지 - 아이콘이나 로고 이미지에 사용 



  1. hoho 2018.04.19 10:19 신고

    한 수 배우고 갑니다^^

표는 행(row)과 열(column)이 만나 이루는 셀(cell)들로 구성된다.

<table border="1">

<tr>

<th></th><th>Column 1</th><th>Column</th><th>Column 3</th>

</tr>

<tr>

<th>Row 1</th><td>Cell 1-1</td><td>Cell 1-2</td><td rowspan="2">Cell 1-3</td>

</tr>

<tr>

<th>Row 2</th><td colspan="2">Cell 2-1</td>

</table>


<table>, <tr>, <td>, <th>

<table> 태그를 이용해 표 전체 윤곽을 잡고 <tr> 태그로 행(row)을 만든 후 <td> 태그로 각 행마다 들어갈 셀(cell)을 만든다.
첫 번째 행과 열을 셀의 제목으로 하는 경우가 많은데 <td> 대신 <th> 태그를 사용하면 글자가 굵게 표시되고 중앙에 배치된다.

<table border="1">

<tr>

<th colspan="숫자">Table Header Cell</th>

<td rowspan="숫자">Table Cell</td>

</tr>

</table>

  • colspan : 셀을 가로로 합친다.
  • rowspan : 셀을 세로로 합친다.

<thead>, <tbody>, <tfoot>

표를 각각 제목(head), 본문(body), 요약(foot)으로 나눌 때 사용하는 태그이다.

<table>

<thead>

<tr></tr>

</thead>

<tbody>

<tr></tr>

</tbody>

<tfoot>

<tr></tr>

</tfoot>

</table>



깃허브 회원가입 후 로그인한다.



New Repository를 만든다. name을 정하고 Public으로 설정! (Private는 유료)
Initialize this repository with a README는 프로젝트에 대한 설명을 적는 곳으로 만들려면 체크, 아니면 해제
Create repository를 클릭하여 원격저장소를 만든다.


init한 로컬저장소와 원격저장소를 연결하려면

$ git remote add origin .git 주소


원격인 origin과 로컬인 master를 동기화하려면

$ git push -u origin master

$ git push --tags

'-u origin master'는 처음 1번만 하면 되는데, GitHub Login 창이 뜬다. 로그인 후,
커밋한 내용이 원격으로 업로드된 것을 확인할 수 있다. 항상 작업이 끝나면 push하여 원격에 업로드한다.

태그를 업로드하려면 '--tags'를 부가적으로 붙여야 한다.


기존에 설정해놓은 로컬저장소 외에 다른 로컬저장소를 원격저장소와 연결하려면

$ git clone .git 주소 .

. 은 현재 폴더를 뜻한다.
. 대신 폴더 이름을 지정하면 해당 폴더를 로컬저장소로 지정한다.


$ git pull

이후부터는 작업을 시작할 때 pull을 꼭 해서 다른 기기에서 작업한 내용을 업데이트하고 이어서 작업한다.


Branch

브랜치 목록을 확인하려면

$ git branch

기본 브랜치 이름은 master이다. 현재 해당되는 브랜치 앞에 *가 표시된다.


브랜치를 만들려면

$ git branch 브랜치 이름


해당 브랜치로 전환하려면

$ git checkout 브랜치 이름/커밋ID/태그 이름

$ git checkout -b 브랜치 이름

-b를 붙이면 브랜치를 만들고 해당 브랜치로 전환된다. 체크아웃은 커밋이나 태그로도 가능하다.


모든 브랜치의 기록을 보려면

$ git log --branches

$ git log --branches --graph

$ git log --branches --graph --oneline

--graph를 붙이면 그래프로 표현된다. 서로 커밋상태가 각자의 길을 걷고 있을 때 보기 쉽게 나타난다.
--oneline을 붙이면 보다 더 간결하게 볼 수 있다.


브랜치간의 비교는

$ git log 브랜치 이름 1..브랜치 이름 2

$ git log -p 브랜치 이름 1..브랜치 이름 2


$ git diff 브랜치 이름1..브랜치 이름 2

'브랜치 이름 1'에는 없고 '브랜치 이름 2'에 있는 것만 보여준다.
-p를 붙이면 '브랜치 이름 1'에는 없고 '브랜치 이름 2'에 있는 소스코드만 보여준다.
diff는 소스코드까지 비교하여 보여준다.


'브랜치 이름 2'를 '브랜치 이름 1'에 병합하려면 '브랜치 이름 1'으로 체크아웃 하고

$ git merge 브랜치 이름 2

반대로도 실행하면 '브랜치 이름 1'과 '브랜치 이름 2'가 완전히 똑같아진다.


다른 파일이거나 같은 파일이어도 다른 위치의 내용은 병합되지만, 같은 위치의 내용이 다를 경우 요렇게 오류가 생긴다.
이런 경우 vim 에디터에 들어가서 직접 수정하면 된다. 충돌로 생긴 내용은 삭제한다.


병합 후 필요없는 브랜치를 삭제하려면

$ git branch -d 브랜치 이름

$ git branch -D 브랜치 이름

강제로 삭제하려면 -D를 사용한다.


수정이 다 끝나지 않은 상태에서 다른 브랜치로 이동할 때! 임시저장하려면 (add된 파일만 가능)

$ git stash

$ git stash list

$ git stash apply

$ git stash drop

$ git stash pop = git stash apply; git stash drop;


$ git reset --hard

list는 임시저장 목록을 볼 수 있다.
apply는 임시저장했던 파일을 다시 수정할 수 있게 한다.
drop은 최신 임시저장된 내용을 삭제한다.
pop은 apply와 drop 모두 진행된다.


reset하면 임시저장과 상관없이 가장 최신 상태로 변경된다.


Tag

태그를 만들려면

$ git tag 태그 이름(버전)

$ git tag 태그 이름(버전) 커밋ID/브랜치 이름

$ git tag -a 태그 이름(버전) -m "태그 설명"

커밋ID나 브랜치 이름을 지정한 곳에 태그가 붙는다. 만약 지정하지 않으면 현재 위치한 커밋에 태그가 붙는다.
-a를 붙이면 annotated tag라는 뜻으로 태그에 대한 설명을 추가할 수 있다.


태그 목록을 보려면

$ git tag


태그를 삭제하려면

$ git tag -d 태그 이름(버전)


  1. 2017.10.16 02:01

    비밀댓글입니다

프로젝트를 Git으로 관리하고 싶다면

$ git init

.git이 추가된다.


해당 프로젝트 파일의 상태를 확인하려면

$ git status


'Untracked files'에 속한 파일은 처음 파일이 생성되었을 때로 커밋되지 않는다.


파일 변경 후 git add를 하지 않았을 때 나타나는 화면이다. git add를 해야 커밋할 수 있다.


커밋할 수 있는 파일은 'Changes to be committed'에 속한다.


파일을 커밋하고 싶다면

$ git add 파일

stage area 상태로 만든다.


버전을 만들고 싶다면

$ git commit

$ git commit -a

$ git commit -m "버전"

$ git commit -am "버전"

$ git commit --amend

vim 에디터가 실행된다. 정보를 입력하고 종료한다.
-a를 붙이면 git add가 자동으로 실행되고 vim 에디터가 실행된다. 단, 한번도 add를 하지 않은 파일에는 적용되지 않는다.
-m을 붙이면 vim 에디터에서 작성할 버전을 바로 작성한다.
-am을 붙이면 git add가 자동으로 실행되고 vim 에디터에서 작성할 버전을 바로 작성할 수 있다.

--amend를 붙이면 커밋 메시지를 수정할 수 있다.


커밋 히스토리를 보려면

$ git log

$ git log -p

$ git log --reverse

-p는 각 커밋의 diff 결과를 보여준다. 

--reverse는 히스토리를 거꾸로 출력하여 최근 커밋이 아닌 첫번째 커밋이 먼저 나온다.


$ git diff

$ git diff commitID commitID

git add 하기 전에 파일 변경 내용을 확인할 수 있다.
커밋 후 커밋ID끼리 변경 내용을 비교할 수 있다.


과거 버전으로 돌아가려면

$ git reset commitID --hard

$ git revert commitID

돌아가고자 하는 커밋ID를 입력하면 된다.
reset은 완전 삭제, revert는 기록이 남는다. 원격저장소에 올리기 전이라면 reset, 올린 후라면 revert!



Git 사이트에서 'Downloads for Windows'를 클릭하여 내려받는다. Git Bash를 열어서 사용하면 된다.


$ git config --global user.name minimelody

$ git config --global user.email minimelodi@naver.com

가장 먼저 해야 하는 것은 사용자 이름과 이메일 주소를 설정하는 것이다. 딱 한 번만 하면 된다.


자주 사용하는 명령어

pwd : 현재 위치
cd 디렉터리명 : 해당 디렉터리로 이동
cd .. : 부모 디렉터리로 이동
mkdir 디렉터리명 : 해당 디렉터리 생성 (프로젝트 생성)
ls -al : 현재 위치한 프로젝트 안에 있는 파일 정보
clear : Git Bash 작업 기록 지우기
q : (END) 떴을 때 나가기
cat 파일 : 해당 파일 내용
cp 기존파일 생성파일 : 파일 복사


vim 에디터 사용법

vim 파일 : 해당 파일 생성하고 vim 시작
i : 입력 모드 시작
esc : 입력 모드 종료
:wq : 파일 저장하고 vim 종료


<ul>

<li>Unordered List</li>

<li>Unordered List</li>

</ul>

<ol>

<li>Ordered List</li>

<li>Ordered List</li>

</ol>


<ul>, <li>

<ul> 태그 안에 <li> 태그를 사용해 각 항목을 표시하면 순서 없는 목록을 만들 수 있다. 각 항목 앞에는 불릿(bullet)이 붙는다.

<ul>

<li>List Item</li>

</ul>


<ol>, <li>

<ol> 태그 안에 <li> 태그를 사용해 각 항목을 표시하면 순서 있는 목록을 만들 수 있다. 각 항목 앞에는 숫자가 붙는다.

<ol>

<li>List Item</li>

</ol>


<h1><a href="https://google.co.kr" target="_blank">Google</a></h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>

Soluta, adipisci cupiditate reiciendis voluptatum, sapiente mollitia quam incidunt!<br>

Odio, modi quia dolore non fugit delectus consequuntur officiis, nisi ipsa facilis iusto.</p>


<hn>

일반 텍스트보다 크고 진하게 표시되는 제목 태그이다. 가장 크게 표시되는 <h1>부터 가장 작게 표시되는 <h6>까지 있다.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>


<p>

텍스트를 표시할 때 가장 많이 사용되는 태그이다. 텍스트가 브라우저 너비 안에서 줄바꿈 없이 한 줄로 표시된다.

<p>Paragraph</p>


<br>

줄을 바꾸고 싶다면 그 위치에 <br> 태그를 사용한다.

<br>


<a>

링크를 만드는 태그로 텍스트나 이미지와 함께 사용한다.

<a href="링크 주소" target="_blank"> 텍스트 or 이미지 </a>

  • href : 속성값으로 링크를 이용해 연결할 주소를 입력한다.
  • target : 링크 내용이 표시될 위치를 지정한다. 기본값은 _self로 현재창에서 열리는데 _blank로 지정하면 새 창에서 열린다.



외모 - 테마

현재 설치된 테마가 나타난다. '활성화'가 되어 있는 테마가 적용된다. '새로 추가'를 클릭한다.



'테마 업로드'나 '테마 검색 입력창'을 통해 새 테마를 설치할 수 있다. 설치가 완료되면 '활성화'를 클릭한다.


설정 - 고유주소

고유주소란 작성한 콘텐츠의 글이나 페이지에 접속할 수 있는 URL이다.
처음에는 '기본'으로 선택되어 있다. '글 이름'으로 선택하고 '변경 사항 저장'을 클릭한다.


글 - 새 글 쓰기

'제목' 입력창과 본문 영역을 입력하고 '공개하기'를 클릭한다.


+ Recent posts