지 구 여 행
노마드코더/코코아톡 클론코딩/1. Learning HTML 본문
노마드코더 - 코코아톡 클론코딩 https://nomadcoders.co/kokoa-clone/lobby
코코아톡 클론 코딩 – 노마드 코더 Nomad Coders
HTML, CSS, Github
nomadcoders.co
Settings
■ HTML (HyperText Markup Language) : 브라우저에게 웹사이트의 content가 어떻게 구성되어 있는지 설명
* markup means 'content'
■ CSS (Cascading Style Sheet) : 브라우저에게 content들이 어떻게 보여져야 하는지 설명(디자인과 스타일을 위한 언어)
■ JavaScript : 동적인 웹사이트를 만들어주는 프로그래밍 언어
■ VSC (Visual Studio Code) : 텍스트 편집기 (notepad와 같지만 확장프로그램을 사용가능함)
Importatnt
1. VSC로 열었던 폴더 안에 파일들을 저장해야한다.
2. 폴더명과 파일명은 반드시 소문자로 만들어야한다.
■ prettier 확장프로그램(extension) : 매번 저장할 때마다 오류가 발생한 html 코드를 자동적으로 수정
| < prettier이 정상적으로 작동하지 않을 경우 > 1. VSCode > File > Preference > Settings > Format On Save 체크박스 선택   |
HTML
Tag & Attributes
■ <ul> : unordered list
* 항상 <li>와 함께 사용
■ <ol> : ordered list
* 항상 <li>와 함께 사용
■ <li> : list item
■ <a> : anchor; 링크 생성
<a> 특성(Attributes)
| 특성 | 기능 | 예제 |
| href | 클릭시 해당 주소로 이동 |  |
| target | 브라우저 오픈방식 결정 |
■ <img /> : 이미지태그; self-closing tag
<img> 특성(Attributes)
| 특성 | 기능 | 예제 |
| src | 불러올 이미지 주소 |  |
* img의 attribute src가 img의 content
■ <title> : 웹페이지의 제목을 결정
- 항상 요소 내부에 위치
- HTML 문서를 작성할 때 반드시 작성
■ <meta> : 해당 문서에 대한 정보 중 메타데이터(metadata)를 정의할 때 사용; self-closing tag
- <base>, <link>, <script>, <style>, <title>과 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 종류의
메타데이터를 제공할때 사용 → 구글, 네이버등 검색엔진, 브라우저, 타 웹 서비스에서 사용
- 항상 <head> 요소 내부에 위치
- name 또는 http-equiv 속성이 명시되었으면 반드시 conent도 함께 명시
<meta> 특성(Attributes)
| 특성 | 기능 | 예제 |
| name | 메타데이터를 위한 이름을 명시 |
 |
| content | http-equiv / name 속성의 값을 저장 |
|
| charset | 해당 문서의 인코딩 방식 명시 |
■ <link> : ① CSS Stylesheet를 연결하거나, ② 사이트 아이콘("파비콘"과 홈 화면 아이콘) 과 연결
* 파비콘(favicon) : 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘
<link> 특성(Attributes)
| 특성 | 기능 | 예제 |
| rel | 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명 |  |
| sizes | 아이콘 크기 | |
| href | 스타일 시트의 경로 |
■ <p> : paragraph; 길이가 긴 텍스트에 사용하는 태그
■ <span> : 길이가 짧은 텍스트에 사용하는 태그
■ <pre> : HTML파일에 쓰여지는 서식 그대로 표현
■ <abbr> : abbreviation; 마우스 커서를 단어 위에 올리면 title에 저장된 content가 표현됨
  |
■ <mark> : 하이라이트 표현
  |
