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

'favorites + icon' 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 기본 작성 방식 기본 이미지 사이즈 16 x 16 파비콘 link 태그는 영역 내에 작성해야 함. 가장 기본적인 파비콘 파일로 16x16 크기를 가짐 일반적으로 파비콘 파일은 root 폴더 바로 아래 index.html 문서와 같은 위치에 둠. // html 문서 ​ // manifest.webmanifest { "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } }

meta 태그 '~에 대해서'라는 의미를 가진 단어로 해당 html문서가 어떤 내용을 담고 있으며, 문서의 키워드, 작성자 등을 알려주는 웹페이지의 요약. 웹문서의 문자 인코딩을 나타내는 "문자 집합 선언" 페이지의 문자 인코딩을 선언하며 이 특성이 존재할 경우 그 값은 반드시 문자열 "utf-8"의 대소문자 구분 없는 ASCII(미국정보교환표준부호) 표현이어야 함 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문" -웹브라우저 서버에 명령을 내리는 속성. -name 속성을 대신해 사용할 수 있음. HTML 문서의 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해 사람들이 통일해서 쓸 수 있도록 정의해 놓은 프로토콜. ​ 해당 콘텐츠의 요약 내용이 SNS에 게시..

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...