GDSC-Hongik · Juyoung03 · Nov 22, 2024 · Nov 22, 2024 · Nov 22, 2024
diff --git a/mission1/CSS3.md b/mission1/CSS3.md
diff --git a/mission1/HTML5.md b/mission1/HTML5.md
@@ -0,0 +1,226 @@
+# HTML5
+
+HTML은 HyperText Markup Language의 약자로 웹페이지를 기술하기 위한 마크업 언어  
+웹페이지의 **내용**과 **구조**를 담당하는 언어
+
+## 구조
+
+    <!DOCTYPE html> 로 시작
+
+    <head> </head> 사이에 제목, 외부 파일 참조, 메타 데이터의 설정 등이 위치, 이 정보들은 브라우저에 표시되지 않는다.
+
+    <body> </bode> 사이에는 웹브라우저에 출력되는 모든 요소가 위치한다.
+
+## 요소
+
+시작 태그와 종료 태그 그리고 태그 사이에 위치한 콘텐츠로 구성
+
+ex ) <시작 태그> 콘텐츠 </종료 태그>
+
+콘텐츠를 가질 수 없는 요소 : 빈요소  
+예시 ) br, hr, img, input, link, meta 등등
+
+어트리뷰트(attribute) : 요소의 성질, 특징을 정의하는 명세  
+요소는 어트리뷰트를 가질 수 있고 어트리뷰트는 요소에 추가적인 정보를 제공한다.  
+시작 태그에 위치하며 이름과 값의 쌍을 이룬다.
+
+`<img src="html.png" width="104" height="142">`
+
+자주 사용되는 글로벌 어트리뷰트
+
+- id : 유일한 식별자를 요소에 지정, 중복 지정이 불가
+- class : 스타일시트에 정의된 class를 요소로 지정, 중복 지정 가능
+- hidden : css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 됨
+- lang : 지정된 요소의 언어를 지정
+- style : 요소에 인라인 스타일을 지정
+- tabindex : 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정
+- title : 요소에 관한 제목 지정
+
+## 시멘틱 태그
+
+브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 함
+
+시멘틱 웹 : 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상
+
+    non-semantic 요소
+    div, span등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않음
+
+    semantic 요소
+    form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명
+
+    - header : 헤더를 의미
+    - nav : 내비게이션을 의미
+    - aside : 사이드에 위치한 공간을 의미
+    - section : 본문의 여러 내용을 포함하는 공간을 의미
+    - article : 본문의 주내용이 들어가는 공간을 의미
+    - footer : 푸터를 의미
+
+## 웹페이지를 구성하는 기본 태그
+
+#### 문서 형식 정의 태그
+
+출력할 웹페이지의 형식을 브라우저에게 전달
+
+#### html 태그
+
+모든 요소의 부모 요소이며 웹페이지에 단 하나만 존재  
+단 `<!DOCTYPE>` 는 예외
+
+#### head 태그
+
+head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재  
+HTML문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다.
+
+1. title tag : 문서의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시됨
+2. style tag : style 정보를 정의한다. background-color, color 등이 포함된다.
+3. link tag : link 요소에는 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계에 사용함
+4. script tag : client-side JavaScript를 정의함
+5. meta tag : description, keywords, author, 기타 메타데이터 정의에 사용됨
+
+#### body 태그
+
+HTML 문서의 내용을 나타내며 웹페이지에 하나만 존재  
+메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body요소 내에 기술
+
+## 텍스트 관련 태그
+
+#### 제목 태그
+
+제목 테그는 제목을 나타낼 때 사용하며 h1 ~ h6까지 존재 -> h1에서 h6으로 갈수록 글자의 크기가 점점 작아짐
+
+#### 글자 형태 태그
+
+1. b : bold체를 지정, 의미론적 중요성의 의미가 없음
+2. strong : b 태그와 동일하게 bold체 지정, 의미론적 중요성의 의미를 갖고 있음
+3. i : italic체를 지정, 의미론적 중요성의 의미가 없음
+4. em : emphasized text를 지정, i 태그와 동일하게 italic체로 표현됨, 의미론적 중요성의 의미를 갖고 있음
+5. small : small text를 지정
+6. mark : 하이라이트된 text를 지정
+7. del : 선으로 지워진 text를 지정
+8. ins : 선으로 밑줄 그어진 text를 지정
+9. sub/sup : sub 태그는 아래에 쓰인 text를 sup 태그는 위에 쓰인 text를 지정
+
+#### 본문 태그
+
+1. p : 단락을 지정
+2. br : (강제)개행을 지정, 빈요소로 종료태그가 존재하지 않음
+3. pre : 형식화된 text를 지정, pre 태그 내의 콘텐츠는 작성된 그대로 브라우저에 표시됨
+4. hr : 수평줄을 삽입
+5. q : 짧은 인용문을 지정, 브라우저는 큰따옴표로 q요소를 감싼다
+6. blockquote : 긴 인용문 블록을 지정, 들여쓰기하여 표시
+
+## Hyperlink
+
+한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 능력  
+사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능  
+a 태그를 이용하여 표현 가능
+
+#### href 어트리뷰트
+
+이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로는 특정 파일의 위치를 의미
+
+- 디렉터리(=폴더) : 파일과 다른 디렉터리를 갖는 파일 시스템 내의 존재물
+
+- 파일 경로 : 파일 시스템에서 파일의 위치를 나타내는 방법  
+  절대 경로 - 현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다.  
+  상대 경로 - 현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치를 가리킨다.
+
+#### target 어트리뷰트
+
+target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할지 지정  
+\_self : 링크를 클릭했을 때 연결 문서를 현재 윈도우에서 오픈  
+\_blank : 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈
+
+## 목록(List)과 표(Table)
+
+#### 목록(List)
+
+순서 없는 목록 : ul로 묶어서 사용  
+순서 있는 목록 : ol로 묶어서 사용
+
+#### 테이블
+
+표를 만들 때 사용하는 태그  
+주로 공간 분할 태그인 div 태그를 사용하여 레이아웃을 구성
+
+| tag   | description       |
+| ----- | ----------------- |
+| table | 표를 감싸는 태그  |
+| tr    | 표 내부의 행      |
+| th    | 행 내부의 제목 셀 |
+| td    | 행 내부의 일반 셀 |
+
+| attribute | description                     |
+| --------- | ------------------------------- |
+| border    | 표 테두리 두께 지정             |
+| rowspan   | 해당 셀이 점유하는 행의 수 지정 |
+| colspan   | 해당 셀이 점유하는 열의 수 지정 |
+
+## 멀티미디어 지원하는 태그
+
+#### 이미지
+
+웹페이지에 이미지를 삽입하는 경우 img 태그를 사용
+
+| attribute | description                           |
+| --------- | ------------------------------------- |
+| src       | 이미지 파일 경로                      |
+| alt       | 이미지 파일이 없을 경우 표시되는 문장 |
+| width     | 이미지의 너비                         |
+| height    | 이미지의 높이                         |
+
+#### 미디어
+
+- audio
+
+| attribute | description                                                                      |
+| --------- | -------------------------------------------------------------------------------- |
+| src       | 음악 파일 경로                                                                   |
+| preload   | 재생 전에 음악 파일을 모두 불러올 것인지 지정                                    |
+| autoplay  | 음악 파일을 자동의 재생 개시할 것인지 지정                                       |
+| loop      | 음악을 반복할 것인지 지정                                                        |
+| controls  | 음악 재생 도구를 표시할 것인지 지정, 재생 도구의 외관은 브라우저마다 차이가 있음 |
+
+- 비디오
+
+| attribute | description                                                                        |
+| --------- | ---------------------------------------------------------------------------------- |
+| src       | 동영상 파일 경로                                                                   |
+| poster    | 동영상 준비 중에 표시될 이미지 파일 경로                                           |
+| preload   | 재생 전에 동영상 파일을 모두 불러올 것인지 지정                                    |
+| autoplay  | 동영상 파일을 자동의 재생 개시할 것인지 지정                                       |
+| loop      | 동영상을 반복할 것인지 지정                                                        |
+| controls  | 동영상 재생 도구를 표시할 것인지 지정, 재생 도구의 외관은 브라우저마다 차이가 있음 |
+| width     | 동영상의 너비를 지정                                                               |
+| height    | 동영상의 높이를 지정                                                               |
+
+## 폼 태그
+
+#### form
+
+form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용  
+input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함
+
+#### input
+
+input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용  
+type 어트리뷰트에 의해 구분된다.
+
+#### select
+
+복수개의 리스트에서 복수개의 아이템을 선택할 때 사용  
+서버에 전송되는 데이터는 select 요소의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로 하여 key=value의 형태로 전송됨
+
+#### textarea
+
+textarea 태그는 여러 줄의 글자를 입력할 때 사용
+
+#### button
+
+button 태그는 클릭할 수 있는 버튼을 생성  
+`<input type="button">`과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않음
+
+#### fieldset / legend
+
+fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용  
+legend 태그는 fieldset 태그 내에서 사용되어야 하며 그룹화된 fieldset 의 제목을 정의