코린이

태그의 종류에 상관없이 모두 사용할 수 있는 속성 class, id, style 속성 → css와 연관 abcd class 속성 : 한 페이지에 여러 개의 값이 와도 됨 id 속성 : 여러개 x (unique) style 속성 : css코드를 적기 위해 제공 title 속성 : html요소에 추가적인 정보를 툴팁 형태로 제공 hidden 속성 : 값을 숨겨줌 (="hidden" 생략가능) lang 속성 : 언어속성 표현 data 속성 : data-aa, data-b 등 사용자가 임의로 원하는 속성을 만들어서 사용 가능

오디오 태그 사용 비디오 태그 사용 브라우저 마다 지원되는 형식이 다름 → source태그로 해결 지원하지 않는 브라우저입니다. Semantics 태그 (검색 엔진 노출 최적화) - : 웹사이트의 헤드 영역 (사이트의 로고, 로그인, FAQ등) - : 웹페이지의 내부영역과 외부영역 연결하는 링크영역을 구분하는데 사용 - : 웹페이지에서 논리적으로 관련된 내용과 영역을 나타낼 때 사용 → h(n)태그 중 하나가 반드시 사용되어야 함 (권고) - : 웹페이지 내에서 독립적으로 나타낼 수 있는 콘텐츠 - : 웹페이지 사이드에 있는 내용들 (로그인, 광고배너 등) - : 사이트의 마지막부분, copyright등 - : head와 footer 사이의 주요 컨텐츠 - - 이미지 구역화 - - 이미지 설명

태그 사용 태그를 통해 표제목 표현 (필수) 로 행 생성 tr로 생성한 행 내부에 로 열들 생성 th vs td th태그는 표에서 제목성격을 나타내는 셀을 표현 td태그는 일반적인 셀 1000원를 통해 여러개의 행을 병합할 수 있음 2500원를 통해 여러개의 열을 병합할 수 있음 구조화 (필수는 아님, 표에 따라 tfoot은 없어도 됨) 표에서 제목을 나타내는 영역을 그룹화 순수한 데이터 부분 그룹화 꼬릿말부분 그룹화 ※주의 tbody태그 전에 tfoot태그 사용하기 (스크린 리더기 등의 웹 접근성 향상 관련 때문에) + caption태그 다음에 사용가능 연관있는 데이터 셀 범위 지정 → scope사용 ex. 구분 전공 교양 구분 1학년 (2개이상의 col이나 row 범위 지정 가능)

태그 type=""만 입력하고 ""사이부분에 커서를 놓고 컨트롤 + 스페이스바를 누르면 사용가능한 type들이 나옴 태그 입력요소에 어떤 것을 입력하면 되는지 텍스트로 표현할 때 의미있게 코드를 작성하기 위한 태그 for 속성을 사용하여 아이디: 형태로 사용하면 label의 글자만 클릭해도 입력요소가 활성화 명시적인 방법과 암묵적인 방법으로 구분 위와 같은 방식이 명시적인 방법임 암묵적인 방법 → label테이블을 form테이블의 자식으로 사용 ex. 아이디: (for속성, id속성 필요X) 암묵적+명시적 방법 혼합사용 하기도 함. 태그 - 상호작용 요소를 그룹화 하는데에 사용 태그 - 그룹화한 필드셋에 이름을 지정하는 태그 태그 - 여러 줄을 입력할 수 있는 입력요소 태그 - 선택지중 선택하도록 선택상..

이미지 링크 - 이미지에 링크를 연결하는 것 a태그를 img 태그로 감싸면 이미지 링크를 구현할 수 있다. → 하나의 이미지에 하나의 링크만 연결 가능 이미지 맵 - 하나의 이미지 위에 여러개의 링크를 생성하여 연결할 수 있는 기술 좌푯값으로 링크 영역을 그려냄 usemap, , ex. shape = "circle"등 다양한 형태 가능 아래의 링크를 통해 이미지 좌표를 쉽게 얻을 수 있음 https://www.image-map.net

ul태그 - 비순서형 목록 태그 (list item)을 이용해서 목록을 추가함 ol태그 - 순서형 목록 태그 type 속성을 활용해 카운트형태를 다르게 할 수 있음 (type="I", type="A" 등) dl태그 - 정의형 목록 태그 하위 자식태그로 태그를 가질 수 있음 - 용어의 정의 - 용어의 설명

(시각 + 의미) strong태그 - 중요한 텍스트를 나타낼 때 사용 ex. 중요: 기계적 결함. em태그 - 텍스트를 강조하고 싶을 때 사용 (텍스트를 기울임꼴로 출력) ex. 이 놀이기구는 임산부, 어린이, 노약자는 탑승할 수 없습니다. strong태그와 em태그는 중첩해서 사용 가능 (서로, 같은) → 같은 태그를 여러번 중첩할 경우 시각적으론 같지만, 의미적으로 좀 더 중요(강조)한 것 으로 처리됨 (시각) b태그 - 단순하게 텍스트를 굵게 해줌 (시각적으로만) i태그 - 단순하게 텍스트를 기울여줌 (시각적으로만)

- image (이미지) img 태그는 빈태그이다. 내부 리소스 이미지 방법 src 속성 이용 → 이미지 파일의 경로 ./ → 현재 폴더 (html이 실행되고 있는 현재폴더 기준) ../ → 상위 폴더 (중첩 사용 가능) ../../ → 상위 폴더의 상위 폴더 alt 속성을 사용해 이미지가 올바르게 표현되지 않았을 때, 글로 설명 가능 외부 리소스 이미지 방법 이미지 태그를 a태그로 감싸는 경우 ex. → 이미지를 클릭하면 해당 링크로 이동함 (이미지 링크) + target="_blank"를 사용하면 새 창으로 띄움