프론트엔드 공부한 거 정리하기

video, audio 태그 웹 브라우저에서 플러그인 도움 없이 재생 다양한 브라우저에서 재생될 수 있도록 하기 위해 source 태그 사용 모던 브라우저에서는 video 태그만 작성해도 동작 video, audio 태그 속성들 poster="대체 이미지." 영상을 불러오지 못하거나 불러오기 전에 보이는 이미지 autoplay 자동재생(크롬의 경우 반드시 음소거가 되어있어야 실행) muted 음소거 loop 반복 controls 컨트롤 바 표시 preload 재생 전 파일 미리 불러옴. autoplay와 함께 사용되는 경우 적용 안 됨.

인라인 요소 폼과 관련된 요소에 이름표 지정 label 요소를 정의함으로써 폼 요소와 연관시킬 수 있음 의 아이디 값과 for 값이 동일해야 연결됨 태그의 범위가 크지 않거나 input요소로 감쌀 수 있는 인라인 요소일 때 값 생략 가능 연결 방법1 이름: 태그의 범위가 크거나 특정 태그 사이에 들어갈 수 없어 label 요소로 감쌀 수 없을 때 label for 값과 id값 동일하게 작성. 연결 방법2 과일 선택 사과 바나나 폼 그룹화 태그 fieldset 같은 주제를 가지고 있는 폼 관련 요소를 구분지을 때 사용 fieldset 요소의 제목: legend fieldset 요소 안에 작성되어야 하며 하나의 fieldset 안에 한번만 사용 회원가입 이 름 : 이메일 : 휴대폰 : 가입 취소 약관 이 안..

form 기본 form 관련 태그들 중 최상위 태그 폼 관련 태그들이 제대로 실행 되려면 form 태그를 반드시 작성해야 함 "method"="get" 간단한 데이터 전송시 사용. "method"="post" http 헤더에 숨겨져 서버로 전송. 일정 크기 이상의 데이터 전송시 사용. 데이터가 주소 입력란에 표시되지 않아 보안 유지 action="정보를 전송할 서버 주소" 다양한 폼 관련 태그들 인라인 요소로 폼 안의 기본적인 필드 값을 만들 때 사용. 빈요소 input 요소의 type 속성 값에 따라 역할이 달라짐. name="데이터 이름" maxlength="value 최대길이 (문자수)" minlength="value 최소길이 (문자수)" placeholder="컨트롤 박스 안의 힌트" requir..

, , , 은 함께 작성해야 표가 만들어 짐. : 테이블 작성 시 시작을 알리는 태그 : 테이블의 행(줄) : 테이블의 셀(칸). 셀의 소제목 : 테이블의 셀(칸). 일반적인 셀 * 셀 안의 컨텐츠는 세로 중앙 정렬이 기본. * 셀 안의 컨텐츠 경우 th는 가로 중앙 정렬, td는 가로 왼쪽 정렬 * table 요소에 width 값 적용시 각 셀의 제어가 어려움 * 셀 하나에 가로, 세로 값을 주면 일반적으로 나머지 셀들도 따라감 소제목 셀 칸 1 테이블 셀의 크기는 다른 셀의 크기에 영향을 받는다 열 병합 colspan column + span의 합성어 colspan은 속성이며 값을 가져야 한다. 뒤에 오는 셀(th, td)과 병합. 즉 다른 열과 합치는 속성 으로 작성하며 값에 입력된 수만큼의 열을 ..

이미지 태그는 로 닫는 태그가 없다. 인라인 요소 빈 요소, 빈 태그로 종료 태그 없음 src="이미지 경로" alt="이미지 대체 텍스트" alt의 경우 웹표준의 기본이므로 꼭 작성. 컨텐츠로 분류되고 닫아주는 태그가 없음에도 범위를 가지며 가로 세로 값 조절 가능 태그의 성격 독립적 콘텐츠 태그 블록 요소 독립적 콘텐츠 그룹 작성시 사용 설명문, 시, 도표, 삽화, 인용문 등을 구분하고자 할 때 사용 : figure의 자식으로 항상 이미지를 따라다니며 설명, 즉 캡션을 덧붙일 수 있으며 생략 가능. 웹 접근성과 웹표준을 위해 태그의 alt 속성은 필수이나, 을 작성할 경우 생략해도 된다. 태그 사이의 공백 image 태그는 인라인 요소로 띄어쓰기와 행간, 수직 정렬의 값을 가짐. image가 문자로 ..

