FrontEnd
01_CSS개요,선택자,상속
HTML의 기본적인 이론부분 공부가 끝나서 CSS공부에 들어갔다. 이 둘을 전반적으로 공부해둬서 JS까지 공부한다면 많은걸 할 수 있을것 같다. CSS의 기본문법은 아래와 같다. 기본문법 : 선택자 { 속성 : 속성값; 속성 : 속성값; } HTML을 배우면서도 자주 사용했던 방식이라 그리 어색하진 않았다. CSS의 선언 방식 링크방식 직렬호출방식이다. 선택자(Selector) 기본 선택자 크게 어렵지 않다. 밑의 예를 한번만 읽어봐도 알 수 있다. 1. 전체 선택자. >요소내부의 모든 요소를 선택 *{ color : red; } 2. 태그 선택자 div,img,span 등 태그이름으로 요소 선택 3. 클래스 선택자 스팬태그의 orange클래스만을 지칭 자식 선택자 E > F > E의 자식요소 F를 선택..
10_전역속성, 기타 요소들
오늘은 HTML의 전역속성, 기타 요소들에 대해 공부했다. 이전에 공부하면서 배운내용들중에 틈틈히 계속 나온내용들과, 기본적인 개념이라서 어렵지는 않았다. 우선 class와 id에대해 보자 class (별명) 공백으로 구분한 요소의 별칭을 지칭 id (이름) 클래스와 유사하나 class는 여러개의 별칭을 붙일수 있는거와 달리 고유한 식별자 style css 요소 선언 안녕 안녕 안녕 안녕 안녕 안녕 계속 나왔던 개념이다. 참고로 head부분에 style부분을 추가해놨다. 가장 중요한건, class는 별명, id는 이름이란것만 생각하면 될 것 같다. title 요소의 정보를 지정(설명) lang 요소의 언어(ISO 639-1)를 지정 >보통 html태그 안에서 한번에 설정 data-* 사용자 정의 데이터 ..
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..