HTML

표준색상명(140개)으로 나타냄 RGB(0~255, 0~255, 0~255)- red/green/blue 색의 3원소 값을 주어서 나타냄 #16진수값 - HEX == 16진수 RGBA(alpha 투명도 0.0~1.0) HSL - hue(색조) / saturation(채도) / lightness(밝기, 명도) 색조 : 0~360 / 채도 : 0~100% / 밝기 : 0(검정)~100%(흰색) 0(빨강) / 120(녹색) / 240(파랑) HSLA(alpha 투명도 0.0~1.0

1. html 미디어 처리 1) 웹 상에서의 멀티미디어는 사운드, 음악, 비디오, 영화 및 애니메이션 등이 있다. 2) 일반적인 비디오 형식 : .mpg , mpeg, .avi, .wmv, .mov, .swf, .webm, .mp4 등등 *** html 표준: mp4, ogg, .webm 만 지원한다. YouTube에서는 mp4 형식을 권장한다. 3) 일반적인 오디오 형식 : .wav, .ogg, .mp3, .wma 등등 *** html 표준: mp3, ogg, .wav 만 지원한다. 2. 비디오 1) video 태그 사용 2) width, height 속성을 설정하지 않으면 동영상이 로드되는 동안 웹페이지가 깜빡일 수 있다. 3) controls 속성 추가(재생, 일시정지, 볼륨조절 등등 비디오를 컨트..

1. canvas 태그 (빈도화지) - 웹 페이지에 그래픽을 그리는데 사용되는 태그 - js를 사용해서 그래픽을 그리는데 사용되는 컨테이너 역할 - 원, 텍스트, 이미지 등등 그림 - id 속성 필수(why? js 코딩할 때 접근할 수 있도록 설정함) - width, height 속성으로 크기를 지정 2. svg 태그 - SVG 그래픽을 위한 컨테이너 - SVG ? xml 형식의 벡터 기반 그래픽을 정의한 것 V : vector - 벡터 기반 ? 확장 가능한 그래픽을 벡터 기반이라고 한다. - 깨지지 않는 것을 SVG 그래픽이라고 한다. 3. 차이점 - canvas : js를 사용해서 그래픽을 그릴 수 있는 컨테이너 - SVG : xml를 사용해서 그래픽을 그릴 수 있는 컨테이너

1. form 태그와 jsp 처리 맛보기 - 사용자 입력 처리를 하기 위해 사용하는 태그들..(사용자 입력 처리 -> 서버 전송 처리) 자바서버페이지 서버 처리 -> 응답 ㄴ java server page == jsp 2. form 태그 1) form 태그는 웹 페이지의 정보를 다른 페이지로 전송하는 역할을 한다. 2) 단순히 텍스트 내용만 보여주는 페이지말고 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 태그 요소이다. 3) action 속성은 폼을 전송할 서버 쪽 스크립트 파일을 지정한다. 즉, form 태그에서 작성된 데이터를 어떤 jsp 파일로 정할지 action 속성에 값을 지정해준다. 4) name 속성은 form 태그를 식별하기 위한 이름을 지정하는 속성이다. 5) m..

1. inline + frame(윈도우, 창)의 줄임말 2. 인라인 프레임 == 현재 html 문서 내에 또 다른 문서를 포함하는 데 사용 3. 웹 페이지 내에 웹 페이지를 표시하는 데 사용 4. 왜? 웹 페이지 내에 웹 페이지를 표시하는가? > 결론 : 유지보수가 쉽기 때문에 ex) 약관 관련된 내용이 여러 개의 페이지에 동시에 뿌려졌다면 수정할 때 페이지마다 수정해야됨 iframe을 사용하면 한 번만 수정하고 뿌리면 끝! 5. 예제 - http://trio.co.kr/club/public/clock.html 에서 F12 누른 후 코딩을 복사하여 새로운 html 파일에 붙여넣기

1. div 태그로 배치(layout)하기 div(배치, layout) + css(float) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur architecto alias animi facere perspiciatis ut fugit sit ab ratione a. Officiis culpa officia facere iure asperiores expedita iste hic maiores. Maiores sed quis porro sit nam cum commodi voluptatum nemo quas perspiciatis est voluptates sapiente aut quos inventore perferendis t..

1. div 태그 설명 1) 웹 페이지의 배치(layout)를 담당하는 태그이다. 2) 블럭 모드이다. 3) 일반적으로 다른 요소들을 담을 수 있는 컨테이너의 종류 중에 하나이다. * 컨테이너 : 다른 요소를 자식으로 가지고 있다. 2. javascript 코딩 맛보기 - js는 대소문자를 구분한다. - document.location="이동할 주소url"; - js 함수 만드는 형식) - var 키워드 : 변수 선언시 사용하는 키워드 3. jQuery 코딩 맛보기 - jquery.js 라이브러리를 설치해야 하는데 다운을 받아서 사용할 수도 있고 Using jQuery with a CDN으로 다운을 받지 않고도 사용 가능하다. 오늘 수업에서는 맛보기 정도라 script 태그를 이용하여 사용하였다. htt..

- 네이버 메인에서 보면 아래와 같은 메뉴를 Navigation Menu라고 한다. Home News Contact About li 태그는 블럭모드로 새로운 줄로 넘어가게 되어서 아래와 같은 결과가 나온다. 빨간 구분선은 ul 이며, 회색 구분선이 li이다. Home News Contact About li 태그 스타일에 float : left 설정을 주니 li 요소들이 하나의 줄로 나오게 되고 ul의 빨간 구분선이 위로 올라가져 있는 것을 확인할 수 있다. float : left 설정을 줌으로써 ul 태그 바깥으로 li 태그가 떠올랐다. == 오버플로워가 발생한 것 Home News Contact About li 태그 스타일에 float : left; 설정을 주고 ul 태그 스타일에 overflow: h..

1. 순서가 있는 목록 태그 - ol 태그(ordered list) - 자동으로 들여쓰기가 되어진다. - ol 태그의 type 기본 값은 1이다. - type 값으로 I, i, A, a를 줄 수 있다. A : 대문자 a : 소문자 I : 로마 대문자 i : 로마 소문자 - 태그로 list item을 나열한다. 2. 순서가 없는 목록 태그 - ul 태그(unordered list) - 자동으로 들여쓰기가 되어진다. - ul 태그의 type 기본 값은 disc 이다. - type 값으로 circle, square를 줄 수 있다. disc : 검은색 원 circle : 빈 원 square : 검은색 사각형 - 태그로 list item을 나열한다. - ul태그 스타일을 지정하면 ol태그처럼 순서를 줄 수 있다...