2021. 8. 10. 17:44ㆍ컴퓨터과학
[Codecademy HTML 전체 과정 요약]
HTML의 기본
ㆍHTML(HyperTextMarkupLanguage)
ㆍ웹페이지의 구조와 내용물을 구성하기 위해 쓰이는 언어.
ㆍHTML의 요소는 대부분 OpenTag, ClosingTag로 구성된다. ex) <p></p>
ㆍHTML의 요소는 다른 요소 내부에 포함될 수 있다. 부모요소, 자식요소로 여겨진다.
ㆍ시각적으로 표현되는 내용물은 <body>태그 내에 포함되어야 한다.
ㆍ제목, 부제목과 같은 내용물은 <h1> ~ <h6>태그로 표현되고 각 각 텍스트의 사이즈가 다르다.
ㆍ<p>, <span>, <div>태그는 텍스트, 영역을 특정한다.
ㆍ<em>, <strong>태그는 텍스트 강조에 쓰인다.
ㆍ<br>태그는 줄바꿈.
ㆍ<ol>은 순서를 가진 리스트, <ul>는 순서없는 리스트를 만들고 각 리스트 내부는 <li>태그로 요소를 나타낸다.
ㆍ<img>태그, <video>태그로 각 이미지, 영상을 표시할 수 있고 태그에 “src=’~~‘“속성을 추가해 존재하는 콘텐츠를 표시할 수 있다.
HTML 문서 표준
ㆍ모든 HTML문서는 <!DOCTYPE html>로 시작한다. 브라우저는 이 태그를 통해 HTML파일로 인식한다.
ㆍ<html>태그는 HTML코드를 포함한다.
ㆍ타이틀과 같은 페이지 정보는 <head>에 포함된다.
ㆍ<title>태그는 페이지 제목이고 브라우저 탭에 노출되는 이름이다.
ㆍ<a>태그는 내부 페이지, 외부 페이지, 동일 페이지의 타 콘텐츠로 연결하는데 쓰인다.
ㆍ해당 웹페이지에 섹션을 만들고 id를 부여해 <a>태그로 해당 섹션으로 이동(스크롤)할 수 있다.
ㆍ주석처리 : <!-- comment -->
HTML 표
ㆍ<table>태그로 표를 만든다.
ㆍ<tr>는 행 추가, <td>는 행에 데이터요소를 추가한다.
ㆍ<th>는 표 요소들의 제목에 해당하는 행 추가(테이블 헤드)
ㆍ태그에 ‘colspan’, ‘rowspan’속성을 추가해 각 각 열합병, 행합병.
ㆍ테이블은 세 영역으로 구성된다. <thead>는 head, <tbody>는 body, <tfoot>는 footer영역.
HTML <form>
ㆍ<form>태그는 사용자가 정보를 입력하고 전송할 수 있는 태그를 허용하는 태그다.
ㆍ<form>의 ‘action’속성은 정보의 목적지를 의미한다.
ㆍ<form>의 ‘method’속성은 정보거 보내지는 방식을 정한다.
ㆍ<input>태그는 사용자가 정보를 입력할수있게 하고 ‘type’요소로 입력 정보 형식을 정한다.
- ‘text’는 텍스트, ‘password’는 검열된 비밀번호, ‘number’은 숫자, ‘range’는 범위 내 숫자를 고를 수 있는 막대
- ‘checkbox’는 on/off표시의 체크박스, ‘radio’는 on/off표시의 라디오버튼
- ‘list’는 <datalist>의 아이디를 지시한다. <datalist>내부에는 <option>태그의 값들이 나열된다.
- ‘submit’은 전송버튼을 만든다.
ㆍ<select>태그는 <option>태그와 같이 존재하고, 드롭다운 리스트를 표시한다.
ㆍ<textarea>태그는 사용자가 텍스트를 입력할 수 있는 공간을 표시한다.
<form> 검증/제한
ㆍClient의 검증이 브라우저에서 진행되고 서버로 전송된다.
ㆍ요구된 속성을 <input>에 넣는 것은 보장된 정보를 받아들일 수 있게 한다.
ㆍmin, max로 <input>숫자의 최대, 최소값을 강제할 수 있다.
ㆍminlength, maxlength로 <input>글자의 최대, 최소길이를 강제할 수 있다.
ㆍregex(javascript에서 쓰이는 정규식)패턴으로 <input>에 포함될 문자나 숫자의 종류를 강제할 수 있다.
- ‘pattern’속성으로 regex설정. ex) <input ..... pattern=“[a-zA-Z]+”>
: []는 사용 가능한 범위를 나타낸다. 소문자와 대문자만 사용 가능하고 숫자나 특수문자는 사용할 수 없다
semantic HTML (의미론적 HTML태그의 사용)
ㆍSemantic HTML은 특정 태그가 표시하는 내용이 어떤 의미를 갖는지 태그 그 자체로 표현한다.
ㆍSemantic HTML은 웹페이지 사용자가 페이지에 접근하고 SEO(검색어최적화)작업을 하는데 수월하게 하는 현대 표준이다.
ㆍ<header>, <nav>, <main>, <footer>는 웹페이지의 기초 구조를 구성한다.
ㆍ<section>은 챕터, 머리말 등의 문서의 특정 요소를 나누는 기준이 된다.
ㆍ<article>은 해당 웹페이지의 주 콘텐츠 정보를 포함한다. (블로그의 게시글, 기사문의 기사글 등)
ㆍ<aside>는 주 내용과 관련된 부수적 정보를 포함한다.
ㆍ<figure>는 모든 타입의 콘텐츠를 포함한다. <figcaption>은 figure에 포함되는 콘텐츠의 설명을 작성한다.
ㆍ<video><embed><audio>요소에 파일 주소를 작성한다.
// www.codecademy.com 에서의 LearnHTML를 수료, "요약내용"을 번역하여 작성하였습니다. //
'컴퓨터과학' 카테고리의 다른 글
| [개념]DOS와 Windows의 차이는? Server의 정의는? (0) | 2021.08.19 |
|---|---|
| AWS로 서비스 배포하기(1)_.jar파일을 AWS서버에 GitHub와 연동하여 배포하기 (0) | 2021.08.18 |
| [API이해하기]API사용을 위한 기본적인 것들 (0) | 2021.08.05 |
| [Spring Framework 특성 살피기] PSA에 대한 이해 (0) | 2021.08.03 |
| [Spring Framework 특성 살피기] IoC에 대한 이해 (0) | 2021.08.02 |