[포스코x코딩온] 웹개발자 풀스택 과정 1주차 HTML

1일차(OT 및 환경세팅)

1. 자기소개

2. Github 회원가입

3. Visual Studio Code 설치

4. Visual Studio Code 확장 프로그램 설치

5. Git 설치

6. Github에서 Repository 만들고 가져오기

$git config --global init.defaultBranch main
$git config --global user.name "프로필이름"
$git config --global user.email "이메일주소"

코드를 입력해서 commit을 남기는 사람에 대한 정보를 저장한다.

6.1 add

$ git add "파일이름" : 지정된 파일만 올림
$ git add . : 폴더 내에 있는 파일 전체를 올림

6.2 commit

$ git commit -m "남길메세지"

6.3 push
commit 한 내용을 밀어(push)넣는다.

 $ git push origin master

6.4 pull
저장소 변경사항을 받아온다.

 $ git pull origin master

2일차(HTML)

HTML 이란?

HTML(Hypertext Markup Language) : 하이퍼텍스트 기능을 가진 문서를 만드는 언어이다. 흔히 마크업 언어라고 한다.

태그의 종류

1. 제목태그 : <h1~h6>
2. 본문태그 : <p>
3. 줄바꿈 : <br>
4. 목록
   4.1 순서 있는 목록 :<ul>
   4.2 순서 없는 목록 : <ol>
5. 수평줄 : <hr>

문자 꾸미기 태그

1. 두껍게 : <b>
2. 두껍게 + semantic한 의미 : <strong>
3. 이탤릭 : <i>
4. 강조(Emphasized) : <em>
5. 중간줄(취소선) : <del>
6. 밑줄 : <u>

그 외 태그

1. 이미지 태그 <img>
   * 이미지를 가져온다.
   * src속성 : 가져올 이미지의 주소
   * alt 속성 : 이미지 불러오기 실패시 보여줄 문자열

2. HTML의 하이퍼링크 <a>
   * 클릭시 다른 주소로 이동하는 태그
   * href : 이동할 페이지의 링크
   * target : 링크 된 문서를 열었을 때 문서가 열릴 위치 표시
   _blank : 새로운 탭에서 열기
   _self : 현재 탭에서 열기

입력 값 받기 <input>

type <input type="">

• 버튼 <button> : 버튼
• 텍스트 <text> :
• 패스워드 <password> :
• 체크박스 <checkbox> :
• 라디오박스 <radio> :
• 날짜 <date> :

선택메뉴 <select>

• select 폼 생성 : <select>
  * name : select박스의 이름
• select 폼의 옵션 값 생성 : <option>
  * value : 실제적으로 전달되는 값
  * selected : 최초에 선택된 값으로 설정
• option을 그룹화 : <optgroup>
  * label : optgroup 이름 설정
• Disabled : 옵션은 보이지만 선택을 못하도록 설정

테이블 <table>

• 표를 만들 때 사용 하는 태그
• 먼저 행을 쓰고 행의 자식 요소로 칸을 넣어주는 것이 기본!
  * <table> : 표를 감싸는 태그
  * <tr> : 표 내부의 행
  * <th> : 행 내부의 제목 칸
  * <td> : 행 내부의 일반 칸

1. <table>속성
   <border> : 테두리 두께
   <cellspacing> : 테두리 간격 사이의 너비
   <cellpadding> : 셀 내부의 간격
   <align> : 테이블 정렬 속성
   <width>, <height> : 테이블의 너비와 높이
   <bgcolor>,<bordercolor> : 테이블 배경색, 테두리색

2. <td>속성(셀 합치기 같은거)
   <colspan> : 해당 칸이 점유하는 열의 수 지정
   <rowspan> : 해당 칸이 점유하는 행의 수 지정