CSS3 Color (feat. alpha)

CSS3 COLOR CSS3에서는 컬러값을 rgba, hsla로 사용할 수 있다. 마지막 값인 alpha로 투명도 조절까지 가능해졌다. 또한 단계적 색 적용을 위한 그라디언트 속성이 추가되었다. 배경색 뿐 아니라 모든 색상의 속성을 지정하는 곳이면 사용 가능하다. 1. rgba([r],[g],[b],[a]); .rgbBox{ background:rgba(0,255,0,0.3); } r: 빨간색의 수치 0~255 g: 녹색의 수치 0~255 b: 파란색의 수치 0~255 a: 투명도 0~1 2. hsla([h],[s],[l],[a]); .hsla_box{ background:hsla(0,100%,60%,0.4); } h: 색상 값 0~360 s: 채도 0~100% l: 명도 0~100% a: 투명도 0~1..

2021.11.12

CSS3 선택자(Selector), 가상선택자(Virtual selector)

CSS Selector CSS3에서는 선택자 속성이 새롭게 추가되었다. selector를 사용하게 되면 id나 class를 대폭 줄일 수 있는 장점이 있다. 배분 대표사업의 핵심 브랜드화 창의적 배분구조/사업/플랫폼의 인큐베이팅 공익단체 역량의 집중 강화(교육,컨설팅) 사회이슈에 대한 전자구적 인식과 대응 창의적 참여적 시민기부모델 개발 창립 10주년 기념 사이트 "나눔으로 함께 만든 10년"사이트 오픈 서울시 강남구 역삼동 000-000번지 tel:00-000-0000 유사클래스 네임 (해당 문자를 포함하는 클래스 명) li[class^=yul] class 이름이 yul로 시작되는 li 요소 li[class$=seot] class 이름이 seot로 끝나는 li 요소 li[class*=hana] clas..

2021.11.12

HTML5 새로운 폼 요소

1. input 요소 HTML5 에서는 강력한 form 속성을 지원한다. 때문에 어려운 스크립트 없이도 다양한 ui를 표현할 수 있다. 이메일 입력을 위한 email 리소스 주소 입력을 위한 url 일정한 범위의 숫자를 입력받기 위한 number * min - 범위의 최소 값 * max - 범위의 최대 값 * step - 벙뮈 이동의 크기 일정한 범위의 숫자를 입력받기 위한 range * min - 범위의 최소 값 * max - 범위의 최대 값 * step - 벙뮈 이동의 크기 날짜를 입력받기 위한 date 검색을 위한 search 전화번호 입력을 위한 tel 색상 입력을 위한 color 2. output요소 output 요소는 사용자가 입력을 받기 위한 요소가 아니라 서식에서 출역용으로 사용하는 요소이..

2021.11.11

HTML5 Multimedia - Audio Elements

1. Audio Elements - video elements와 비슷하다. - 별도의 플러그인 설치를 필요로 하지 않는 오디오 자료를 표시 - Control API 제공 src 오디오 자원의 경로 지정 사용시 생략 width 표시되는 요소의 넓이 height 표시되는 요소의 높이 controls 컨트롤 패널을 표시함 autoplay 로드되면 자동 재생함 loop 반복 재생함 / loop="3" type 오디오 코덱 정보를 지정 /* 크로스 브라우징을 위한 문법 */ Download bass.mp3 * 웹접근성 위배 - 소리가 있는 컨텐츠에 대한 autoplay - 소리가 있는 컨텐츠에 대한 loop 대표 브라우저 별 사용 가능 확장자 크롬 mp3 / ogg / wav 사파리 mp3 / ogg / wav ..

2021.11.11

HTML5 Multimedia - Video Elements

1. Video Elements - 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시 - Control API 제공 src 비디오 자원의 경로지정 사용 시 생략 width 표시되는 요소의 넓이 height 표시되는 요소의 높이 poster 포스터 이미지를 지정함 (영상이 없을 때, 시작 전에 보여지는 이미지) 영상의 크기와 동일한 크기의 이미지를 준비한다. controls 컨트롤 패널을 표시함 autoplay 로드되면 자동 재생함 loop 반복 재생함 / loop="3" type 비디오 코덱 정보를 지정 muted 비디오 사운드 제거 preload 영상을 로딩하면서 재생이 동시에 이루어짐 (필수) /* 크로스 브라우징을 위한 문법 */ Your browser is old. Download th..

2021.11.11

객체 Object

객체 세상에 존재하는 모든 것 자동차 객체의 모델링 객체 속성 메소드 car car.nave="Sonata" car.start(){} car.speed=100 car.accel(){} car.color="White" car.break(){} car.door=4 car.transe(){} 자바스크립트 객체 사용자 정의 객체 사용자가 직접 객체의 속성과 메소드를 정의하여 사용하는 객체 car(), house(), hotel() 내장 객체 자바스크립트 프로그램 자체에서 정의하여 사용자에게 제공하는 객체 object(), array(), date() 날짜를 지정하는 Date 객체 웹 페이지에 오늘의 날짜와 시간 및 요일 등을 표시 get메소드 : 시스템에 설정된 날짜 중에서 월과 일만 개별적으로 추출 getYe..

2021.11.02