백엔드 로드맵 - html / FE
https://github.com/devJang/developer-roadmap/blob/master/pdf/backend.pdf
HTML
Tag
가장 많이 사용하는 태그 28 개
출처: https://www.advancedwebranking.com/htmltext 요소
<html> : HTML 문서의 루트 요소 정의
<head> : HTML 문서의 메타데이터 정의
<title> : HTML 문서의 제목 정의
<body> : 웹 브라우저를 통해 보이는 내용
<p> : 단락 - 여러 번의 띄어쓰기 / 줄 나누기 적용 X
<pre> : <pre>태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기 표현됨
<b> : bold
<strong> : bold + 내용의 중요성까지
<i>: italic
<em>: italic + 내용의 중요성까지
<mark>: 텍스트 하이라이팅
<del>: 삭제 표시
<ins>: 밑줄
<sup> / <sub>: 윗 첨자 / 아래 첨자
<q>: 짧은 인용구, ""가 나옴
<blockquote> 길이가 긴 인용문, 단락이 달라짐
<abbr> 용어의 축약형
<address> 주소 표현 / 이탤릭체 / 위아래로 약간의 공백
<!-- 주석내용 --> 주석 / 중첩 주석은 사용하면 안 됨
<엔티티 - 특수 문자>
<문자셋의 종류>
현재 사용되는 대표적인 문자셋(character set)은 다음과 같습니다.
- ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다.
- ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.
- ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다.
- UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋입니다.
HTML 기본 요소
<a 태그>
<리스트>
- 순서가 있는 리스트: < ul>
- 순서가 없는 리스트: < ol>
- 용어 정의 리스트: < dl>
< dt>호박</ dt>: 용어의 이름
< dd>: 해당 용어에 대한 정의
<테이블>
-
< tr>: 테이블에서 열을 구분
-
< th>: 각 열의 제목 / 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.
-
< td>: 테이블의 열을 각각의 셀로 나누어 줌
-
< colspan> / < rowspan>으로 각각의 열과 행을 합칠 수 있음
<블록과 인라인>
<블록 요소>
<p>, <div>, <h>, <ul>, <ol>, <form>
address, article, aside, audio, blockquote,
canvas, dd, div, dl, fieldset, figcaption, figure,
footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
hr, noscript, ol, output, p, pre, section, table, ul, video
<인라인 요소>
<span>, <a>, <img>
a, abbr, acronym, b, bdo, big, br, button,
cite, code, dfn, em, i, img, input, kbd,
label, map, object, q, samp, small, script,
select, span, strong, sub, sup, textarea, tt, var
레이아웃
- div 요소 이용
- table 사용 (거의 사용 X)
- html5 semantic
Form 요소
<form action="처리할페이지주소" method="get|post"></form>-
사용자로부터 입력을 받음
-
사용자가 입력한 데이터를 서버로 보낼 때
method 속성
- GET: 주소에 데이터를 추가하여 전달 / 데이터 보안성 낮고 크기 작음
- POST: 데이터 별도 첨부 / 보안성 좋으며 크기 제한 없음
대표적인 input 요소의 타입
-
텍스트 입력(text)
-
비밀번호 입력(password)
-
라디오 버튼(radio): 리스트 중 단 하나의 옵션만 받음 /모든 input 요소가 반드시 같은 name 속성을 가지고 있어야
-
체크박스(checkbox)
-
파일 선택(file)
-
선택 입력(select): 드롭다운 리스트 / 리스트 중 단 하나의 옵션만 받음
-
문장 입력(textarea)
-
버튼 입력(button)
-
전송 버튼(submit)
-
필드셋(fieldset) : 하나로 묶어 주는 역할
input 요소의 속성
- value : 입력 필드에 나타나는 초깃값
- readonly : 입력 필드를 볼 수는 있으나, 수정할 수는 없음 / submit을 누르면 초깃값이 서버로 전송된다
- disabled : 입력 필드를 아예 클릭/사용할 수 없도록 / submit을 누른다고 해도 전송 X
- maxlength : 입력 필드에 입력할 수 있는 문자의 최대 길이
- size : 입력 필드에 보여지는 input 요소의 크기 / 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미 / 입력 최대 길이는 maxlength로 제어해야 함
- 이미지 넣을 때 alt 속성의 중요성
: alt 를 생략하는 경우에는 src 의 값인 불필요한 정보를 읽게 되기 때문에 생략하지 않도록.
html + css
스타일 적용의 우선순위
-
인라인 스타일
-
내부 / 외부 스타일 시트
-
웹 브라우저 기본 스타일
선택자
-
HTML 요소 선택자
-
아이디 선택자
-
클래스 선택자
html + js
- script 요소: 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시
- nonscrpit 요소: 스크립트를 지원하지 않는 웹 브라우저를 사용하는 사용자에게 보여줄 문자열을 설정
html5
(일단은 보류)
reference
https://opentutorials.org/course/3084
http://tcpschool.com/html/intro
https://webclub.tistory.com/609?category=724656
