코딩룸*◡*

작업을 하다가 ol이나 ul에 자동으로 번호가 붙게 할 수 있다.그러나 이 번호 스타일은 변경이 불가능하고, 해당 단계에 대해서만 표시하지 다단계는 되지 않는다.그래서 CSS counter로 다단계 순번을 만들어보기로 했다. 1. li {counter-increment: customlistcounter;} ul.custom li { counter-increment : customlistcounter; } 2. li:before {content:counter(customlistcounter)" ";}content에 counter(customlistcounter) " ";은 "customlistcounter" 변수의 순번 값을 대문자 로마자로 출력하고 그 뒤에 빈칸을 붙이라는 의미이다. ul.custom l..

주제선정이유 평소에 CSS 스타일을 적용하다가 -webkit-, -moz-, -o-(요건 잘 사용 안한다ㅎㅎ)로 시작하는 css 를 추가해야하는 경우가 있다. 그런데 이게 사실 정확히 뭔지는 모르고 다른 브라우저에서도 동일하게 CSS가 먹도록 추가해야 한다는 정도만 알고 있었다. 그래서 이것에 대한 정확한 개념과 필요성을 알기 위해 주제로 선정하게 되었다. 1. 벤더 프리픽스(Vender Prefix)란?간략하게 말해서 Vendor 는 "공급업체"이고, Perfix는 "접두사"이다. 즉, 벤더 프리픽스(Vender Prefix)는 '공급업체접두사'라고 정의 내릴 수 있다.html5로 넘어가는 과도기적인 시점에서 몇몇의 CSS3의 기능은 웹표준이 아니다. 때문에 브라우저마다 접두어를 넣어줘서 변환 효과를 ..

1. Easing functionseasing(timing 이라고도 함)은 애니메이션을 더욱 부드럽고 편안한 느낌이 들게 만들어서 앱 사용자에게 편안한 느낌을 주고 전반적인 사용 환경을 개선해준다.그러나 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피해야한다. 사용자에게 굼뜬 느낌을 줄 수 있기 때문이다. 2. easing 키워드다음은 CSS에서 사용할 수 있는 키워드 중 일부이다. 1) ease : 시작과 종료를 부드럽게2) linear : 일정3) ease-in : 서서히 시작 4) ease-out : 서서히 종료5) ease-in-out : 서서히 시작하여 서서히 종료6) cubic-bezier(x1,y1,x2,y2) : 3차 배지에 곡선의 P1과 P2..

1. Parallax란?parallax(시차)란 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미한다. 이러한 현상을 이용하면 입체감과 실체감을 높여서 보다 인상적인 디자인을 할 수 있다. 이것을 구현하려면 HTML과 CSS, JavaScript(쪼금? 필요없나?)을 사용하면 된다. 2. CSS background-attachment: fixed;를 이용예제) Hi! My name is Yoon Miyeon. 체험하기) https://codepen.io/egoing/pen/yaKvPd?editors=1100#0 3. background-attachment 지원버전속성background-attachment115.94.9 -webkit-5.4 -moz-5.29.03.1 -we..

1. CSS3 다단(multi-column)이란? 다단(muti-column)은 화면을 분활해서 좀 더 읽기 쉽도록 만든 레이아웃 CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공한다. 2. CSS3 다중 칼럼(multi-column) 지원 버전CSS3 다단(multi-column)을 지원하는 주요 웹 브라우저의 버전은 다음 표와 같고, IE의 경우 10이상에서 지원한다. 속성column-countcolumn-widthcolumn-capcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-width 10.050.04.0 -webkit-2.0 -moz-9.03.1 -webkit-37.015.0 -webkit-11.1column-span10.05..