본문 바로가기
반응형

css124

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기 IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기 지난 시간엔, ie6-8에서 html5 요소 적용하는 방법과, ie6-8을 ie9처럼 행동하게 만들기를 배웠습니다. html5shiv 삽입하기 (ie6-8에서 html5 적용하기) IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법) 오늘 역시 여기에 이어지는 글입니다. css3 속성들 중 박스를 꾸미는 속성 일부를 ie6-8에서 적용하는 방법입니다. 여러 가지 방법이 있겠지만, 가장 잘 알려진 것으로 CSS3 Pie가 있습니다.. http://css3pie.com CSS3 PIE란? PIE란 Progressive Internet Explorer(진보적 인터넷 익스프롤러)의 약자입니다. PIE.. 2014. 12. 22.
css 길이 단위 css 길이 단위 어제 width, height 속성을 배우면서 속성값 중 길이값length이 등장하는 걸 보셨을 거예요. [css] width 속성 [css] height 속성 그래서 오늘은 css 길이 단위로 사용되는 것들은 어떤 것들이 있는지, 길이 단위의 종류와, 자주 쓰이는 단위, 그리고 사용법도 알아 보겠습니다. 자주 사용되고 언급되는 길이 단위는 px, em, in, pc, rem 등인데, 반응형 스킨에 알맞게 다양한 브라우저 창에 따라 크기 조절이 가능하게 하려면 em 또는 rem 사용을 권장합니다. 단위를 사용할 때, 앞에 숫자와 단위간 공백을 두지 않습니다. 예: 2em, 3px, 5in 하지만 길이값이 0일 경우 단위를 생략할 수 있습니다. 길이 단위는 상대 단위와 절대 단위로 나뉩니.. 2014. 12. 11.
[css] height 속성 [css] height 속성 어제는 요소의 너비를 설정할 때 쓰는 width 속성을 배웠습니다. 오늘은 height 속성으로, 요소의 높이를 설정할 때 사용합니다. width 속성과 마찬가지로 height 속성은 인라인 요소, table rows, thead, tfoot, tbody를 제외하고 모든 요소에 적용할 수 있습니다. height는 content 영역만의 높이만을 의미합니다. margin, padding, border 을 포함하지 않음. 또한 min-height, max-height 는 height 속성을 무시합니다. 즉, height와 min-height 속성이 동시에 설정될 경우, min-height값이 적용 됩니다. min-width 속성, min-height 속성 사용법 max-width.. 2014. 12. 10.
[css] width 속성 [css] width 속성 width와 height 속성은 너무 기본이라 모두들 알고 있을 것으로 생각돼 따로 다루지 않았는데 박스 모델을 설명하다 보니 꼭 필요한 부분 같아 오늘 정리해 보았습니다. 우선 박스 모델부터 살펴 볼게요. 요소의 박스는 content, padding, border, margin 으로 이루어져 있습니다. content - 내용 영역 padding - 내용과 border 사이의 여백 border - 선 margin -border 와 바깥과의 여백 width 속성 요소의 너비를 설정할 때 width 속성을 쓰는데 이때 width는 content 영역만을 의미합니다. (padding, border, margin을 포함하지 않음) ※ width 속성은 inline 요소, table r.. 2014. 12. 9.
[css] float를 취소하기 (clearfix 4가지 방법) [css] float를 취소하기 (clearfix 4가지 방법) 보통 레이아웃을 만들 때, 내부 div(자식)와 그것을 둘러싼 또 하나의 div(부모)를 만듧니다. 우리가 원하는 레이아웃은 아래 그림처럼, 1. 자식 div가 좌우로 float 되고, 2. 부모가 자동으로 자식 div를 담아낸 모습일 것입니다. 하지만, 자식 div를 담고 있는 부모 div는 너비나 특별한 속성을 추가하지 않으면 float 된 자식 div를 담아내지 못합니다. (아래 그림 참조) float 된 요소는 이전 요소에 영향을 미치지 않고, 다음 요소에 영향을 미칩니다. 따라서 다음 요소 역시 float 상태로 글자나 이미지가 따라 붙습니다. float 속성에 대하여 그래서 부모 요소가 float 된 요소를 담아낼 수 있고, 다음.. 2014. 11. 27.
[css3] box-sizing 속성 [css3] box-sizing 속성 box-sizing 속성은 박스 모델과 관계가 있습니다. 박스 모델 이해하기 박스는 content, padding, border, margin로 이루어져 있습니다. content-내용 영역 padding-내용과 border 사이 여백 border- 선 margin-선과 바깥 과의 여백 [표준 브라우저의 너비, 높이 계산법] 요소의 너비와 높이를 계산할 때 width 와 height 속성을 쓰는데 width, height는 content 영역만의 너비와 높이 입니다. 이것이 표준 브라우저의 계산법입니다. 예} 아래와 같은 div가 있을 경우 div{ width:300px; padding: 10px; margin: 0px; border: 5px solid black; }.. 2014. 11. 25.
[css3] text-shadow 속성(글자 그림자 효과) [css3] text-shadow 속성(글자 그림자 효과) 예전에 box-shadow 속성에 배웠죠. box-shadow 속성은 박스에 그림자를 만들고, text-shadow 속성은 글자에 그림자를 만듧니다. 속성값은 비슷한 점이 많아 box-shadow를 미리 둘러 보고 오시면 좋을 것 같아요 box-shadow 속성(그림자 효과) ▶문법 text-shadow: h-shadow v-shadow blur color | none | initial h-shadow 필수 지정. 수평 그림자 위치. 길이값(px, em, pc, in, 등..) 양수 값을 지정하면 박스 오른쪽에 그림자가 드리워지며, 음수 값은 박스 왼쪽에 그림자가 드리워짐 v-shadow 필수 지정. 수직 그림자 위치. 길이값(px, em, pc.. 2014. 11. 24.
CSS 선택자 요약표 CSS 선택자 요약표 어제 날짜로 해서, CSS 선택자를 모두 다루었어요. CSS1부터 CSS3까지 선택자는 모두 42가지나 됩니다!! 실제 사용하는 선택자는 그렇게 많지는 않지만, 한번씩 읽어 두시면 유용하게 써 먹을 수 있으실 거예요. 오늘은 지금가지 공부한 css 선택자를 전부 하나의 표로 정리해 보았습니다. 또한, CSS 선택자란 무엇인지 간략히 알아 보고, 어느 때 어느 선택자를 사용하면 좋을지 링크를 달아 두었어요. CSS 선택자란? 글꼴이라든가, 색상, 너비, 높이 등 스타일을 줄 때 대상을 지정해야 하는데 이것을 선택자라고 합니다. CSS란? (HTML과 CSS의 차이, CSS 작성법) ▶타입 선택자 가장 흔히 쓰는 선택자는 Type selecetor 즉 태그(요소명) 선택자입니다. P {.. 2014. 11. 21.
[css2] 전체 선택자 [css2] 전체 선택자 전체 선택자는 누구나 알 수 있는 부분 같아 따로 글을 쓰지 않으려 했는데, css 선택자에 관한 글 중 유일하게 빠진 부분이라 짤막하게나마 정리해 보려고 합니다. 전체 선택자는 전체 요소를 선택하는 선택자 입니다. 별표(*)로 표시 함. * {margin: 0px; padding: 0px;} 라고 하면 html 모든 요소에 적용 됩니다. 생략해도 같은 의미 입니다. *.test {color: red;} 는 .text {color:red;}와 같습니다. /*클래스명 test를 지닌 요소는 모두 빨간색으로 하겠다는 뜻*/ *#myid {color:red;}는 #myid {color:red;}와 같습니다./* ID가 myid일 경우는 모두 빨간색으로 하겠다는 뜻*/ 자손 선택자와 전.. 2014. 11. 20.
[css3] :only-child :only-of-type 가상 클래스 [css3] :only-child, :only-of-type 가상 클래스 오늘은 :only-child 선택자와, :only-of-type 선택자를 비교해서 배워 보겠습니다. 오늘을 끝으로 css3 선택자는 모두 다루었고요, 다음 시간엔 그간 배운 css1~3을 총정리 형태로 요약해 보겠습니다. :only-child 가상 클래스 :only-child는 어떤 요소의 자식이 하나밖에 없을 때 적용 합니다. 예 ① 내용 p:only-child{color: red;} 내용이 빨간색으로 표시 됨 예 ② 제목 내용 h1:only-child{color: red;} 자식이 h1, p가 있으므로 적용되지 않음 예 ③ 내용 #wrapper #header:only-child{color:red;} div 안에 div 에 p요소.. 2014. 11. 19.
반응형