본문 바로가기
반응형

css124

[css3] :target 가상 클래스 [css3] :target 가상 클래스 오늘 배워볼 가상 클래스는 :target 선택자 입니다. :target은 요소의 id 와 url에 있는 #가 같을 때 적용 합니다. 예: 장바구니 만들기 2014. 11. 4.
[css] :focus 가상 클래스 [css] :focus 가상 클래스 예전에 링크 관련 가상 클래스에서 :link :visited :active :hover를 배웠습니다. [css] 링크 가상 클래스(:link, :visited,:hover, :active) 오늘은 사용자 행동에 기반한 가상 클래스 :focus 선택자를 배워보겠습니다. 참고로 :active :hover :focus 는 '사용자 행동 가상 클래스'(the user action psuedo-class)로 분류됩니다. :focus 가상 클래스 포커스를 가진 요소에 적용하는 선택자입니다. 포커스란? 요소가 선택되거나 마우스 이벤트 상태, 또는 태그에서 기본값 상태(입력할 준비가 될 때 커서가 깜빡거리는 것) 일 때 포커스 되었다고 합니다. 이외에도, 역시 기본값으로 :focus.. 2014. 10. 31.
[css3] box-shadow 속성(그림자 효과) [css3] box-shadow 속성(박스 그림자 효과) box-shadow 속성은 박스 요소에 그림자를 넣는 속성입니다. ▶문법 box-shadow: none | h-shadow v-shadow blur spread color | inset none 기본값으로, 그림자가 표시되지 않음 h-shadow 필수 지정. 수평 그림자 위치. 양수 값을 지정하면 박스 오른쪽에 그림자가 드리워지며, 음수 값은 박스 왼쪽에 그림자가 드리워짐 v-shadow 필수 지정. 수직 그림자 위치. 양수 값은 박스 위쪽에 그림자가 드리워지며, 음수 값은 박스 아래 쪽에 blur 선택 지정, 그림자의 흐림 정도. 0으로 지정하면 그림자가 진하고, 숫자가 높아질수록 점점 흐릿해짐(양수값만 허용) spread 선택 지정. 그림자가 .. 2014. 10. 8.
[css3] background-origin 속성 [css3] background-origin 속성 background-origin 속성은 배경 이미지의 위치를 어디서부터 시작할지 지정합니다. background-image 속성과, background-clip 속성과 함께 사용하는데 background-clip 속성 배경 이미지를 넣는 background-image 속성 background-clip은 배경 이미지가 border, padding, content 세 영역 중에서 어디에서 잘릴지 지정하는 속성입니다. background-origin 역시 border, padding, content 세 영역 중에서 시작 위치를 지정합니다. ▶ 문법 background-origin: padding-box|border-box|content-box|initial|i.. 2014. 10. 7.
[css3] border-radius 속성(둥근 모서리) [css3] border-radius 속성(둥근 모서리) 둥근 모서리를 만들 때 border-radius 속성을 사용합니다. ▶문법 border-radius: : 길이값|% / 길이값|% *길이값: px , cm, in, pt 등 *기본값은 0 *길이값은 top-left, top-right, bottom-right, bottom-left 순임. (상단 왼쪽부터 시작하여 시계방향으로 돌아감) *슬래시 앞이 수평 반지름, 슬래시 뒤가 수직 반지름이며 슬래시가 없을 경우, 수평, 수직이 동일하게 적용됩니다. 값이 1개 일 때 - 상,하,좌,우 동일한 값이 적용되며 값이 2개일 때- 첫번째 값이 top-left, bottom-right 두번째는 top-right, bottom-left 값이 3개일 때 - 첫번째.. 2014. 10. 6.
[css] 자손 선택자, 자식 선택자 차이 [css] 자손 선택자, 자식 선택자 차이 css 선택자 중에 자손 선택자와 자식 선택자를 알아 보겠습니다. css 선택자, 선택자 종류와 사용법 자손 선택자 자손 선택자(descendant selector)는 문서 구조에서 특정 요소의 자손을 선택하는 선택자입니다. 자손은 자식, 손자, 그리고 그 이후에 후손을 모두 포함 합니다. ★ 문법 A B{속성: 속성값;} A와 B 사이를 공백(space)로 분리하여 표시합니다. 사용 예: div p{color:blue;} div 이내에 있는 p 요소는 모두 파란색 글씨로 지정 됩니다. 실제 html/css 작성 예를 보겠습니다 html item item item item item item item item item item item item css OL LI{.. 2014. 10. 2.
[css] rgba, opacity 차이 [css] rgba, opacity 차이 css 투명도를 지정하는 opacity 속성과, 색상값 rgba에서 alpha값을 통해 투명도를 조절하는 방법을 배웠습니다. opacity 속성(투명도 지정) 색상값 단위 5가지(rgba 포함) 간략하게 복습해 보면, opacity 속성 적용 예: div { background-color: rgb(0,255,0); opacity: 0.5; } rabg 적용 예: div{border: 20px solid rgba( 0, 255, 0, 0.5);} 그럼 rgba와 opacity 속성 차이가 무엇을까요? opacity 속성은 투명도를 지정했을 때 모든 자식 요소에 투명도 값이 상속됩니다. rgba로 지정하면 rgba를 선언한 요소에만 적용되며 상속되지 않습니다. ▶예시.. 2014. 9. 26.
[css3] background-clip 속성 [css3] background-clip 속성 background-clip은 배경을(배경색이나 이미지) 어디까지 색칠할지 지정하는 속성 입니다 background-clip를 그대로 해석하자면 '배경 이미지 자르기' 정도가 될 것 같습니다. ▶문법 background-clip: border-box|padding-box|content-box|initial|inherit; border-box : 기본값, border 즉 테두리 영역까지 배경을 칠함. (테두리 영역까지만 자름) padding-box : padding 영역에까지 배경을 칠함. content-box : content 즉 내용 영역까지 배경을 칠함. initial : 초기화 inherit : 상속 상속 여부: no 박스 모델 이해하기 ▶ backgr.. 2014. 9. 24.
[css] 색상값 단위 5가지(rgba 포함) [css] 색상값 단위 5가지(rgba 포함) css 색상값(color value)을 입력할 때 다음 색상 단위를 이용할 수 있습니다. 1. 색상 이름(red,black, blue 등) 2. rgb(red, green, blue)값 3. rgba(red, green, blue, alpha)값 4. hsl(hue, saturation, linhtness)값 5. hsla(hue, saturation, lightness, alpha)값 이 중, rgba, hsl, hsla는 css3 으로 다음 브라우저에서만 지원합니다. IE9+,Chrome 4.0+, FireFox 3.0+, Safari 3.1+, Opera 10.0+, CSS 색상 단위 1. 색상 이름(color keyword) black, white, .. 2014. 9. 23.
[css3] opacity 속성(투명도 지정) [css3] opacity 속성(투명도 지정) opacity는 요소의 투명도를 지정하는 속성입니다. 1은 완전히 불투명하고, 0은 완전히 투명한 단계입니다. 기본값은 1(100% 불투명) ▶문법: opacity:숫자initial|inherit; *숫자:0.0에서 1.0까지 *initial 초기화 *inherit 상속 ▶opacity 브라우저 지원 정보 ie9.0+, chrome 4.0+, firefox 2.0+, safari 3.1+, opera 9.0+ ▶ie8이전 버전에서 투명도를 작동하게 하려면? -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 filter: alpha(opacity=50); // IE 5-7 에서 하.. 2014. 9. 22.
반응형

티스토리툴바