KDT 포스코X코딩온 웹 풀스택 과정 10기
개발자를 도전하기 위해 포스코와 코딩온에서 지원하는 웹개발자 풀스택 과정을 신청하였다.
수업방식은 오프라인으로 진행된다.
수업기간 : 2023.10.23 ~ 2024.04.15
지금부터 풀스택 과정을 기록하도록 하겠다.
- OT
- git 사용법
- HTML 설명 및 실습
2023.10.23 ~ 2023.10.24
2023.10.23 [OT 진행]
- 자기소개 타임
- 학원의 방향성 및 커리큘럼 소개
[Git 사용법 배우기 ]
- 첫날에 Git 사용법을 배운다. Git이란? 깃은 마치 시간 여행을 할 수 있는 매직 박스라고 생각하면 된다.
코드가 어떻게 변했는지 기록을 남겨주고, '커밋'이라는 명령어를 통해 그 순간으로 돌아갈 수 있다.
📌 Git의 설치 방법 (Window)
- https://git-scm.com/downloads
설치가 완료되면 git bash 설치가 된다. git bash를 실행하여 초기 세팅을 해준다.
git config --global user.name "사용자이름"
git config --global user.email "이메일@xxx.com"이름이 홍길동, 메일이 hong@xxx.com이라면,
git config -- global user.name "홍길동"
git config -- global user.email "hong@xxx.com"
이렇게 입력한다.
📌 본인이 등록한 사용자 확인방법
git config --list 입력 후
user.name
user.email 확인해 보면 된다.
Git의 대표적인 명령어
Git init
Git add .
GIt commit -m "study : kdt10"
Git push origin main
1. Git init :
* 최초 프로젝트를 진행하게 되면 생성한다. 생성하게 되면 이 디렉터리들의 파일들을 Git이 추적하게 된다.
[ 해당 디렉터리 내에 숨겨진 폴더. git/ 폴더가 생성됨]
2. git add . :
* 현재 변경된 사항들을 모두 저장을 해준다. 이제 이 변경된 사항들은 다음 커밋에 포함된다.
3. git commit -m "study : kdt10":
* 변경 사항들을 커밋한다. 설명란에 Study:kdt10이라는 간단한 설명과 함께 저장소에 기록된다.
꼭 push를 해줘야 한다. 그렇지 않으면 원격 저장소에 업데이트되지 않는다.
4. git push origin main :
* 변경 사항들을 main 브랜치에 push한다. origin이라는 원격 저장소에 업데이트를 전송한다.
git의 대한 내용은 많으니 차츰차츰 설명해 나가도록 하겠다.
2023.10.24 [HTML]
📌 HTML 이란?
HTML(Hypertext Markup Language)
- 마크업 언어 : 태그를 이용해서 구조화하는 언어
📌 HTML 구조
- HTML5 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정한다.
- 실제적인 HTML 문서는 2번째 행부터 시작 <html> </html> 사이에 작성한다.
- <head>와 </head> 사이에는 HTML 문서 정보를 정의하는 코드가 포함된다.
[ 제목, 저장방식, 브라우저의 크기, 검색 등등]
- 웹 브라우저에 출력되어 사용자 눈에 보이는 곳은 <body>와 </body> 사이에 위치한다.
📌 <head> 태그
- HTML 문서의 메타 데이터와 문서 정보를 정의하는데 사용되는 태그
● title : HTML의 문서의 제목
● style : HTML 문서의 Style 정보 정의 ( CSS 사용 )
● link : 외부 리소스와 연결정보를 정의 ( CSS 파일 연계에 사용)
● script : Javascript 를 정의하는 공간
● meta : 페이지 설명, 키워드, 저자 웹사이트 소개, 검색엔진 등에 사용된다.
📌 <body> 태그
● HTML 문서의 실제 콘텐츠를 정의하는데 사용된다.
● 다양한 태그를 사용하여 웹페이지의 구조를 설계할 수 있다.
https://www.advancedwebranking.com/seo/html-study/#doctype
📖 HTML의 기본 문법
📌 HTML 기본 문법, 요소
- HTML은 시작 태그(open tag), 종료 태그(close tag)로 구성된다. 종료 태그는 태그명 앞에 슬래시(/)가 있다는 것만 다르고 시작 태그와 같다. 그리고 시작 태그와 종료 태그, 콘텐츠를 합쳐서 요소(element)라고 한다.
| <title>Hello HTML</title> |
앞에 <title>은 시작 태그이며, 끝에 슬래시(/)로 끝나는 </title>은 종료 태그이다. 태그들 사이에 있는 Hello HTML은 콘텐츠라고 한다.
시작 태그, 끝나는 태그, 콘텐츠를 합쳐 요소(element)라고 한다.
📌 콘텐츠가 없는 문법 (빈 요소)
- 콘텐츠가 없는 문법은 앞뒤로 감싸야할 콘텐츠가 없으므로 시작 태그만 사용한다. 그래서 내용이 비어 있다는 의미로
빈 태그(empty tag)라고도 한다.
EX) <br/>, <hr/>, <input/> 등이 있다.
📌 HTML 기본 문법, 속성
- 속성은 기능을 보충하는 역할을 한다. 쉽게 말해, 옵션이라고 생각하자. 속성은 사용해도 되고 안 해도 되고, 여러 개를 사용해도 된다.
하지만 태그 없이 단독으로 사용할 순 없다. 속성명과 속성값으로 구성된다.
| <태그명 속성명="속성값"> |
일반적으로 속성을 사용할 때, 속성명은 따옴표 없이 작성하고 값은 큰따옴표("") 안에 작성한다.
속성값이 여러 개인 경우에는 하나의 큰따옴표 안에 쉼표(,)로 구분해 값을 나열하면 된다.
📌 HTML 기본 문법, 주석
- 단축키
주석 지정 Ctrl + /
주석 해제 Ctrl + /
- 주석(comment)은 실행결과가 표시되지 않지만, 코드에 메모나 설명을 작성할 경우 사용한다.
<!-- 주석 내용 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 주석이라 안보여요 -->
<p>Hello HTML!</p>
</body>
</html>| 실행결과 : Hello HTML |
- 실행결과 "Hello HTML"만 출력되는 것을 확인할 수 있을 것이다.
📌 부모 자식 관계
body의 자식은 <h1>, <p>, <ol> 태그이다.
body의 자손은 <li> 태그이다
<h1>, <p>, <ol> 태그는 서로 형제 관계이다
<ol> 태그의 자식은 <li> 태그이다.
📌 HTML의 사용태그
HTML의 태그의 종류는 정말 다양하다. 가장 많이 사용되는 몇 가지 태그만 설명하도록 하겠다.
제목 태그, <h1~6> </h1~6>
● 제목을 뜻하는 Heading 약자, <h> 사용
● 하나의 HTML 문서에서는 하나의 h1 태그를 권장
● 웹 검색 엔진이 제일 먼저 검색하는 태그
본문 태그, <p>
● 본문을 뜻하는 paragraph의 약자 <p> 사용
● 본문을 적기 위한 태그
줄 바꿈 태그, <br>
● Break의 약자
● 줄을 바꿔주는 역할을 한다.
목록, <ul>, <li>
● ul (unordered list) 순서가 없는 목록
● ol (ordered list) 순서가 있는 목록
이 외에도 다양한 HTML 태그가 많으니 검색해서 공부를 해보도록 하자.
2023.10.24 [ HTML 실습하기 ]
•카페 이름은 <h1>
•메뉴 이름은 <h2>
•카페 전체 음료 리스트는 <ul> 태그, 음료 최소 3개
• <ul>의 자식 요소 <li> 요소를 넣고 가격을 표시
•<ul> 태그 아래에 수평 줄을 추가하고 그 아래에 각각 음료에 대한 설
명을 <p> 태그를 사용하여 표시
•문자 꾸미기 태그도 사용!
이제까지 배운 태그들을 적용해 보는 실습시간을 가졌다.
지금까지 배운 것을 정리했다. 현재 강의 초반 부분이라 어려운 부분은 없었다.
좋은 점은 중간중간 실습이 있어서 내가 배운 것을 복습할 수 있는 시간이 있다는 게 장점이다.
앞으로 내 코딩실력이 어떻게 될지... 기록하면서 남겨보도록 하겠다..
'국비지원 > 부트캠프' 카테고리의 다른 글
| [KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (6) | Javascript (2) | 2023.11.01 |
|---|---|
| [KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (5) | Javascript (2) | 2023.10.31 |
| [KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (4) | CSS (0) | 2023.10.30 |
| [KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (3) | CSS (0) | 2023.10.27 |
| [KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (2) | HTML,CSS (0) | 2023.10.25 |
