본문 바로가기
반응형

css124

haslayout 이란 (IE버그 해결책) hasLayout 이란 (IE버그 해결책) has layout이란,' 레이아웃을 가진다'라는 뜻입니다. haslayout 속성이란? 제가 처음 haslayout을 접한 것은 'triggers for hasLayout'라고 쓰인 주석을 보고 나서인데 구IE의 경우, CSS 속성값이 올바로 적용되지 않을 때, 렌더링 오류나 버그가 생길 때 haslayout 속성을 지니게 되면 해결되는 부분이 많다고 해서 찾아보게 되었습니다. css에 실제 haslayout 속성이 존재하는 것은 아닙니다. haslayout은 인터넷 익스플로러(IE)에서만 사용하는 독자적인 개념입니다. hasLayout 속성이 탄생한 배경: 아주 오래전 ie는 구식의 렌더링 엔진을 사용했는데, 그때는 인라인 내용을 제외하고 거의 모든 요소가 .. 2014. 9. 19.
[css1] ::first-letter 가상 요소 [css1] ::first-letter 가상 요소 ::first-letter 가상요소는, 요소의 첫번째 문자를 선택하는 선택자 입니다. (그 줄에 이미지나 inline table처럼 다른 내용이 앞에 없을 때) ::first-letter는 블록 요소에만 적용 가능합니다. 즉 display 값이 block, list-item, table-cell, table-caption, inline-block 일 때 ▶ 함께 사용할 수 있는 속성 font 관련 속성 margin, padding, border 속성 color, background 속성 text-decoration text-transform letter-spacing word-spacing line-height float clear vertical-ali.. 2014. 9. 17.
[css1] ::first-line 가상 요소 [css1] ::first-line 가상 요소 ::first-line은 요소의 첫번째 줄을 선택하는 가상 요소입니다. first-line 가상 요소는 블록 요소에만 적용 가능합니다. (display값이 block, inline-block, table-cell or table-caption에만 적용) ▶first-line 가상 요소에 쓸 수 있는 속성 font 관계된 속성 : font, font-style, font-variant, font-weight, font-size, font-family 등 color 속성 backgroud 관계된 속성 word-spacing, letter-spacing, text-decoration, text-transform, line-height text-decoration,.. 2014. 9. 16.
[css3] :empty 가상 클래스 [css3] :empty 가상 클래스 :empty 가상 클래스는 자식이 전혀 없는 요소에 적용하는 선택자입니다. 요소 안에 주석이 있어도 가능합니다. 하지만, 공백이 있으면 적용되지 않음. html p:empty{color: red;} => 적용 가능 html p:empty{color: red;} => 적용 안 됨(공백이 있으므로 비어이지 않음) html div:empty{clear:both;} => 적용 안 됨. 줄바꿈으로 인해 공백 문자가 포함돼 있음 html bar div:empty{clear:both;} => 적용 안 됨. 문자가 포함돼 있음 종류가 구조적 가상 클래스라고 되어 있는데 구조적 가상 클래스 Structural pseudo-classes란? css 선택자는 구조적 가상 클래스란 개념을.. 2014. 9. 15.
[css] 브라우저 업체별 접두어(vendor prefix) [css] 브라우저 업체별 접두어(vendor prefix) css를 공부하다 보면 한 번쯤 보았을 브라우저 접두어 가령 이런 것들. -moz-border-radius: 10px 5px; -webkit-border-top-left-radius: 10px; 브라우저 제조사별 접두어는 (vendor prefix 또는 browser prefix) 아직 css 표준으로 인정되진 않았지만, 과도기적 단계에서 사용하는 것으로 브라우저 제작사마다 다른 접두어를 사용합니다. css 브라우저 접두어 예: -webkit- /*Safari, Chrome, Android, iOs, Webkit 엔진을 이용하는 브라우저*/ -moz- /*Firefox, 모질라 브라우저 엔진을 사용하는 브라우저*/ -ms- /*Internet .. 2014. 9. 13.
[css] 인접 형제 선택자, 일반 형제 선택자 차이 [css] 인접 형제 선택자, 일반 형제 선택자 차이 오늘은 형제 선택자를 정리해 보았습니다. 형제 선택자는 아래 두 가지가 있는데 -인접 형제 선택자 (adjacent sibling selector) -일반 형제 선택자 (general sibling selector) 말이 어려워서 그렇지 adjacent 뜻은 '바로 옆에 있는' 이라는 뜻입니다. 둘 다 같은 부모를 가지고 있다는 점에서는 똑같습니다. 형제 선택자 요약표 (E나 F는 요소명을 대신하는 임시 키워드) 인접 형제 선택자 (adjacent sibling selector) ★ 문법 E + F {속성: 속성값;} 같은 부모를 가지고, E 바로 뒤에 오는 F에만 적용합니다. ★ 사용 예 : img + span {font-style: italic;}.. 2014. 9. 12.
[css3] :not 선택자 [css3] :not 선택자 추석 연휴 잘 보내셨는지요 ^^ 오랫동안 쉬어서, 다시 일을 손에 잡기가 쉽지 않지요... 그래서 오늘은 워밍업하는 기분으로 가볍게 시작하려고 해요. ^_^ 오늘은 가상 클래스 중 부정 가상 클래스 :not() 선택자를 알아 보겠습니다 E:not(s) E는 요소명, (s)는 선택자 입니다. s에는 다른 부정선택자나, 가상 요소를 넣을 수 없습니다. 문법 :not(선택자){ 속성: 속성값;} ▶예 :not(p) { color: red; } p가 아닌 곳은 모두 빨간색 글씨로 하라는 뜻 ▶예 2 p:not(.choo) { color: red; } 클래스명 choo 가 아닌 p는 모두 빨간색 글씨로 하라는 뜻 css 스타일 적용 우선 순위를 계산할 때 :not 가상 클래스의 특정도.. 2014. 9. 11.
[css] 링크 가상 클래스(:link, :visited,:hover, :active) [css] 링크 가상 클래스(:link, :visited,:hover, :active) 지난 시간엔 CSS 속성 선택자를 배웠습니다. [css2/3] 속성 선택자 오늘은 가상 클래스 선택자 중에 링크와 연관된 가상 클래스를 정리해 보았습니다. 링크 관련 가상 클래스 요약표 :link 가상 클래스 방문 전 링크 상태 링크를 가진 a 요소에 적용 (href="" 가 없는 a는 적용되지 않음) 사용 예: a:link{color: red;} :visited 가상 클래스 방문 후 링크 상태 :hover 가상 클래스 마우스 오버 했을 때 상태 :hover 선택자는 링크뿐 아니라 모든 요소에 적용할 수 있습니다. ie는 a 요소 외에 다른 요소에 적용할 때 doctype 선언해야 합니다. 사용 예: a:hover{b.. 2014. 9. 4.
[css2/3] 속성 선택자 [css2/3] 속성 선택자 지난 시간에 css 선택자를 배우면서, 속성 선택자를 짤막하게 소개했는데 css 선택자, 선택자 종류와 사용법 오늘은 속성 선택자 사용법을 좀 더 자세히 알아보겠습니다. 속성 선택자란? id나 class 처럼 '구체적인 속성'을 선택해서 스타일을 줄 수 있는 대상입니다. 속성 선택자는 대부분의 브라우저에서 지원하지만 ie7, 8에서는 doctype 선언해야 합니다. 우선 속성 선택자 요약표를 먼저 보고, 차례 차례 설명해 볼게요~ 속성 선택자 요약표 E[foo] E는 요소 이름이고 foo는 속성 입니다. (밑에서도 계속 나올 "foo" "bar" 등은 이해를 돕기 위한 임시 키워드입니다.) 사용 예 : a[href]{color:red;} a요소에 href 속성이 있으면 빨간색.. 2014. 9. 3.
[css] counter, counters사용법 [css] counter, counters 사용법 이 글은 content 속성과, counter-reset, counter-increment에 이어지는 글입니다. 즉 오늘 배울 counter(), counters()를 이해하려면 위 속성들을 이해하고 있어야 합니다. [css] content 속성 사용법 counter-reset, counter-increment 속성 사용법 복습하는 의미로 간단히 정리하면, content는 css로 내용을 생성하는 속성인데 content: counter 는 숫자를 자동으로 생성하는 역할을 합니다. counter-reset 은 카운터의 이름과 시작값을 설정하고 counter-increment는 그 시작값을 몇 단계씩 증가할지를 설정합니다. ▶ 사용 방법 요소{counter-.. 2014. 9. 2.
반응형

티스토리툴바