엘리스 SW 트랙 1주차 요약 정리

Hyejis·2022년 12월 4일
htmlcss엘리스
1

엘리스

목록 보기
2/11

HTML

  • 웹 표준: 웹사이트 작성 시 따라야 하는 공식 표준이나 기술 규격
  • 웹 접근성: 장애 여부 상관 없이 모두가 웹 사이트를 이용할 수 있게 하는 방식
  • 크로스 브라우징: 모든 브라우저 또는 기기에서 웹 사이트가 제대로 작동하도록

1. HTML

: 웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정하는 언어

1) HTML 기본 태그

① HTML 태그 구성 요소

<열린태그 속성 = "속성값">컨텐츠</닫힌태그>
---------------------------------------
- 태그명: HTML이 갖고 있는 고유의 기능, <열린태그></닫힌태그>형태로 입력
- 컨텐츠:태그 사이에 있는 내용물, 이름이나 마찬가지인듯?
- 속성: HTML 태그가 갖고 있는 추가 정보
- 속성값: 어떤 역할을 수행할지 구체적인 명령을 진행하는 것

② HTML 문서의 기본 구조

<!DOCTYPE html>					// HTML5 문서 선언 태그
<html>							// HTML 문서의 시작과 끝을 의미
<head>							// 웹 사이트의 요약 정보를 담는 영역, 노출X
	<meta charset="UTF-8">		// character setting의 약자, 모든 문자를 깨짐 없이 표시
    <title>웹프로그래밍</title>	// 탭에 나타나는 제목을 적는 태그
</head>
<body>							// 웹 사이트에서 눈에 보이는 정보를 담는 영역, 노출O
</body>
</html>

③ img 태그

<img> 정보성을 갖고있는 이미지를 삽입, 닫힌 태그 없음.
(background의 경우, 정보성이 없는 이미지)

<img src="go.png" alt="이미지">
------------------------------
src 속성: 삽입할 이미지의 파일 경로
alt 속성: 이미지를 출력하지 못할 경우, 대체할 텍스트 정보

④ h 태그

<h> Heading의 약자로 제목이나 부제목을 표현, 내림차순으로 숫자가 작음.

<h1>heading</h1>		// 제일 big
<h2>heading</h2>
...
<h6>heading</h6>		// 제일 small

ex) style: 텍스트를 꾸며주는 속성

<h1 style="color:pink">안녕!</h1>	// 본문 영역에 분홍색으로 안녕! 출력

속성값: 텍스트 색상을 설정 "color:pink"
컨텐츠: 안녕!

⑤ p 태그

<p> paragraph의 약자, 본문 표현.

<p>paragraph</p>		// 본문

⑥ ol, ul 태그

<ol> Ordered list의 약자, 순서가 있는 리스트 생성. 메뉴버튼 만들 때 사용

<ol>
	<li>메뉴1</li>	// 1. 메뉴1
    <li>메뉴2</li>	// 2. 메뉴2
	...
</ol>

<ul> Unordered list의 약자, 순서가 없는 리스트 생성. 메뉴 버튼을 만들 때 사용

<ul>
	<li>메뉴1</li>		// · 메뉴1
    <li>메뉴2</li>		// · 메뉴2
    ...
</ul>

⑦ a 태그

<a> 텍스트나 이미지를 클릭 시, 다른 웹페이지로 이동

<a href=" " target="_blank">페이지</a>	// 하이퍼링크
---------------------------
- href: 연결할 웹페이지의 URL 주소
- target: 웹페이지를 연결하는 방식

ex)

<a href=" " target="_blank">
	<img src="logo.png" alt="이미지">	// 해당 이미지를 누르면 지정 페이지로 이동
</a>

2) 구조 태그

① header, nav 태그

<header> 웹사이트의 머리글을 담는 공간
<nav> 메뉴 버튼을 담는 공간(navigation). ul, lu, a 태그 등이 사용

<header>					// 상단 영역
	<nav>					// 메뉴 영역
    </nav>
</header>

② main, article 태그

<main> 문서의 주요내용을 담는 태그, 인터넷 익스플로러는 지원X-> rol="main" 필수 입력
<article> 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정, 타이틀 h 태그 필수

<main role="main">			// 본문 영역
	<article>				// 정보 영역
    </article>
</main>

