728x90 300x250 SMALL 분류 전체보기1115 css선언 순서에 대한 고찰 예전에 웹표준 관련 자료에서 본 것을 토대로 큰것에서부터 세부적으로 css를 적용시키기는 하는데 막상 작업 하다보면 급한대로 정리 안하고 하게 되는듯 갑자기 다른 분들은 어떻게 작업하시나 궁금해서 찾아봤는데 어떤분은 알파벳순으로 정리한다 그러고 레이아웃에 가까운 순서로 작업한다 그러고 대중은 없는듯 ▶ 모질라 파이어폭스 css 선언 순서 display list-style position float clear width/height padding/margin border/background color/font text/decoration test-align/vertical-align white-space other text content ▶ NHN 마크업 CSS 선언순서 1. 레이아웃 display, vi.. 2018. 12. 5. 제이쿼리 :: height값 구하기 하고 높이 값에 따른 메뉴바 변 지난번에 기록했던 특정위치의 높이 값까지 스크롤바를 내렸을 경우 클래스 추가해주는 스크립트 123456789101112131415 $(function(){ $(window).scroll(function(){ var navbar = $(this).scrollTop(); console.log(navbar); var $header = $('header'); if(navbar > 860){ $header.addClass('activated'); }else{ $header.removeClass('activated'); } }) }) Colored by Color Scriptercs 여기서 추가해서 이번에는 특정 엘리먼트의 높이 값을 구하고 그 값만큼의 위치까지스크롤바를 내렸을 경우 클래스가 추가되도록 바꿔보자 제.. 2018. 12. 4. 가변글꼴과 폰트 사이즈 em 간편하게 변경하기 폰트 사이즈- em : 부모 요소에서 지정한 폰트의 대문자M 너비를 기준으로 크기를 조절한다. 대문자 M의 너비를 1em으로 놓고 상대적으로 계산하는데 만약에 지정크기가 없다면 16px이 1em이 된다. font: 100% = 16px - rem : em 요소는 부모요소에 따라 사이즈계 계속 변경되기 때문에 계산이 복잡해 지는데 이런 단점을 극복하기 위해 만들어진 단위가 rem 이다 여기서 r은 루트를 뜻하며 맨 처음에 설정한 기본크기에 따라 적용되기 때문에 중간에 값이 변경되지 않고 계산하기도 편하디. 그러나 em으로 사용했을때는 확대시에 같은 비율로 늘어나고 줄어들지만 rem 단위는 결국 루트에 따라 고정된 값이라서 확대축소시에 비율이 깨진다는 얘기가 있다. - ex : x-height, 소문자 x의.. 2018. 12. 3. 헤더 상단에 내비게이션 바 스크롤 시에 배경 변화 주기 header 내비게이션 바 스크롤 내렸을때 특정 위치에서 클래스 넣어주는 스크립트 1234567891011121314 $(function(){ $(window).scroll(function(){ var navbar = $(this).scrollTop(); console.log(navbar); var $header = $('header'); if(navbar > 860){ $header.addClass('activated'); }else{ $header.removeClass('activated'); } }) }) Colored by Color Scriptercs 스크롤을 내릴경우 스크롤 값이 navbar 변수에 저장된다.헤더 값은 header 변수에 저장된다.navbar값이 860보다 클 경우헤더에 act.. 2018. 12. 2. 이전 1 ··· 272 273 274 275 276 277 278 279 다음 728x90 반응형 LIST
