벤더 프리픽스 (Vendor Prefix)

Vendor Prefix? 세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있다. 벤더프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 버전의 웹 즈라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다. 즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 된다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있다. 주요 웹 브라우저의 벤더 프리픽스 (vendor prefix) 주요 웹 브라우저가 사용하고 있는 벤..

2021.11.17

오픈그래프(Open Graph) 메타태그(meta tag)

open graph 태그란? - 페이스북이나 네이버 블로그, 카카오톡 등에서 링크를 공유하면 자동으로 링크에 대한 미리보기 제목, 설명, 이미지를 제공하게 되는데, 이를 제어할 수 있는 태그 - 오픈그래프 프로토콜은 페이스북에 의해서 처음 만들어 짐 - 오픈그래프는 HTML문서의 메타정보를 쉽게 표시하기 위해 만들어짐 - 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL등 다양한 요소들에 대해서 사람들이 통일하여 쓸 수 있도록 정의해 놓은 프로토콜임. open graph 작동원리 1. 사용자가 링크를 입력창에 입력 2. 페이스북, 네이버 블로그, 카카오톡은 입력창의 문자열이 '링크'라는 것을 파악함 3. 링크라는 것이 파악되면 페이스북, 네이버 블로그, 카카오톡의 크롤러는 미리 그 웹사이트를 ..

2021.11.16

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