공부하자

1. html5shiv.js : HTML5 요소를 지원하지 않는 브라우저IE 8 이하)에서 해당 요소를 지원할 수 있게 해주는 라이브러리 사용하기 : 상단 head에 해당 링크 연결 혹은 파일 다운로드 후 연결 http://code.google.com/p/html5shiv/ 2. IE9.js : IE6, IE7, IE8에서 실행되지 않는 CSS(ex.선택자)를 사용할 수 있게 해주는 라이브러리 http://code.google.com/p/ie7-js/ Google Code Archive - Long-term storage for Google Code Project Hosting. code.google.com 3. respond.js : IE 6~8 버전에서 미디어쿼리를 해석할 수 있도록 만들어주는 자바스..

참고하기 좋은 CSS 애니메이션 예제 사이트 라이브러리를 연결하여 사용하는 animation.css 기본적인 애니메이션 효과가 많아 참고하기 좋다 animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style Hover 효과에 사용하기 좋은 애니메이션 효과를 모아놓은 사이트 ianlunn.github.io/Hover..

css를 이용하여 이미지에 filter 효과를 줄 수 있다. 대표적으로 투명도, 블러(blur)나 흑백 효과 같은 것을 줄 수 있으며 수치는 0부터 점차 커질수록 효과를 많이 줄 수 있다. none 기본 값, 효과 없음 blur(px) 이미지에 흐림 효과를 적용 값이 클수록 더 흐릿해지며 값을 지정하지 않으면 0으로 인식합니다. brightness(%) 이미지의 밝기를 조정 0%는 이미지를 완전히 검은색으로 만듭니다. 100%(1)는 기본값이며 원본 이미지를 나타냅니다. 100%를 초과하는 값은 더 밝은 결과를 제공합니다. contrast(%) 이미지의 대비를 조정합니다. 0%는 이미지를 완전히 검은색으로 만듭니다. 100%(1)는 기본값이며 원본 이미지를 나타냅니다. 100%를 초과하는 값은 더 많은 ..

CSS로 타이핑 효과 내기. html 기본 구조 Hello, World CSS .txt_box { position:relative; display: inline-block; overflow-y: hidden; margin:28vh 0; // 원하는 위치가 있다면 margin 값 조절 } .section.con_01 p { //txt style font-size:28px; font-weight:bold; color:#9fd0ca; // 타이핑 효과 border-right:4px solid #fff; // 커서 overflow:hidden; white-space:nowrap; animation: typing 10s steps(27) forwards, // 타이핑 속도 조절 blink-caret .8s ste..

항상 이미지를 잘라서 'background:url(img.png) 0 0 no-repeat;'의 방법으로 사용하곤 했는데 css로 표현이 가능해졌다. CSS로 삼각형 표현하기 css-tricks.com/snippets/css/css-triangle/ CSS Triangle | CSS-Tricks HTML You can make them with a single div. It's nice to have classes for each direction possibility. CSS The idea is a box with zero width and height. The css-tricks.com 색상 등을 수정하여 좀 더 다양한 형태의 삼각형을 만들 수 있다. 말풍선의 꼬리부분이나 목록의 포인트 부분 등에 ..

marqee 태그란? : 가로 또는 세로로 텍스트가 롤링되는 표현을 할 수 있는 태그로 형태로 사용되었으나 html의 표준에 준수하지 않아 현재는 태그의 형태로는 잘 쓰이지 않고 css 로 표현하는 경우가 많다. (지원 종료 이슈도 있다.) css의 애니메이션 기능을 이용하여 표현하며 예전만큼 자주 사용되는 기능은 아니나 알아두고 있으면 좋은 기능임으로 따로 정리해본다. ex. 기본형 hello, world! 아래 사이트에서 예시로 나온 기본형을 좀 더 깔끔하게 정리한 것으로 브라우저 별 css 지정이나 응용 버전인 좌우로 튀는 효과 등은 링크 참고 www.w3schools.in/css3/css-marquee/ CSS Marquee HTML marquee provides a standard way of ..

미디어쿼리(Media Query) : 디바이스에 상관없이 최적화 된 페이지를 제공할 수 있도록 도와주는 기술 미디어 쿼리를 선언 후 css 작성 기본문법 : @media only screen and (속성값 A) and (속성값 B) @media all : 모든 장치 @media print : 인쇄 결과물 및 출력 미리보기 화면 @media screen : 화면 @media speech : 음성 합성 장치 min 과 max : 화면의 최소값과 최대값을 정해주는 속성 min-width:375px : 화면의 최소 넓이가 375일 때, 즉 375px 이상의 화면에 적용하라 max-width:1024px : 화면의 최대 넓이가 1024px일 때, 즉 1024px 이하의 화면에 적용하라 @media screen ..

1. transition : 속성의 변화에 단순한 애니메이션 적용. 단독 사용은 불가, hover, click 등 사용자 반응에 의해 이벤트가 실행될때 주는 효과 속성별로 시간을 따로 줄 수 있다. transition : property duration timing-function delay; (효과, 지속시간, 효과의 변화 유형, 지연시간) .box {width:50px;height:50px;background:#f00;transition:all 1s;} .box:hover {width:100px;height:100px;background:#ff0;margin-left:20px;} or .box {transition:width 0.5s, height 2s, background-color 1s;} www..

1. float:left / float:right 제일 기본적인 방법. block 속성의 박스를 inline 속성으로 바꿔 좌우 배치하는 방법 .container {width:100%} .aside {width:200px;height:500px;background:#f00;float:left;} .section {width:calc(100%-200px);height:500px;background:#f0f;float:right} 2. display:table / display:table-cell 부모와 자식의 구조를 table 형식으로 바꿔주는 css 로 table 태그의 단점인 모바일 기기에 호환되지 않는 점을 보완한 방법 .container {display:table;width:100%;} .conta..

요소의 넓이와 높이의 단위값 중 px는 고정값으 표현, em,%,vw,vh 는 유동적인 값이다. 유동값은 각자 기준이 되는 값이 다른데 em : 부모의 영향을 받아 유동적으로 변하는 폰트 단위 % : 부모 요소를 기준으로 부모 요소가 전체 사이즈의 90%라는 값을 갖고 있을 때 자식 요소는 부모가 가진 90%를 100%로 인식해 그 값을 기준으로 갖게 된다. vw와 vh : viewrport 를 기준으로 즉 사용자의 화면을 기준으로 값을 갖게 된다. 부모 요소가 viewport 기준 90%의 값을 갖고 있어도 자식 요소는 부모 요소의 영향을 받지 않고 viewport 기준으로 값을 갖게 된다. vw와 vh는 IE9부터 지원 webclub.tistory.com/356 CSS의 7가지 단위 - rem, vh..