<footer> 가장 하단에 들어가는 정보를 표기할 때 사용
<div> 임의 공간 만들 때 사용. 주소, 이메일, 사업자 등록번호 등 여러 정보를 기입, <p> 태그 사용

<footer>					// 하단 영역
	<div>					// 하단 정보 영역
    </div>
</footer>

3) HTML 태그의 성격

① Block, Inline 요소

Block 요소: <p> - y축 정렬 형태로 출력(줄바꿈 현상), 공간을 만들 수 있고 상하 배치 작업 가능
Inline 요소: <a> - x축 정렬 형태로 출력(한 줄에 출력), 공간을 만들 수 없고 상하 배치 불가능

2. CSS(Cascading Style Sheet)

HTML로 작성된 정보를 꾸며주는 언어, 문서의 레이아웃과 스타일 정의

1) CSS 구성요소

선택자 {속성: 속성값;}
-----------------------
선택자: 디자인을 적용할 HTML 영역
속성: 어떤 디자인을 적용할지 정의
속성값: 어떤 역할을 수행할지 구체적으로 명령, 세미콜론(;) 필수

① 속성 property

h1{
	font-size: 10px;				// 폰트사이즈
    font-family: sans-serif;		// 글꼴
    color: pink;					// 폰트 색깔
    background-color: white;		// 배경색
    text-align: center;				// 텍스트 정렬
}

② CSS 연동 방법

ⓐ Inline Style Sheet

<h1 style="color: red;">ooh!</h1>	// 태그 안에 직접 원하는 스타일 적용

ⓑ Internal Style Sheet

<head>
	<style>
    	h1 { backgorund-color: black;}	// style 태그 안에 넣기
	</style>
</head>

ⓒ External Style Sheet
html, css 각각의 문서에 따로 관리해 가독성이 높고 유지보수가 쉽다.

<head>
	<link rel="stylesheet" href="style.css">	// link 태그로 불러오기
</head>

③ CSS 선택자

ⓐ Type: 태그

<style>
	h2{color:red;}			// 특정 태그에 스타일을 적용
</style>
...
	<h2>ho!</h2>

ⓑ Class: 태그 별명(.)

<style>
	.blu{color:blue;}	// 클래스 이름으로 특정 위치에 스타일을 적용
</style>
...
	<h2 class="blu">ho!</h2>

ⓒ ID: 태그 이름(#)

<style>
	#ful{color:green;}	// ID를 이용하여 스타일을 적용
</style>
...
	<h2 id="ful">ho!</h2>

④ 부모 자식 관계

// in html
<header>
	<h1>ho!</h1>				// header, h1, p: 부모 자식 관계
    <p>ho!</p>					// h1, p: 형제관계
</header>
/* in css, 간편하지만 main,footer 영역에 있는 h1, p도 설정됨 */
header{color:red;}			
h1{color:blue;}
p{color:green;}

/* in css, 원하는 영역에만 css 설정->부모를 구체적으로 표기 */
header{color:red;}
header h1{color:blue;}
header p{color:green;}

⑤ cascading

순서: 나중에 적요한 속성값의 우선순위가 높음
디테일: 더 구체적으로 작성된 선택자의 우선순위가 높음
선택자: style>id>class>type 순으로 우선순위가 높음

⑥ width, height, font-, border-, background-

<p class="paragraph">no!</p>
.paragraph{
	width: 100px;								/* width */
	height: 100px;								/* height */
    font-size: 20px;							/* font- */
    font-family: Arial, sans-serif;
    font-style: italic;
    font-weight: bold;
    border-style:solid;							/* border */
    border-width: 10px;
    border-color: red;
    background-color: pink;						/* background- */
    background-image:url(이미지 경로);
    background-repeat: no-repeat;
    background-position: left;
}
-----------------------------------
.width: 선택한 요소의 넓이를 설정. 고정값(%), 가변값(px)
.height: 선택한 요소의 높이를 설정
.font-family: 브라우저마다 지원하는 폰트가 달라 sans-serif를 마지막에 디폴트 값으로 작성
.font-weight: 100~900 사이의 숫자를 입력할 수 있음
.border-style: 실선(solid), 점선(dotted)
.border-: 한 줄에 이어 쓸 수 있음
.background-repeat: x축으로 반복(repeat-x), y축으로 반복(repeat-y), 반복X(no-repeat)
.background-position: 공간 안에서 이미지의 좌표를 변경할 때 사용. top, bottom, center, left, right 등

2) Transform

