TIL05) html 복습

minji jeon·2022년 5월 12일

TIL_

목록 보기

5/61

기초적인 html과 css를 다루긴하지만 기본적인것들만 알고 있다.
무엇보다 기초가 튼튼해야 한다는 조언을 듣고 html부터 다 정리해보고자 한다. 내가 잘못알거나, 기억하고 있으면 좋은 내용 위주로 필기를 하였고,
https://poiemaweb.com/html5-semantic-web
포이마라는 사이트를 통해서 공부를 하였다. 상세하고 친절하게 정리가 되어있어, 앞으로 자주 들어가서 공부를 하게 될 것 같다.

HTML5 문서는 반드시 으로 시작

요소 : element

ex) <시작태그 > 콘텐츠 </종료태그>
-요소는 중첩이 가능하다 (요소는 다른요소를 포함할 수 있다.= 부자관계)
-빈요소 : 콘텐츠를 가질수 없는 요소. attribute만 가질 수 있다. ex) br, hr, input, link, meta

속성: attribute

속성. 특징을 정의,
ex) img src="html.jpg" 여기서 src를 지칭
-글로벌 attribute: 모든 html요소가 사용할 수있는 속성
ex) id, class, hidden, lang, style, tabindex, title

시맨틱 웹(Semantic Web)

시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. h1 요소는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.
이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.
non-semantic 요소: div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
semantic 요소:form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,
그림1
참고:https://poiemaweb.com/html5-semantic-web

meta tag

요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
ex) SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords을 정의한다.
웹페이지의 설명을 정의한다
웹페이지의 저자을 명기한다.
웹페이지를 30초 마다 Refresh한다.

제목태그 (heading)

시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다.
b tag vs strong tag : 외양은 동일. 웹표준을 준수하고자 한다면 strong 사용.
i tag vs em : 동일한 이탤릭체 이나 em이 시맨틱한 의미를 가진다.

href attribute

루트 디렉터리
파일 시스템 계층 구조 상의 최상위 디렉터리이다.
Unix: /
Windows: C:\
홈 디렉터리
시스템의 사용자에게 각각 할당된 개별 디렉터리이다.
Unix: /Users/{계정명}
Windows: C:\Users{계정명}
작업 디렉터리
작업 중인 파일의 위치한 디렉터리이다.
./
부모 디렉터리
작업 디렉터리의 부모 디렉토리이다.
../

절대경로 vs 상대경로

상대경로는 현재 작업하고 있는 파일 기준
fragment identifier: 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”)
참고: https://poiemaweb.com/html5-tag-link
_self vs _blank : 현재페이지에서 링크열기vs 새로운 페이지에서 링크열기
target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트할 수 있는 보안 취약점(Tabnabbing 피싱 공격)이 있다.
따라서 rel="noopener noreferrer"를 추가해 Tabnabbing 피싱 공격에 대비할 것을 권장한다. 참고로 noopener 속성은 성능 상 이점도 있는 것으로 알려져 있다.

form tag ( 나의 1일1벨로그참고)

form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.
action : url
method: get/post
get :GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다.
예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1
전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 ‘&’로 구분한다.
URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있다. (최대 255자).
REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청한다.
post:POST 방식은 Request Body에 담아 보내는 방식이다.
예) http://jsonplaceholder.typicode.com/posts
URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.
REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다.

input tag

input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.
input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분된다. form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 된다.