HTML 문서는 응용프로그램에 따라 다른 형태로 열림
ㄴ현재 HTML 버전은 많으나 국제 표준은 HTML5임
속성 적용은 갯수 제한 없음, 서로 구분을 위해 공백 사용
코드 구분을ㅇ 위해 들여쓰기 하면 좋아요~
head 문서의 정보
body 문서의 내용
문서의 완성 <기본 구조!>
html
head
문서의 정보
/head
body
화면에 표시될 내용
/body
/html
p태그 - 문단
ex p 내용 /p
h 태그 - 제목(표제) 1~6까지 사용 가능 숫자가 작아질수록 글씨가 커짐
hr 태그 - 수평선 표시 (주제변경이나 내용구분을 위해 사용함)
HTML 텍스트의 특징 : 엔터를 이용한 줄바꿈 무시 / 스페이스를 이용한 공백을 한 번씩만 허용한다
인라인 텍스트 요소
mark 요소 - 형광펜
strong 요소 - 볼드
em 요소 - 이탤릭체
q 요소 - 인용구
s 요소 - 취소선
블록라인 인라인 구분을 해야하는가? - 그렇게까지 다 외울 필요는 없다!
ㄴ도구 활용하기! 웹브라우저의 개발자 도구 활용~
컨테이너 요소
div 요소 - 블록 레벨 컨테이너
span 요소 - 인라인 컨테이너
주요 전역속성 (Global attributes)
id - 이름 부여 식별자
class - 그룹 별로 묶는 식별자
style - 요소에 적용할 CSS 스타일 선언
title - 추가 정보를 제공하는 텍스트, 툴팁 제공함~
developer.mozilla.org/ko/docs/web/HTML/Global_attributes / 더 많은 전역속성을 알 수 있음~
img src= 이미지주소 - 이미지 올리기
alt 속성 - alternative의 약지로 대체 텍스트 역할
ㄴ 이미지 로딩 전, 이미지 로딩에 실패한 경우 이미지 대신 대체 텍스트가 표시됨
ㄴ 시각장애인에게 웹페이지 서비스를 해야하는 상황에 대비 가능함 (웹 접근성)
width (너비) height(높이)
ㄴ정수 사용 / 각각 픽셀 단위로 적용됨
-2회차
a href 태그 - 하이퍼링크
ㄴ target="_self" -현재탭
ㄴ target=:"_blank" - 새탭
목록
1.Unordered list (순서 없는 목록 / 태그 : ul)
2.Ordered list (순서 있는 목록 / 태그 : ol)
ㄴ제어할 수 있는 속성 start=(숫자)
ㄴ목록 표시 설정할 수 있음 type
ㄴ목록 안에 목록 만들 수도 있음~
표는 행과 열로 이루어짐 가로 (행) 세로 (열) 만나는 곳 (셀)
표 만드는 태그들 위에서 아래로 갈 수록 단위가 작아짐
ㄴtable - 표 <border는 표 테두리 두께>
ㄴtr - 행
ㄴth - 행 안 제목 셀
ㄴtd -행 안 콘텐츠 셀
ㄴcaption - table 태그 안쪽 제목 또는 표의 설명을 나타내는 역할 수행 (기본적으로 가운데 정렬)
(컨테이너 역할)
ㄴthead - 표의 제목이나 주제
ㄴtbody - 표의 본문
ㄴtfoot -표의 요약글 또는 맺음말
- 해당 태그 사용 시 표의 구조가 명확하게 드러나 유지보수나 코드 유지, 접근성에도 도움이 됨!
input type=데이터유형
text - 기본값, 텍스트를 입력받음
email -이메일을 입력받음
password - 비밀번호를 입력받음
search - 검색할 텍스트를 입력받음
date - 날짜와 시간을 지정받음
수치 타입
color - 색 선택
number - 수치선택
range - 수준 (달성도) 선택
label 태그 - 입력요소에 라벨을 붙이는 역할, 이를 이용하면 웹 이용자에게 더 직관적 입력요소를 제공할 수 있고 코드 가독성 및 명확성이 향상됨
선택지 (select)
ㄴ option으로 표시할 수 있음
ㄴ value 속성으로 값 구별 가능
여러줄의 텍스트
ㄴ textarea cols 클 수록 가로로 길게 입력 받을 수 있음
ㄴtextarea rows 클 수록 세로로 길게 입력 받을 수 있음
progress 작업 진척도 입력
ㄴmax - 작업량의 최대치
ㄴvalue - 화면에 표시할 진척도 표시
button - 클릭을 입력받는 요소
서버 - 정보를 제공하는 호스트
from 태그 - 입력양식 (ex 로그인, 회원가입, 검색어입력 등)
ㄴ입력 요소를 감싸며 서버측으로 제출(submit)할 수 있다
ㄴ 헤당 태그 안에 강의들에서 학습한 여러 태그 적용하면 개별항목으로서 역할 수행할 수 있음
ㄴ from 역할 수행을 위한 속성
- action 입력값 전송 url
- method 클라이언트가 입력한 데이터를 어떤 식으로 전송할 건지 (GET or POST)
L GOT - 서버에 요청하여 응답 받아냄
L POST - 서버에 요청을 보내어 작업 수행 (서버 데이터를 추가/수정/삭제한 후 응답을 받아냄, 서버의 정보를 조작하겠다는 성격의 요청)
from 요소 안에 다양한 양식을 만들 수 있음 그래서 각 입력요소 안에 name(식별자) 속성을 추가하여 각 입력항목의 역할을 구별할 수 있음
의미론적인 코드
시맨틱 태그 - 의미론적인 태그
ㄴ 이 태그는 이 요소가 가진 목적이나 역할이 무엇인가를 나타냄
ㄴ대부분의 시맨틱 태그는 컨테이너 태그(span div) 와 같이 특별한 스타일을 제공하진 않음
ㄴ검색엔진은 시맨틱 태그명을 중요한 단서로 봄
ㄴ시각장애가 있는 사용자가 화면판독기로 페이지를 탐색할 때 참조
'ㄴ가독성 좋아짐
ㄴ컨테이너 남용을 방지할 수 있어 코드 쓰기 편함
주요 시맨틱 태그
ㄴ article 독립적인 콘텐츠
ㄴaside 별도의 콘텐츠
ㄴdetails 추가적인 상세정보
ㄴfigcaption figure 자막
ㄴfigure 설명 붙는 독립적인 컨텐츠
ㄴfooter 맺음말
ㄴheader 머릿말
ㄴmain 주된 콘텐츠
ㄴnav 네비게이션 링크
ㄴsection 콘텐츠의 섹션 (절)
ㄴsummary detail 헤더
ㄴtime 강조할 시간
meta 태그 - html 문서에 대한 메타데이터
ㄴ메타데이터란 데이터에 대한 데이터 '정보'를 의미함
ㄴmeta 태그에는 head 태그 안에 들어가며 일반적으로 문자세트 페이지설명 키워드 문서의 작성자 및 뷰포트 설정을 지정하는데 사용됨
-meta 태그를 사용하는 이유? ; 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고 검색 결과에 반영할 수 있음
meta 태그가 제공하는 메타데이터의 유형
ㄴcharset - 문자 세트
-문자 인코딩에 대한 요약정보 속성
ㄴhttp-equiv -콘텐츠 속성 정보에 대한 http 헤더
-인터넷에서 데이터를 주고 받을 수 있는 프로토콜
-해당 코드가 http 관련 정보 지정하면 content가 그의 대한 정보를 지정함
ㄴname - 문서 정보ㄴ
-content 속성을 값으로 하여 문서 정보를 이름+값 쌍의 형태로 제공할 때 사용
-해당 속성으로 문서 정보 입력 시 검색 최적화에 도움을 줌
ㄴ content - 메타데이터 내용
