문서 객체 스타일 변경하기

문서 객체 스타일 변경하기 스타일변경 감추기 보이기

2021.11.22

문서에 객체, 속성값 설정

당신의 이름은 무엇입니까? 이미지 추가 createElement(); createTextNode(); appendChild(); setAttribute();

2021.11.22

웹접근성 skip navi

skip navi란? 사용자 편의 및 웹 접근성향상을 위한 skip navi를 body 최상단에 넣어준다. 마우스나 키보드를 사용하지 못해 tab키를 사용해야 하는 사용자에게 사이트 최상단에 바로가기를 만들어 줌으로써 원하는 영역에 바로 갈 수 있게 도와주는 기능을 한다. 사용예제 #skipNav{position:relative; width:100%; overflow:hidden;} #skipNav a{display:block; height:1px; margin-bottom:-1px; overflow:hidden; text-align:center;} #skipNav a:hover, #skipNav a:focus, #skipNav a:active{height:auto; padding:5px 0; backg..

2021.11.19

CSS3 animation

CSS3 animation CSS의 속성을 이용하여 애니메이션을 표현 CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다. CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션보다 다음 세가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다. 자바스크립으를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못했다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링된다. 브라우저는 애니메이션의 성능을 효율적으로 최적화 할 수 있다. 예를 들어 현재 안보..

2021.11.18

벤더 프리픽스 (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