본문 바로가기
반응형

전체 글333

[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.
무싹 키우기 무싹 키우기 요즘엔, 콩나물, 고구마, 각종 야채싹 키우기 도전해 보고 있어요. 실패 확률 제로, 콩나물 싹 키우기 고구마싹 키우기 이번엔 냉장고에서 싹을 키운 무입니다. 고구마와 마찬가지로, 뒤꽁무니를 잘라내 물에 살짝 담가 둡니다. 햇볓을 보여주어야 쑥쑥 잘 커요. 무싹 키우기 일지 8/31 이미 싹이 난 무를 뒤꽁무니를 잘라서 물 속에 담가 둠 9/1 하루만에 훌쩍 자란 무싹 9/2예전에는 냉장고에서 이렇게 싹이 자란 것을 보면, 무서워서 혹은 징그러워서 잘라내 버렸던 기억이.... 근데 이렇게 키워놓고 보니, 대견해 보이는 아이러니 함. 9/3 검은색 배경으로 한 컷. 멋지다!!!9/4 확실히 컵밖으로 키가 높이 자랐습니다. 옆에 고구미 양과 누가 더 잘 자라나 경쟁하고 있어요 9/5 오늘 찍은 .. 2014. 9. 7.
고구마싹 키우기 고구마싹 키우기 고구마를 어머니가 보내주신 지 1달 정도 되었는데, 먹으려고 보니가 싹이 살짝 나왔더라구요. 버리기 아까워서 뒤꽁무니 조금 남겨놓고 잘라서 물에 담가두었어요. 물을 너무 많이 잠기게 하면 금방 썩기 때문에, 찰랑찰랑 할 정도만 담가두어야 해요. 그리고 무엇보다 햇볓을 보여주어야 잘 자랍니다~ 고구마싹 키우기 일지 8/31 물에 담근 지 하루 정도 지나서부터 사진을 찍어서 싹이 조금 나온 상태에요. 뿌리도 한 줄기 나왔습니다^^ 9/2 혈기왕성한 고구미. 이틀만에 이렇게 자랐어요. 9/2 이날 고구마를 찌면서 친구 두 녀석도 만들어주었어요. 9/3 하루 지난 사진이라고 믿기지 않을만큼 정말 많이 자랐습니다. 9/3 검은 배경색으로 멋지게 한 컷 저 조그만 몸통에서 어떻게 이렇게 큰 이파리가.. 2014. 9. 6.
실패 확률 제로, 콩나물 싹 키우기 실패 확률 제로, 콩나물 싹 키우기 콩나물 싹을 키워본 적이 있으신가요? 콩을 발아시켜 먹는 콩나물로 키우는 것 말고요, 이렇게 자라난 콩나물을 싹이 나게 키우는 것 말이에요 저는 예전에 한 번 해 보았는데, 싹이 다 자란 후에도 한참을 더 키웠는데 나중에 뒤처리를 어찌해야 할지 몰라 결국 뽑아서 버렸던 기억이... 이번엔 싹을 어느 정도 키운 후에, 흙에도 한 번 심어 볼 생각이에요. 콩나물 싹 키우는 방법 콩나물 싹 키우는 법은 너무 너무 간단해요. 먹다 남은 콩나물 몇 마리를 컵 속에 넣고 물을 반 정도 잠기게 해 줘요. 그리고 첫날은 간접적인 햇볓을 쬐어주고, 이튿날부터는 햇볕에 내어두면 돼요. 물은 부족할 때마다 채워 주세요. 이 날 햇볕이 너무 뜨거웠던지 몸이 약한 몇 마리는 전사하고 네 줄기.. 2014. 9. 5.
[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.
반응형

티스토리툴바