① transform: rotate, scale, skew, translate

<style>										/* html에서 작성하는 경우*/
	.transition {
    	transform: rotate(45deg);			/* 회전 */
        transform: scale(2,3);				/* 확대, 축소 */
        transform: skew(10deg, 10eg);		/* 각도 변경 */
        transform: translate(10px, 10px);	/* 위치 변경 */
</style>
-----------------------
.rotate(##deg): 입력한 각도만큼 회전, 음수 입력 가능
.scale(x,y): 숫자=비율, width를 x배, height를 y배 확대
.skew(x deg, y deg): x축, y축을 기준으로 입력한 각도만큼 비틂
.translate(x px, y px): 선택 오브젝트의 좌표변경

② prefix 접두사

다른 버전의 브라우저에서의 실행을 원할 경우

<style>
	.transition{
    	-webkit-transform: translate(10px, 10px);	/* 크롬, 사파리 */
        -moz-transform: translate(10px, 10px);		/* 파이어폭스 */
        -ms-transform: translate(10px, 10px);		/* 익스플로러 9.0 */
        -o-transform: translate(10px, 10px);		/* 오페라 */
</style>

③ transition-property, duration, timing-function, delay

<style>
	.transition{
    	transition-property: width;
        transition-duration: 2s;
        transition-timing-function: linear;		/* linear: 일정하게 */
        transition-delay: 1s;					/* 1s: 1초 후 */
</style>
---------------------
.property: 효과를 적용하고자 하는 css속성
.duration: 효과가 나타나는데 걸리는 시간
.timing-function: 효과의 속도
.delay: 특정 조건 하에서 효과 발동

④ 가상선택자 hover

css에서 미리 만들어 놓은 클래스, 마우스를 올렸을 때 라는 조건

<style>
	.transition: hover{width: 10px;}
</style>

⑤ transition 종합

마우스를 올리면 1초 후에 width 값이 300px로 2초 동안 일정한 속도로 변하는 애니메이션 효과

<style>
	.transition{width 2s linear 1s;}
    .transition: hover{width: 10px;}	
</style>

3) Animation

<style>
.animation{
	animation-name: change
    animation-duration: 3s
    animation-timing-function: linear
    animation-delay: 1s
    animation-iteration-count: 6		/* 애니메이션 반복 횟수 */ 
    animationdirection: alternate		/* 애니메이션 진행 방향 */
    
@keyframes chage{
    from{width:10px;}
    to{width:30px;}
}
</style>
---------------------------
- alternate: form->to->from
- normal: from->to, from->to
- reverse:to->from, to->from

① tranform & animation

.box1{
	animation: rotation 1500ms infinite alternate;
}

@keyframes rotation{
	from{transform:rotate(-10deg);}
    to{transform:rotate(10deg);}
}

만약 prefix 작성 시, -webkit-을 @keyframes 안에 작성

.box1{
	animation: rotation 1500ms infinite alternate;
}

@-webkit-keyframes rotation{
	from{-webkit-transform:rotate(-10deg);}
    to{-webkit-transform:rotate(10deg);}
}

② css에서 구현하는 경우

#main article{
	transition-property: color;	
    animation-duration: 3s;
}
#main article:hover{
	color:red;
}

4) 미디어쿼리

pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 반응형 또는 적응형 웹사이트를 만들 때 사용되는 css구문

.media{
	width: 10px;
    height:10px;
    background-color:black;
}
@media (min-width: 320px) and (max-width:20px) {
	.media{
		width:20px;
    	height:20px;
    	background-color:white;
        border: yello solid 10px;
	}
    #intro h1 a{
    	text-align:center;
        padding: 10px 10px 0 0			// 시계방향: 상, 우, 하, 좌
}
----------------------------
- min-width와 max-width로 브라우저의 가로폭 설정
- 브라우저의 가로폭이 최소 320px, 800px이 되었을 경우, 중괄호 아느이 css 속성으로 대체하겠다는 의미

① viewport

미디어쿼리가 작동하지 않는 문제 발생 시 viewport로 설정한 너비와 배율로 의도한 화면을 볼 수 있음

<meta name="viewport" content="width=device-width, initial-scale=1.0">
----------------------------------
- name="viewport": 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미, 
너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나
- .width=evice-width: viewport의 가로폭=디바이스의 가로폭
- .initial-scal=1.0: 비율은 항상 1.0

② css 속성상속

미디어쿼리 외부 영역에 있는 css 속성을 상속받음, 만약 상속을 받지 않고자 하면 속성값으로 none입력

.media{
	width: 10px;
    height:10px;
    background-color:black;				
}										/* 화면 클때 배경색 black */
@media (min-width: 320px) and (max-width:20px) {
	.media{
		width:20px;
    	height:20px;
    	background-color:none;			/* 미디어쿼리 안쪽 */
        border: yello solid 10px;		
	}									/* 화면 줄어들면 배경색 none */
}

3. GIT

1) 설치방법 및 초기 설정

