Martin`s Work

Selector element1 ~ element2 CSS3 셀럭터 중 element1 ~ element2는 CSS3 셀렉터 이다. 브라우저 호환도 관련해서는 아래와 같다. ✔ IE 7+✔ Firefox 3.5+✔ Safari 3.2+✔ Chrome 4+✔ Opera 9.6+ element1이 있으면 element2 에 스타일을 입힐 수 있으나, 단 element1과 element2 는 같은 부모를 가지고 있어야 한다.

기본 작성법 12345678910111213 dl{ margin:0; padding: 0; dt{ margin:0; padding:0; } dd{ margin:0; padding:0; } } cs 태그를 작성하고 그 안에 대한 css 속성을 작성하며, 그 하위의 경우는 위의 소스와 마찬가지로 중괄호 안에 새로 그 태그에 대한 속성을 지정해준다. 위의 소스를 컴파일 하면 아래와 같이 작성된다. 123dl{margin:0;padding:0}dl dt{margin:0;padding:0}dl dd{margin:0;padding:0}cs 부모참조선택 작성 SASS에서는 &는 부모참조 선택자라 하여 부모선택자를 참조 할 수있다. &선택자를 사용할때는 중괄호안에 해당 태그의 스타일과 동일선상에 써주면 된다. 1234..

SASS 개념 웹페이지의 규모가 커지면 그 css 문서의 양이 방대해지며, 소스의 관리, 중복 작업등이 많아진다. 이러한 이유 때문에 CSS 전처기가 등장하였다. CSS 전처기에는 대표적으로 Sass, Less 등이 있다. CSS 전처리는 스크립트처럼 특정 속성값을 변수에 담아 필요한 곳에서 적용할 수 있어, 중복 작업 혹은 반복 작업을 줄일 수 있다. SASS 설치 1. Ruby 설치 SASS는 Ruby 라는 언어로 만들어져 있어 SASS 파일을 CSS로 컴파일 시키려면 Ruby라는 언어가 내 컴퓨터에 설치 되어있어야 한다. (링크 : http://rubyinstaller.org/downloads/) 2. SASS 설치 Ruby의 설치가 완료되면 cmd 창에서 아래의 명령어를 이용하여 SASS 를 설치..

반응형 작업시 컨텐츠 비율 유지 반응형으로 작업할때, 이미지나 유튜브 동영상 등 비율을 유지하며 가변적으로 크기가 조절되는 레이아웃을 제작할 경우가 있다. 이러한 경우에 사용하면 된다. 1234567891011 body, div{ margin:0; padding:0;} .div{ margin:0; padding:0; overflow:hidden; } .child1{ float:left; width:50%; height:0; padding-top:50%; background-color:red; } .child2{ float:right; width:50%; height:0; padding-top:50%; background-color:blue; } 왼쪽 비율 유지 오른쪽 비율 유지 Colored by Col..

IE의 점유율이 점점 낮아졌다고는 해도, 아직까지 IE 하위 브라우저를 지원해야하는 경우도 있다. 상황에 따라 각 브라우저별 CSS 핵을 사용하되 되도록이면 핵을 사용안하고 코드를 짜는게 제일 좋다. 123456789101112131415161718 /* IE6 브라우저 핵 (_ 추가)*/ div { _background-color:red; } /* IE7 브라우저 핵 (* 추가) */ div{ *background-color:blue; } /* IE6, IE7 브라우저 동시적용 핵 (. 추가) */ div{ .background-color:purple; } /* IE8 브라우저 핵 (\0\IE8 추가) */ div{ background-color:green\0\IE8; } /* IE9 브라우저 핵 (\..

사용범위 대부분의 브라우저는 다 지원하되, IE의 경우는 IE9 이상부터 지원한다. 각 브라우저마다 사용하려면 -webkit-(Chrome, Safari), -moz-(Firefox), -o-(Opera) 그리고, IE9 이하의 브라우저를 대비한 css를 작성해야한다. 기능 calc 기능은 자바스크립트에서 계산하던 방식과 동일하게 사용할 수 있어, 자바스크립트로 처리하던 부분을 상당부분 줄일 수 있다. 다만, 하위 브라우저까지 고려해야한다는 단점이 있어, 상황에 맞게 사용하면 좋은 기능인듯 하다. 12345678910111213141516171819202122232425 #div{ position:absolute; left:50%; top:50%; margin-top:-50px\0/IE8; /* IE8 ..

1. -webkit-line-clamp 웹킷 기반의 브라우저일 경우 줄수를 설정해 그 이상 되었을때 "..." 처리가 되도록 설정 가능 1234567div{ display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; /*라인수 설정*/ word-wrap:break-word; -webkit-box-orient: vertical;}cs -webkit-line-clamp 는 "..."처리가 되는 라인수를 지정할 수 있습니다. 이 외에, 웹킷기반의 브라우저가 아닐 경우를 대비하여 추가적으로 높이값과 hidden처리를 해줘야합니다. 123456789div{ display:-webkit-box; height:20px; /*높이값 추가*/ overflow:..

display을 이용한 table 레이아웃 잡기 display 속성을 이용하여, table 태그의 tr, th, td 같은 형태의 레이아웃을 만들 수 있다. 개인적으로 실제로 display 속성으로 table을 지정할 때는 table 레이아웃을 구성하기 위해서라기보단 한 컨텐츠 내에서 중앙 정렬 처리 할때 사용한다. 예를 들어 한 컨텐츠 내용이 1줄이 되든, 2줄이 되든 가운데 정렬이 되어야 한다고 할때 사용하면 편리하게 레이아웃을 구성할 수 있다. 12345678910111213 컨텐츠 제목 컨텐츠 내용 1줄 처리 컨텐츠 제목 컨텐츠 내용 2줄 처리컨텐츠 내용 2줄 처리 Colored by Color Scriptercs HTML 코드는 위와 같이 작성한다. 예시를 위해 dd태그의 텍스트 내용을 br로 ..

1. 브라우저 호환( 주요 브라우저를 기준으로만 기재) ① Chrome : 10.0 4.0 -webkit-② Internet Explorer : 9.0③ Firefox : 4.0 3.5-moz- 2. 옵션 1div { box-shadow: h-offset v-offset blur spread color inset }cs 1. h-offset : 가로 그림자의 길이2. v-offset : 세로 그림자의 길이3. blur : 블러 효과의 거리4. spread : 확산의 정도(거리)5. color : 그림자 색상6. inset: 그림자가 도형 해당 Element 안쪽으로 생성된다.