[포스코x코딩온] 웹 풀스택 과정 1주차 회고 | HTML
1. HTML 이란?
웹페이지는 HTML, CSS, JavaScript 크게 3가지로 구성되어 기능한다.
여기서 HTML은 집의 구조를 만들어주고, 그렇게 구성된 구조에 대한 인테리어는 CSS로 만들어주며, JavaScript로 집의 기능을 만든다.
즉, HTML은 웹페이지에 나타내고자 하는 내용을 구조적으로 표현한다.
텍스트의 위치, 색, 크기 등의 세부적인 디자인은 CSS으로 설정한다.
버튼을 눌렀을 때 어떤 기능을 하는 등의 작업은 JavaScript으로 설정한다.
HTML(Hypertext Markup Language)는 마크업 언어이다.
여기서 마크업 언어란, 태그<>를 이용하여 구조화하는 언어를 뜻한다.
html 문서 작성 시, 기본적인 구조는 아래와 같다.
<!DOCTYPE html>
: HTML 문서 형식을 지정하는 것으로, HTML5문서는 반드시 해당 코드를 작성해야 한다.
태그 Tag
<head> 태그
- HTML 문서의 메타데이터와 문서 정보를 정의하는 데 사용되는 태그
(메타데이터: 데이터에 대한 정보를 제공하는 데이터. 즉, 웹페이지의 정보와 특성을 설명함) - HTML 문서의 title, style, link, script, meta에 대한 데이터이며, 실제 웹페이지 화면에는 표시되지 않음.
- title: HTML 문서의 제목
- style: HTML 문서의 Style 정보 정의
- link: 외부 리소스와의 연결 정보를 정의 (CSS파일 연계에 사용)
- script: Javascript를 정의
- meta: 페이지 설명. 키워드, 저자, 화면 크기 등의 정보. 주로 브라우저 또는 검색 엔진에서 사용
<body> 태그
- HTML 문서의 실제 콘텐츠를 정의하는 데 사용되는 태그
- 다양한 태그를 이용하여 웹페이지 구조 설계할 수 있음 (하기 2. Tag 종류 참조)
요소 Element
- 요소 (Element)
: "시작 태그 (Opening tag) - 내용 (Content) - 종료 태그 (Closing tag)"으로 구성됨 - 태그 내 태그으로 중첩하여 웹페이지 구조를 표현한다.
- 부모 요소 / 자식 요소
: 한단계 위/아래 관계에 있는 태그를 뜻한다. - 상위 요소 / 하위 요소
: 외부 / 내부에 속해 있는 모든 태그를 뜻한다.
- 부모 요소 / 자식 요소
- 빈 요소
: 내용이 없는 요소로, 속성만 소유한다. (종결 태그 필요없음)
: <br>, <hr>, <img>, <input>, <link>, <meta> 등이 존재한다.
속성 Attribute
- 요소의 성질, 특징을 정의한다.
- 요소에 추가적인 정보(ex. 이미지 파일 경로, 크기 등)를 제공한다.
주석 Comments
- 개발자에게 코드를 설명하기 위해 사용하는 것으로, 화면에 표시하지 않는다.
- <!-- ~~ --> 으로 표기
- 단축키: Ctrl + /
2. Tag 종류
제목 태그 <h1></h1>
- h는 heading을 의미하며, h6까지 표현 가능하다. (h1에서 점점 글씨 크기 작아짐)
- 제목이기 때문에, 자동 줄 바꿈. (<br> 필요없음)
- 하나의 HTML 문서에는 하나의 h1태그를 권장한다.
본문 태그 <p></p>
- p는 paragraph를 의미하며, 태그 사이에 본문을 기재한다.
줄 바꿈 태그 <br>
- b는 break를 의미하여, 줄을 바꾼다.
목록 태그 <ul></ul>, <ol></ol>
<ul></ul>
- unordered list로, 순서 없는 목록을 의미한다.
- 태그 내 li태그를 이용하여 목록을 위치시킨다.
- type 속성을 이용하여, 목록의 마커 모양을 바꿀 수 있다. (circle, square 등)
<ol></ol>
- ordered list로, 순서 있는 목록을 의미한다.
- 태그 내 li태그를 이용하여 목록을 위치시킨다.
- 순서가 정해져 있으므로, type 속성으로 마커 모양을 지정할 수는 없지만, 카운트 되는 숫자/문자를 지정할 수 있다.
- start: 시작하는 숫자를 지정할 수 있다.
- reversed: 해당 속성으로 숫자를 역순으로 표현 가능하다.
수평 줄 태그 <hr>
- 수평으로 된 줄을 그어준다.
문자 꾸미기 태그
<b></b> 문자를 두껍게
<strong></strong> 문자를 두껍게 + Semantic한 의미를 지님
<i></i> 이탤릭
<em></em> 강조(기울여서 표시). Emphasized!
<del></del> 중간 줄 (취소선)
<u></u> 밑줄
이미지 삽입 태그 <img>
- 이미지를 넣을 때 사용
- src 속성으로 경로를 표현한다. (아래와 같이 3가지 방법으로 경로 표현)
- 이미지 주소를 삽입
- 상대경로: 현재 위치한 폴더에서의 경로를 표시 (./파일명)
- 절대경로: 최상위 디렉토리로부터 해당 파일까지의 경로를 표시 (파일주소\파일명)
- alt 속성으로, 이미지 경로가 올바르지 않을 때 표기될 문장을 작성한다.
(필수는 아니지만, 설정하지 않으면 설명없이 이미지 깨지는 것으로 표현됨)
링크 삽입 태그 <a>
- a는 anchor을 의미한다.
- href 속성: Hypertext Reference의 약자로, 이동할 페이지의 링크를 삽입한다.
- target 속성: 링크 된 문서를 열었을 때, 문서가 열릴 위치를 설정한다.
- _blank: 새로운 탭에서 열림
- _self: 현재 탭에서 열림 (기본값으로 설정되어 있음)
사용자 입력 Input 태그
<input type="button">
- 버튼을 생성한다.
- value 속성으로, 버튼에 표기할 문자를 삽입한다.
<input type="text">
- 텍스트를 입력받는 폼을 생성한다.
- placeholder 속성을 통해 기본적으로 기재되어 있는 문구를 설정할 수 있다.
<input type="password">
- 비밀번호 값을 입력받는 폼을 생성한다.
- text와 달리, 입력받는 문자가 보이지 않도록 *으로 처리된다.
<input type="checkbox">
- 여러 개 선택 가능한 체크 박스를 생성한다.
- name 속성: 체크 박스의 이름을 지정하여, 같은 카테고리로 묶어준다.
- value 속성: 체크 박스가 실제로 갖는 값을 지정한다.
- checked: 최초 화면에 해당 선택지가 선택 된 상태로 로딩되도록 한다.
<input type="radio">
- 하나만 선택 가능한 라디오 버튼을 생성한다.
- name 속성: 라디오 버튼의 이름을 지정하여, 같은 카테고리로 묶어준다. (하나의 name 내에서 하나만 선택 가능!)
- value 속성: 라디오 버튼이 실제로 갖는 값을 지정한다.
- checked: 최초 화면에 해당 선택지가 선택된 상태로 로딩되도록 한다.
<input type="date">
- 특정 날짜(년/월/일)를 선택할 수 있는 달력을 생성한다.
- type="datetime-local" 으로, 시간까지 선택가능함.
사용자 입력 Form 태그
<select>
- 선택 메뉴(드롭 다운)을 생성한다.
- name: select 박스의 이름
<option>
- select 폼의 선택지를 생성한다.
- value: 실제 값
- selected: 최초에 선택된 값으로 설정
<optgroupt>
- 선택지(option)를 그룹화한다.
- label: optgroup의 이름을 설정한다
- Disabled: 옵션은 보이지만 선택을 못하도록 설정한다.
테이블 태그 <table>
- 표를 만들 때 사용하는 태그
- 먼저 행을 쓰고, 행의 자식 요소로 칸을 채워준다.
<tr> 표 내부의 행
<th> 행 내부의 제목 칸
<td> 행 내부의 일반 칸 - 속성으로 table의 여백, 테두리, 크기 등을 조정할 수 있다. (이외 세부적인 부분은 css으로 설정)
- border: 테두리 두께
- cellspacing: 테두리 간격 사이의 너비 (cellspacing="0"으로 설정하면, 테두리 선 간의 간격이 없어져 하나의 테두리 선으로 표현 가능)
- cellpadding: 셀 내부 문자와 테두리 간의 간격
- width, height: 테이블의 너비와 높이
- align: 테이블 정렬 속성
- bgcolor, bordercolor: 테이블 배경색과 테두리 색
- 셀 병합 속성
- rowspan: 지정한 수만큼 아래의 셀과 병합
- colspan: 지정한 수만큼 오른쪽의 셀과 병합
2일차 수업을 마치며...
다 이해했다고 생각했지만, 막상 백지 상태에서 코드를 작성하려고 하면 필요한 태그나 속성이 바로 떠오르지는 않는다. 블로깅으로 이론 복습하고, 실습문제도 다시 한번씩 푸는 과정을 매일 필수적으로 거쳐야 할 것 같다.
어제 수업에서 헷갈렸던 Github로 업데이트 하는 과정을 이번 수업 때 직접 해보면서 다시 제대로 이해할 수 있었다. 그 과정은 아래에 간략히 기록하였다:)
1) 우선 해당 폴더로 이동한다.
cd Desktop
cd github
ls (더 들어가야 할 폴더가 있는지 확인)
cd KDT-8-Web
2) add-commit-push 과정으로 업데이트 한다.
git status (main branch에 와있는지 확인)
git add . (특정 파일을 업데이트 하고 싶다면, 파일명을 기재)
git commit -m"~~" (코멘트 기재하여 github에 업데이트)
git push origin main