본문 바로가기

CSS3

[CSS3] 변형 속성 CSS3의 변형속성을 사용하면 웹(web)에서 간단한 애니메이션(animation)을 구현할 수 있습니다. CSS3에서 사용할 수 있는 변형속성에는 다음과 같은 것들이 있습니다. (1) transition-duration 지정한 시간(초)동안 속성에 대한 변형이 일어나도록 합니다. 확인을 위해 다음과 같이 div를 하나 생성하고 The cockpit of the A-10C contains three primary instrument panels that include gauges and indicators that display flight parameters, aircraft system states, engine state, control positions, and system warnings. 여기.. 더보기
[CSS3] 선택자 - 클래스 선택 클래스 선택자 태그에 특정 클래스가 적용되어 있는 경우 해당 클래스를 가진 태그를 .(점)문자를 사용하여 선택합니다.CLIEL▶span 태그에 color_span 클래스 적용.color_span { color:red; }▶color_span 클래스 사용 태그 선택 같은 클래스를 사용하는 서로 다른 태그에서 특정 태그만을 선택해야 한다면 . 형식으로 지정해야 합니다.CLIEL CLIEL▶다른 태그에 같은 color_span 스타일 적용span.color_span { color:red; }▶span의 color_span만을 선택 또한 하나의 태그에 여러 클래스가 적용된 경우CLIEL해당 클래스 모두 선택이 가능하며 각각의 스타일 적용이 가능합니다..color_span { color:red; } .bold_s.. 더보기
[CSS3] 키프레임(keyframe)과 애니메이션(animation) 키프레임(keyframe)은 정해진 시간분할에 따라 %단위로 애니메이션(animation)을 구현하기 위한 것이며 이를 위해 animation- 속성 사용 후 키프레임(keyframe)과 연결하여 애니메이션을 구현하게 됩니다. 그럼 이제 keyframe과 animation 속성을 어떻게 사용하는지 예제를 통해 알아보도록 하겠습니다. 우선 아래와 같이 div하나를 생성한 후 The cockpit of the A-10C contains three primary instrument panels that include gauges and indicators that display flight parameters, aircraft system states, engine state, control positions.. 더보기
[CSS3] 선택자 - 상태 선택 상태 선택은 사용자로 부터 어떤 값를 입력받는 요소에 많이 쓰이는 선택자 입니다.남 여 남자를 선택함. 사용 불가(1) checked input 요소를 check 상태로 만들었을때를 의미합니다.#man:checked ~ #o_man { color:red; }▶ man id 의 input 요소를 check 상태로 만들면 그 앞에 있는 모든 요소중 id가 o_man인 tag에 style을 적용 (2) disabled / enabled#woman:disabled ~ #o_false { color:blue; }▶ woman id의 input 요소가 disabled 로 사용이 불가능하면 그 앞에 있는 모든 요소중 id가 o_false인 tag에 style을 적용, 반면 enabled 로 하면 사용가능임. (3) .. 더보기
[CSS3] linear-gradient 선형 gradient 를 만듭니다. 예를 들어위와 같이 생성한 DIV에 gradient 를 적용하려면 다음과 같이 CSS를 작성합니다. .div_grd { background: linear-gradient(15deg, red 0%, blue 100%); height: 200px; }linear-gradient 속성을 배경에 지정하여 gradient를 적용하도록 하였으며 15도 각도로 처음에는 red로 시작하였다가 blue로 변화하도록 합니다. 만일 중간에 더 많은 색상을 지정하려면 원하는 색과 적용될 %를 추가적으로 넣어주면 됩니다.linear-gradient(15deg, #ffffff 0%, yellow 50%, #000000 100%); 더보기
[CSS3] 선택자 - 자손 선택 자손 선택자 자손은 문서 구조상 특정 태그의 아래 모든 요소를 자손이라고 합니다. 이름 입력 : 전화번호 입력 : 위 태그에서 tr의 자손은 td입니다.tr > td { color:red; }▶ tr 아래 모든 td에 스타일을 적용합니다. 자손을 지정할때 특정 태그로 한정한다면 해당 태그의 자손만 유효합니다. 예를 들어 이름 전화번호 기타 주소 위와 같은 구조의 경우 다음과 같이 지정했을때#sub > td { color:red; }스타일이 적용되는 것은 id가 sub인 tr에서의 아래 요소뿐이므로 화면상으로는 '기타'표시만 바뀌게 됩니다. 하위 table 아래에 td는 상위 sub 아이디의 tr 아래에 포함되지 않습니다. 위 예제로 table 태그를 사용하였는데 대부분의 웹브라우저에서는 table 태그사.. 더보기
[CSS3] display 특정 요소를 화면에 어떻게 보일것인지를 지정하는 속성입니다. 이름 : 주소 : display 속성의 특성을 살펴보기 위해 div 하나를 만들고 그 안에 여러 요소를 배치하였습니다.#view_div { display: none; }display 속성을 위와 같이 지정하면 div 전체가 화면에 표시되지 않을 것입니다. 더보기
[CSS3] 선택자 - 태그 선택 태그 선택자 특정 태그를 사용하여 해당 문서내에 지정된 태그만을 선택합니다.span { color:red; }만약 여러태그에 동일한 스타일을 적용하려면 해당 태그를 ,(콤마)로 구분해 지정합니다.span, p { color:red; } 더보기