① 설치방법

GIT사이트에서 환경에 맞는 git 파일을 다운 -> window: 시작메뉴 -> Git -> Git Bash 실행

② 초기설정

git --version								// git 정상적 설치 확인
git config --global user.name "hey"			// 사용자 이름 입력
git config --global user.email abc@def.yz	// 사용자 이메일 입력
git congig user.name						
// 프로젝트마다 다른 사용자 정보 지정(저장소 생성 후 --global 옵션 빼고 실행, user.email도 동일 방법)
git config --list							// 설정 정보 확인

③ Git 저장소 생성

cd a/b/s			// a폴더 안의 b폴더 안의 s폴더로 이동
git init			// 기존의 디렉토리를 git repository로 설정
ls -al				//  프로젝트 디렉토리에 .git 디렉토리 생성 및 저장소 생성 완료 확인
--------------------------------
Git을 사용할 프로젝트 폴더로 이동 후 실행, Initialized empty Git repository 출력 시 성공
ⓐ cd 명령어로 사용할 폴더로 들어가 git init 실행
ⓑ git init </지정 경로>로 실행
	- 현재 디렉토리 안에 fire 저장소 만들 경우: git init fire
	- document 디렉토리 안에 fire 저장소 만들 경우: git init document/fire

2) Git을 사용한 버전 관리

①파일의 상태 라이프 사이클, 세 가지 영역

ⓐ Untracked -> Unmodified -> Modified -> Staged
(Commit 시 Staged에서 Unmodified로 되돌아감)
ⓑ Working directory(Untracked) -> Staging area -> Git repository
(git add: Working directory -> Staging area)
(git commit: Staging area -> Git repository)

② 새로운 파일 생성

git add comment.js			// comment.js 파일을 준비영역으로 보냄 (Staging area)
git add .					// 한 번에 추가할 파일이 많을 시 현재 폴더를 대상으로 지정
git status					// Staging area의 어떤 파일이 변경되었는지 파일의 상태 확인

③ Git 저장소 반영

git commit -m "message" 	// .git 저장소 내에 staging 파일 저장
git commit --amend -m "ss"		// 앞에서 적은 메세지에 오타가 있거나 누락된 파일이 있을 경우
git log						// 저장소 반영 내역 확인 
------------------------------
- 준비 영역에 있는 파일들을 저장소에 반영, "": 생략 가능함, 반영한 내용을 추후 알 수 있도록.
- 원하는 파일만 커밋할 경우, app.py만 커밋, README는 커밋X
=> git reset README.txt; git add app.py; git commit -m "add app.py";

④ Git 관리 상태 확인

git status			// Staging file들의 상태 확인
git log				// .git repository에 존재하는 history 확인, 저장소 반영 내역 확인
git diff			// commit 된 파일 중 변경된 사항 비교
----------------------------
ⓐ git log -p/--patch -n
	-p/--patch: 각 commit의 수정 결과를 보여주는 diff와 같은 역할 수행
	-n: 상위 n개의 commit만 보여줌
ⓑ git log --stat
	--stat: 어떤 파일이 commit에서 수정되고 변경되었는지, 파일 내 라인이 추가되거나 삭제되었는지 확인
ⓒ git log --pretty=online
	--pretty=online: 각 commit을 한 줄로 출력
ⓓ git log --graph
	--graph: commit 간의 연결된 관계를 아스키 그래프로 출력
ⓔ git log -S gogo
	-S : 코드에서 추가되거나 제거된 내용 중 특정 텍스트(gogo)가 포함되어 있는지 검사

3) Git 가지치기

① Git Branch

독립적으로 어떤 작업을 진행하기 위한 개념, 각각의 Branch는 다음 Branch의 영향을 받지 않음

