-
HTML / poiemaweb 220704DEV/HTML 2022. 7. 4. 21:25728x90반응형
PoiemaWeb을 보며 공부한 내용
1.2 HTML5 기본 문법
HTML - HyperText Markup Language
웹페이지를 기술하기 위한 마크업 언어임
웹페이지의 내용과 구조를 담당
HTML5는 차세대 웹표준으로 다양한 기능들 추가됨
멀티미디어, 그래픽, 통신, 디바이스 접근, 오프라인 저장소, 시맨틱 태그, CSS3
HTML5는 반드시 <!DOCTYPE html>로 시작해서 문서형식을 HTML5로 지정해야함
실제 html은 <html>태그 사이에 기술되며 <head>사이에는 title, 외부 참조 파일, 메타데이터 등이 위치하고
출력요소는 <body>에 위치함
요소는 시작태그와 종료태그 그리고 태그 사이에 위치한 콘텐츠로 이루어지며, 이 집합들로 html이 만들어짐
태그는 대소문자 구분하진 않지만, 일반적으로 소문자를 사용함
각 요소들은 중첩될 수 있으며, 이때 부자관계가 만들어진다.
그리고 제일 상단에는 <html>태그가 존재한다.
파악하기 쉽도록 indent 활용하는 것이다.
content가 없는 요소는 빈 요소라고 하며 어트리뷰트만 가질수 있는데,
대표적으로 br, hr, img, input, link, meta 등이 있다.
위에서말한 어트리뷰트는 속성이며, 요소는 어트리뷰트를 가지는데, 추가적인 정보를 제공하는 것임
어트리뷰트 중에서 특정 엘리먼트에 속하지 않고, 공통으로 사용할 수 있는 어트리뷰트가 있는데, 글로벌 어트리뷰트라고 부름
id, class, hidden, lang, style, tabindex, title 등이 있음
1.3 시맨틱 웹
SEO같은 걸로 자신의 웹사이트를 검색에 맞게끔 최적화하는데, 이는 검색엔진에 로봇이라는 녀석이 있기 때문.
로봇이 매일 전세계의 웹사이트 정보 수집하며, 이용자가 검색할만한 키워드를 미리 인덱싱 해둠
인덱스 생성할 때 검색 로봇이 수집한 정보를 사용하는데, 그것이 바로 HTML 코드이며 그 안의 시맨틱 요소를 해석함
검색엔진은 보통 h1의 요소를 중요하게 인식하고 인덱스에 포함시킬 확률이 높음
시멘틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히하며, 수많은 메타데이터들을 통해 의미와 관련성 있는 데이터베이스를 만드는 것임.
그래서 div나 span같은 경우 시멘틱 요소가 아니며, form, table, img등은 콘텐츠 설명을 명확히 하니 시멘틱 태그라 할 수 있음
대표적인 시멘틱 태그
header, nav, aside, section, article, footer
1.4 웹페이지의 기본 태그
문서형식 태그 - 최상단 위치하며 대소 구분 x
<!DOCTYPE html>
html tag - 모든 html의 부모 요소이며, 웹페이지에 단 하나만 존재 위의 문서형식 태그는 제외
html은 글로벌 어트리뷰트를 지원하며 lang을 사용하는 경우가 다수
head tag
head는 메타데이터 포함하기 위한 요소로 웹페이지에 하나만 존재.
메타 데이터는 HTML 문서의 title, style, link, script로 화면에 표시되지는 않음.
body tag
HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재.
1.5 Text
h 1~6 - 제목, 시멘틱 웹의 의미를 살려 제목 이외에는 사용하지 않는 편이 좋음
b blod
strong blod&sementic
i italic
em italic&sementic
...
1.6 Link
사용자가 원하는 대로 정보를 취득할 수 있도록 도움을 주는 것
href 속성
이동하고자 하는 파일의 위치(경로)를 값으로 받음.
파일경로는 절대경로와 상대경로가 있음
target 어트리뷰트는 윈도우를 어떻게 오픈할지 알려줌
_self 현재 윈도우에서 _blank 새로운 윈도우나 탭에서
1.7 List
ul - unordered List
ol - ordered list
해당 태그에는 type어트리뷰트를 통해 순서를 나타내는 문자 지정 가능
start 어트리뷰트로 리스트의 시작값 설정 가능
reverse는 말그대로 반대로
중첩목록 가능하며 보통 내비게이션 메뉴 만들때 사용됨
Table
표를 만들때 사용하는 태그(표를 감싸는 태그임)
tr - 표 내부의 행
th - 행 내부의 제목 셀
td - 행 내부의 일반 셀
표를 꾸미는데 border을 사용할 수 있는데 CSS걍 쓰는게 더 좋음
rowspan, colspan은 표를 합치거나 할때 사용함.
1.8 이미지와 멀티미디어
img - src, alt, width, heigth
audio - src, preload, autoplay, loop, controls
video - src,poster(준비중에 나올 img 경로), preload, autoplay, loop, controls(재생도구), width, heigth
1.9 Forms
사용자가 입력한 데이터 수집하기 위해 사용
입력 양식 태그를 포함할 수 있음
action - url 입력 데이터가 전송될 url 지정
method - get/post 입력 데이터의 전달 방식 지정
입력데이터를 서버에 전달하는 방식이 method
get
전송 url에 입력 데이터를 쿼리 스트링으로 보내는 방식
ex) https://ex.com/posts?userId=1&id=1
전송 url 바로 뒤에 ?를 통해 데이터 시작 알리고, key-value형식의 데이터 추가
1개 이상 전송 데이터는 &로 구분 지음
URL에 전송 데이터 모두 노출됨
rest api에서 get 메소드는 모든 또는 특정 리소스의 조회를 요청하는 것임
post
request body에 내용을 담아 보냄
url에 정보 노출 되지 않지만 느림
rest api에서 post메소드는 특정 리소스 생성 요청
submit 클릭 되면 input 태그에 입력된 데이터가 form 태그의 method 어트리뷰트에 지정된 방식으로 전달됨
input은 엄청 중요한 태그임
다양해서 다 적기는 그럼
select 복수개의 리스트에서 복수개 아이템 선택
select - form 생성
option - option 생성
optgroup - 그룹화
textarea
button - input태그와 달리 텍스트나 이미지 같은 요소 사용 가능
button, reset, submit같은 어트리뷰트 사용할 수 있으나,
브라우저에 따라 전송되는 값이 다를 수도 있음
fieldset/legend
1.10 태그 구조
공간분리를 위해 보통 div span table을 활용해서 다양한 구조를 만듦
하지만 div태그는 시멘틱하지 않기 때문에
header, nav, aside, section, article, footer을 쓰는게 좋음
이또한 브라우저마다 적용 가능 범위가 다름
반응형