앵커anchor 태그 a href 속성을 이용하여 하이퍼 텍스트 설정 **인라인 요소 MDN 사이트 바로가기 href 속성을 이용하여 다른 페이지나 같은 페이지 내 어느 위치, 파일, 이메일 주소와 연결된 url을 만든다. 링크를 의미하는 밑줄로 표기 기본 색상은 파란색 방문한 적이 있는 곳은 보라색 마우스로 누르고 있으면 빨간색 a의 속성 값은 ""의 형태로 비워두지 않음 href="#"처럼 임시링크 기호로 대체 표기 target="_blank" 새창으로 열기 속성 임시 링크 기호 # 0. 태그는 인라인 요소 1. 태그로 작성하며 지정된 범위 내의 텍스트는 url로 처리되기 때문에 닫는 태그의 위치를 잘 체크해야 한다. 2. : href 속성과 링크 주소를 값으로 입력해 해당 링크의 위치를 설정..

페이지 제목 페이지의 내비게이션 영역 메뉴 메인 컨텐츠 영역 내용 사이드 내용 하단 바닥글 주소 & 연락처 예전 방식의 HTML 레이아웃 구조 div : 단순히 구분을 위해, 블록으로 묶어주기 위해 작성 header : 페이지의 머리글. 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자 이름... h1 : 페이지의 제목, 로고 nav : 페이지의 내비게이션 영역(사이트 내,외부로 이동). 메뉴, 목차, 색인... 메뉴 main : 메인 컨텐츠 영역. 문서 내에서 *반드시* 한 번만 사용. 다른 header, footer, nav, article, section, aside의 하위로 작성할 수 없음. article : 독립된 컨텐츠. 제목 태그와 함께 작성. 게시판, 블로그, 뉴스, 매거진 등... sect..

1. 순서가 있는 목록 태그 순서가 있는 목록 태그는 로 작성한다. 은 블록 요소이며 자동으로 숫자가 부여되는 리스트 태그다. ol과 li 사이엔 다른 태그가 올 수 없다. li태그 안에는 다양한 다른 태그들 작성 가능. ol과 li는 함께 사용. 둘 중 하나만 사용할 수 없다. 꼭 순서가 필요한 리스트에 작성. start 속성 작성 시 작성한 숫자부터 시작. 기본적으로 1부터 시작되지만 시작되는 숫자를 지정하고 싶으면 start 속성을 사용한다. start 속성을 작성하면 1부터 시작하는게 아니라 10부터 시작하게 만들 수 있다 특정 목록의 번호를 지정하려면 value 속성을 사용한다. start 속성을 작성하면 1부터 시작하는게 아니라 10부터 시작하게 만들 수 있다 이것만 15로 만들고 싶다. 2...

1. 콘텐츠 분할 태그 대표적인 블록 요소 콘텐츠 분할 div 가장 대표적인 블록 요소 구조를 나누기 위한 태그로 브라우저상의 특징이 없음 브라우저 화면에 나타나는 스타일이 없기 때문에 단순히 레이아웃을 구성하기 위해 사용. id, class 속성과 함께 사용. 2. 콘텐츠 분할 태그 대표적인 인라인 요소 콘텐츠 분할 span 가장 대표적인 인라인 요소 인라인으로 구조를 나누기 위한 태그. 브라우저상에 나타나는 특징이 없음. 주로 다른 텍스트와 구분하고 싶지만 적절한 태그가 없을 때 사용. id, class 속성과 함께 사용.

1. 인용 태그 인용 태그 blockquote 블록 요소 cite="인용된 사이트의 주소" 속성과 값을 가짐 헤밍웨이의 대표적 명언: 한 마리의 고양이는 또 하나를 데려오고 싶게 만든다. 2. 사용자 정보 태그 사용자 정보 태그 address 블록 요소 연락처, url, 주소, sns, 사업자명, 사업자번호 등등 우)16455 경기도 수원시 팔달구 향교로 1번길 20 tel. 031-895-5782