git branch mine			// branch 생성	현재 HEAD: master
git branch				// 현재 branch 확인
git checkout mine		// branch 전환	현재 HEAD: mine

② Git Navigation

git checkout zz	// snapshot의 hash 값을 이용해 과거의 파일 내용 확인
------------------------
- git checkout <snapshot_hash>: branch 전환 및 git log로 확인 가능한 snapshot을 넘나들때 사용
=> git branch hey; git checkout hey; git add m1.py; git commit -m "m1";
: hey branch를 만들고 m1.py 커밋
=> git checkout master; git merge pp; git branch -d pp; 
: pp브랜치 병합 뒤 삭제

③ fast-forward, Git merge

fast-forward: mine branch의 내용이 master branch에서 업데이트 된 내용으로 merge가 이루어짐

git checkout mine				// mine으로 위치 이동
git checkout master				// master로 위치 이동
git merge mine					// mine branch를 master branch에 병합
git log --graph --all			// commit graph를 확인
git branch --merged				// merge된 branch 확인
git branch -d <branch name>		// 필요없는 branch 삭제

④ Git Merge Conflict 해결

merge한 두 branch에서 같은 파일을 변경했을 때 충돌 발생

git status			// 어느 파일에서 충돌이 발생했는지 확인
---------------------------
충돌이 일어난 파일 열기-> 수정 완료 후,
'<<<<<<<', '=======', '>>>>>>>'이 포함된 행 삭제-> git add, git commit으로 다시 merge
: main.py를 열어 내용을 직접 수정한 뒤 커밋한다.
=> git add ho.py; git commit -m "ff"; 
	git checkout you; git merge me; 
    git checkout master; git merge me;
: ho.py를 커밋 후, you branch와 me branch 병합, me branch와 master branch 병합

4) 원격 저장소 받아오기

① Git clone

git clone (주소값)	//git clone 뒤에 clone 버튼으로 확인한 원격저장소의 주소 넣어주기
git remote add origin (주소값)	// 원격저장소, 로컬저장소 연결
git remote					// 연결된 원격 저장소 확인
git remote show origin		// 원격 저장소 살펴보기
git remote rename origin git_test	// 원격 저장소 단축 이름 origin-> git_test 변경
git remote rm git_test		// 주소가 변경되거나 필요없어진 저장소 삭제
---------------------------
- git clone: 기존의 git repository 복사
- gitlab 또는 github, 원하는 프로젝트에서 clone버튼 누르기 -> clone with HTTPS
- 주소값 예시) https://gitlab.com/group/project
- gitlab.com : 웹 호스트 서비스, /group: 그룹명, /project: 프로젝트명

② 원격 저장소 동기화

git pull		// 저장소 갱신 or 동기화
git fetch		// 저장소 갱신 or 동기화
git log origin/master	//git log 명령어로 변경된 파일 확인, merge
git merge origin/master	// fetch의 경우에만 실행
git push origin master	// 저장소 발행 or 변경 사항 전달
--------------------------
- pull: 원격 저장소에서 데이터 가져오기+병합(merge)
- fetch: 원격 저장소에서 데이터 가져오기
- push: 로컬 저장소에서 작업한 내용을 원격 저장소에 반영, 다른 사람이 작업한 것을 merge한 후에 push 가능
=> git remote add ho /my/document/git_remote_repository; git push ho master
: 주소에 ho라는 이름의 원격저장소 만들기, push해서 로컬 내용을 원격과 동기화
=> git pull origin master; git add go.py; git commit -m 'go!'; git push origin master
: 원격 저장소 내용이 변경되어 있을 때 push하기

③ Origin

git remote add origin https://gitlab.com/group/project
-------------------------------
- origin: 원격저장소의 단축 이름을 origin으로 지정, default값
git remote add myproject https://gitlab.com/group/project
-------------------------------
- origin이 아닌 다른 이름으로 원격 저장소 이름 지정
git remote -v
-------------------------------
- 지정한 저장소의 이름과 주소를 함께 볼 수 있음
profile
Hyejis
프론트를 시작으로 풀스택을 걸쳐 모든 분야를 아우르고 싶은 야망이 살짝 있는 아기 개발자입니다.

1개의 댓글

comment-user-thumbnail
박재훈
2022년 12월 4일

잘보고가요 ^^

답글 달기