■ <strong> : bold효과
■ <sub> : 아래 첨자(예: 3₃)로 표현될 inline 텍스트(숫자, 문자 둘다 가능) 지정
■ <sup> : 위 첨자(예: 3³)로 표현될 inline 텍스트(숫자, 문자 둘다 가능) 지정
■ <form> : 문서 구획; 폼
- form이 동작하는 방식을 설정하는 일부 속성들을 지정해야 함 (필수 : action, method)
*action : 데이터를 보낼 서버의 특정 URL을 지정
*method : 어떤 HTTP 방식을 사용할 것인지 지정 (get/post, 기본값:get)
- 다른 <form>요소를 제외한 Flow content 포함 가능
*Flow content : 보통 텍스트나 내장 콘텐츠를 포함하는 요소들 (예외도 존재)
https://developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories
Form tags
- 웹페이지에서 사용자로부터 데이터를 받는 태그(양식 태그)
- <form> 내부에 존재
- 양식태그(Form Tags) 종류 :
* id :
양식 태그 기능 <button> 클릭 가능한 버튼 생성 <fieldset> 다른 양식 컨트롤과 <label>을 그룹핑할때 사용 <input> 사용자의 데이터를 받을 수 있는 대화형 컨트롤 <label> 사용자 인터페이스 항목의 설명을 의미
요소 연관시키려면 label for="value"와 input id="value" 동일하게 생성<meter> 특정 범위내에서의 스칼라값 / 백분율 표현
(예: 게임 속 hp / mp 같은 모양)<object> 이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해
다뤄질수 있는 리소스와 같은 외부 리소스<output> 출력 요소; 웹또는 앱에서 계산이나
사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소
(예: 밝기/투명도 등 표시하는 패널)<progress> 진행 표시 줄; 어느 직업의 완료 정도 <select> 옵션 메뉴를 제공하는 컨트롤
(예: 엑셀의 '드롭다운' 형식)<textarea> 멀티라인 일반 텍스트 편집 컨트롤
(예 : 1:1 문의 게시판)
- Unique Identifier(고유식별자)
- body 안에 어떤 태그에든 넣을 수 있는 속성이지만, 하나의 고유한 id 값만 존재 가능 ≒ class
- Scripting이나 CSS가 식별할 수 있게 하는 속성
■ <input> : 사용자의 데이터를 받을 수 있는 대화형 컨트롤
- 유형(type)에 따라 대화형 컨트롤 양식 결정 (button : 버튼 형식 / file: 업로드 파일 선택 / checkbox : 체크박스 형식등)
<input> 특성(Attributes)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#attr-type
- <input>의 유형(type)에 따라 사용가능한 로컬 특성(Local Attributes):
* https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#attr-type 표를 type 유형에 따라 재정리
| <input>의 유형(type)의 종류 |
사용 가능한 로컬 특성 (Local Attributes) |
기능 |
| all | autocomplete | 양식 자동생성 기능 (form autofill) 암시 |
| autofocus | 페이지가 로딩될때 양식 제어에 오토포커스 | |
| disabled | 양식 컨트롤을 비활성화 | |
| form | 컨트롤을 양식 요소와 연결 | |
| name | input 양식 컨트롤의 이름 | |
| type | input 양식 컨트롤의 유형 | |
| value | 양식 컨트롤의 현재 값 | |
| almost all | list | datalist 자동입력 옵션의 id 속성값 |
| readonly | 불리언값; 수정 불가능 | |
| required | 불리언값(validation); 양식이 전송되기 위해서 반드시 확인이 필요한 값 | |
| file | accept | 업로드 시 특정 형식의 파일로 제한 |
| capture | 파일 업로드 제어에서 input 방식에서 미디어 capture | |
| multiple | 불리언값; 여러 값을 허용할지의 여부 | |
| text | dirname | 양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name |
| maxlength | 최대 문자 수; value값의 최대 길이 | |
| minlength | 최소 문자 수; value값의 최소 길이 | |
| pattern | value값이 유효하기 위해 일치해야하는 패턴 | |
| placeholder | 양식 컨트롤에 나타나는 내용 | |
| size | 양식 컨트롤의 크기 | |
| search | dirname | 양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name |
| maxlength | 최대 문자 수; value값의 최대 길이 | |
| minlength | 최소 문자 수; value값의 최소 길이 | |
| placeholder | 양식 컨트롤에 나타나는 내용 | |
| image | alt | 이미지 유형에 대한 대체 속성 |
| formaction | form action; 양식 전송시 URL 사용 | |
| formenctype | form en(coding) type; 전송되는 양식의 데이터 인코딩 유형 | |
| formmethod | form method; 양식 전송시 HTTP 방식 사용 | |
| formnovalidate | form no validate; 양식 전송시 양식 컨트롤 확인 무시 | |
| formtarget | form target; 양식 전송시 브라우징 맥락 | |
| height | 이미지 높이의 height속성 | |
| src | source; 이미지 출처의 주소 | |
| width | 이미지 가로의 width 속성 | |
| radio | checked | 커맨드/컨트롤이 체크되었는지 여부 |
| checkbox | checked | 커맨드/컨트롤이 체크되었는지 여부 |
| submit | formaction | form action; 양식 전송시 URL 사용 |
| formenctype | form en(coding) type; 전송되는 양식의 데이터 인코딩 유형 | |
| formmethod | form method; 양식 전송시 HTTP 방식 사용 | |
| formnovalidate | form no validate; 양식 전송시 양식 컨트롤 확인 무시 | |
| numeric types | max | 최대값 |
| min | 최소값 | |
| step | 유효한 증분적인(incremental)값 | |
| password | maxlength | 최대 문자 수; value값의 최대 길이 |
| minlength | 최소 문자 수; value값의 최소 길이 | |
| pattern | value값이 유효하기 위해 일치해야하는 패턴 | |
| placeholder | 양식 컨트롤에 나타나는 내용 | |
| size | 양식 컨트롤의 크기 | |
| tel | maxlength | 최대 문자 수; value값의 최대 길이 |
| minlength | 최소 문자 수; value값의 최소 길이 | |
| pattern | value값이 유효하기 위해 일치해야하는 패턴 | |
| placeholder | 양식 컨트롤에 나타나는 내용 | |
| size | 양식 컨트롤의 크기 | |
| multiple | 불리언값; 여러 값을 허용할지의 여부 | |
| size | 양식 컨트롤의 크기 | |
| url | maxlength | 최대 문자 수; value값의 최대 길이 |
| minlength | value값이 유효하기 위해 일치해야하는 패턴 | |
| placeholder | 양식 컨트롤에 나타나는 내용 |
■ <div> : division; block element; Unsemantic; 의미 자체는 없지만 box처럼 기능
* Unsemantic : 의미x <-> Semantic : 문서를 보기만 해도 그 의미를 짐작 가능
<div>또는 <span>을 대체 가능한 Semantic HTML :
- <body> 안에 위치
- 코더 뿐만 아니라 검색엔진도 코드를 보기만해도 바로 그 의미를 짐작할 수 있어 보다 직관적
(예: <header>은 <div id="header">)
Semantic HTML 의미 <address> 연락처 정보 <article> 독립적으로 구분해 배포/재사용 가능한 구획 <aside> main태그에 포함되지 않는 부분 (사이드바/콜아웃박스) <header> 소개 및 탐색에 도움을 주는 content (제목/로고/검색폼/작성자이름등) <footer> (주로) 페이지 아래쪽 위치; (구획의 작성자/저작권정보/관련문서등) <h1> ~ <h6> 6단계 구획 제목 <main> <body>의 주요 content <nav> 문서의 부분 중 현재 페이지 or 다른 페이지로의 링크를 보여주는 구획
(메뉴/목차/색인등)<section> 문서의 독립적인 구획
출처 :
1. 노마드코더 코코아톡 클론코딩 : https://nomadcoders.co/kokoa-clone
2. MDN / CSS reference : https://developer.mozilla.org/en-US/
'필기노트 > 노마드코더' 카테고리의 다른 글
| 노마드코더/바닐라JS로 그림 앱 만들기/1. 그리기 기능 설정하기 (0) | 2022.10.02 |
|---|---|
| 노마드코더/바닐라JS로 크롬 앱 만들기/2. JS on the browser (0) | 2022.08.01 |
| 노마드코더/바닐라JS로 크롬 앱 만들기/1. Basic Javascript (0) | 2022.07.24 |
| 노마드코더/코코아톡 클론코딩/3. Advanced CSS (0) | 2022.07.03 |
| 노마드코더/코코아톡 클론코딩/2. Learning CSS (0) | 2022.07.01 |
