FrontEnd/HTML&CSS
09_Form,input
웹 서버에 정보를 제출하기 위한 양식 범위를 정의 이 다른 을 자식 요소로 포함할 수 없음. 속성 의미 값 기본값 action 전송한 정보를 처리할 웹페이지의 URL URL autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 on, off on method 서버로 전송할 HTTP 방식 GET, POST GET name 고유한 양식의 이름 novalidate 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 target 서버로 전송 후 응답받을 방식을 지정 _self, _blank _self form은 쉽게말하면 내가 웹사이트에 로그인, 보내기 등으로 뭔가 정보를 보낼때 묶을 수있는 태그이다. 그중 대표적인 형식으로 이 있는데, 사용자에게 입력 받을 데이터 ..
08_표 콘텐츠
이번엔 표 콘텐츠에 대해서 공부하였다. , , , 데이터 표()의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성. (Table Row, Table Header, Table Data) -블럭요소와 비슷함. table태그를 사용하여 만들면 되고 표의 헤더,데이터에 나누어서 tr,th,td등 데이터로 나누어서 사용하면 된다. 데이터 타입 값 1 알파벳 A 1 숫자 7 아주간단하게 만들어본 표이다. table{ border-collapse: collapse; } td{ border : 1px solid red; padding : 10px; } th{ border : 1px solid red; padding : 10px; background: lightblue; } 위 css를 적용하여서 색을 적용해보..
07_내장요소
내장요소로 iframe, canvas, script를 배웠다. iframe은 다른 html을 불러오는거, canvas 는 js를 이용하여 그림을 그릴 수있는공간이고 script는 말 그대로 스크립트들을 가지고 올 수있는 것이다. 더보기 iframe 다른 HTML가져오기 name 프레임의 이름 src 포함할 문서의 URL URL width 프레임의 가로 너비 height 프레임의 세로 너비 allowfullscreen 전체 화면 모드 사용 여부 불린(Boolean) frameborder 프레임 테두리 사용 여부 0, 1 1 sandbox 보안을 위한 읽기 전용으로 삽입 불린(Boolean) or allow-form: 양식 제출 가능, allow-scripts: 스크립트 실행 가능 , allow-same-o..
06_멀티미디어(img,audio,video)
이번에는 HTML을 이용하여 사진,소리, 비디오를 넣는법을 알아보겠다. 저번에 공부한 내용에서 이미지는 인라인형식이고 기초적으로 넣는것은 배웠는데 이미지파일들을 사이즈에 맞게 분류해두고, 출력되는 화면에 따라 다르게 출력되는 것도 확인할 수 있었다. 하지만 수행결과가 위처럼 나온다고 생각하면 안된다. width를 설정해두었기 때문이다. 개발자 옵션을 통해 브라우저 창을 통해 조절하면, width가 고정되어 사진의 크기는 400으로 고정되나, 이미지는 small medium large 으로 계속 바뀌게 되는 것을 알 수 있다. 더보기 src (필수)이미지 URL URL alt (필수)이미지의 대체텍스트 width 이미지의 가로 너비 height 이미지의 세로 너비 srcset 브라우저에게 제시할 이미지 U..
05_HTML 인라인 요소
오늘은 HTML 여러 인라인 요소에 대해 공부했다. 우선 태그부터 살펴보자. 더보기 이멜주소,우편 등 다른 URL로 연결할 수 있는 하이퍼링크 download 리소스를 다운로드하는 용도로 사용됨을 의미 href ( 하이퍼 텍스트 레퍼런스) hreflang 링크 URL페이지 언어 rel 현재 문서와 링크 URL의 관계 target 링크 URL의 표시 (브라우저탭) 위치 : _self, _blank 다음과 같은 성질을 가지고 있다. Google_blank Google_self README.md Image download 목차 제목1 제목2 Using HTML is fun and easy 제목1 제목2 제목3 a{ } .box { font-weight : bold; width : 100px; line-heig..
04_content 구분 & 문자콘텐츠
오늘은 HTML의 콘텐츠들의 역할 및 사용법을 간단하게 공부했다. header - 제목정보들 footer - 페이지 맨 하단 6단계의 문서 제목 구현 aside - 광부부분? 오른쪽에 따로 되어져있는 부분 nav - navigation address - 연락처 제공 위에 모두 블럭요소 (영역설정,레이아웃설정!) 우리가 책을 읽을때도 목차부터 해서 큰주제부터 작은주제로 나누어지듯이 사이트들도 만들어지게 된다. Apple Apple Banana Mango Banana Mango Apple Apple Banana Mango Banana Mango ul은 순서를 구분할 수 있는데 파이썬 함수안의 key값들로 추가기능을 할 수있는거같은 기능들이 포함되어 있다. 코드와 실행화면을 한번씩만 보면 바로바로 이해가 될 ..