📌 html

👉Block tag vs inline tag 차이점 

Block tag : 전체 너비만큼 자리를 차지함 

inline tag : 자기 자신의 크기만 자리를 차지 

*태그 중첩 규칙 

1. 블록태그 내부에는 블록태그와 인라인 태그 모두 중첩 될 수 있다. 

1. 인라인 태그 내부에는 인라인 태그만 중첩 될 수 있다. 

1. 블록태그 중 문단태그는(p) 블록태그지만 내부에 인라인 태그만 중첩될 수 있다. 

( ex) p태그안에 블록태그 넣으면 분리됨) 

👉텍스트 서식 

<b> : 두꺼운 

<strong> : 두꺼운/중요한 

<i> : 기울임 

<em> : 기울임/중요한 

<ins> : 밑줄 

<del> : 텍스트 중앙 취소선 

<q> : 짧은 인용문을 표현할 때 적합한 인라인 태그 

<blockquote> : 긴 인용문을 표현할 때 더 적합한 블록태그 

👉리스트 태그 /링크태그 

리스트태그 : 목록을 생성하는 블록태그로 목록의 성격에 따라 <ul> <ol>로 나눔 

<ul> : 순서가 없는 리스트 (점으로 기호 표시) 

<ol> : 순서가 있는 리스트 (숫자로 기호 표시) 

링크 태그 : 웹 문서에서 링크를 생성 할 때 

<a href=”연결하는 링크 주소” target=” ”> 이동하는 링크 </a> 

*target : 어떻게 연결할 지 구분하는 속성 

__self : 해당 탭에서 이동 

_blank : 새로운 탭이 열림 

👉이미지/비디오/오디오 태그 

<img src=”경로” alt=”코멘트” width=”” height=”” > 

<video controls width=”” height=”” src=”” ></video> 

//controls : 브라우저에서 지원하는 비디오 컨트롤러 사용하기 위한 속성 

<video controls src=”” ></video> 

👉이미지/비디오/오디오 태그 

<img src=”경로” alt=”코멘트” width=”” height=”” > 

<video controls width=”” height=”” src=”” ></video> 

//controls : 브라우저에서 지원하는 비디오 컨트롤러 사용하기 위한 속성 

<video controls src=”” ></video> 

👉div(블록) /span(인라인) 

• 정해진 역할이나 필수적으로 요구되는 속성이 없고 다른 태그들의 모양이나 배치를 변경하지 않는 비어있는 태그 
• css 또는 js 와 함께 작동하기 위해서 class와 id라는 속성과 함께 사용 

👉class/id 

• css 또는 js 와 함께 작동 
• Html 태그를 특정 하기 위해 사용되는 속성 태그에 이름을 붙일떄 사용되는 속성 

• id를 가져올때는 # class를 가져올때는 .을 사용 
• class는 id와는 다르게 다른 태그에 중복적으로 사용가능하고 하나의 태그에 여러 개의 클래스를 지정할 수있다 
•  

👉form/input태그 

<Form> : 사용자의 입력을 받아서 데이터를 웹 서버 등으로 전송할 때 사용하는 태그 

<input type=”입력받을 속성” placeholder=”글자입력”/> 

1. <input type=”button/reset/submit” value=”글자입력”/> 

Button : 클릭했을 때 아무것도 하지 않는 버튼 

Submit : 서버로 form 내용을 제출(전송)하는 버튼 

Reset : Form의 내용을 모두 초기값으로 되돌리는 버튼 

//label 태그를 이용해서 input의 이름을 지정 

1. <input type=”radio/checkbox” value=”글자입력”/> 

단일 선택은 라디오 다중선택은 체크박스 

1. Form태그에서 서버로 전송하는 방법 

Action : 데이터를 전송할 주소를 지정 

Method : 서버에 전달할 방법 지정 

1. get : 서버로부터 정보를 조회하기 위한 메소드 

2.post : 리소스를 생성하거나 변경하기 위한 메소드 

👉의미론적 태그 

<header> 

<section> 

<nav> 

<main> 

<footer> 

<article> 

👉웹 접근성/웹 표준/SEO 

웹 접근성 : 웹 사이트에서 제공하는 정보를 신체적인 조건이나 환경적인 조건 없이 동등하게 접근할 수 있도록 보장하는 것 

웹 표준 : 웹에서 표준으로 사용되는 기술이나 규칙 (html/css/js) 

SEO(검색엔진 최적화 : 웹사이트가 상위노출되게끔 하는 것 

참고 : https://www.youtube.com/watch?v=OJsm1hdOZ5o&list=WL&index=3