'CSS3'에 해당되는 글 20건

Programming/HTML CSS
CSS3의 변형속성을 사용하면 웹(web)에서 간단한 애니메이션(animation)을 구현할 수 있습니다. CSS3에서 사용할 수 있는 변형속성에는 다음과 같은 것들이 있습니다.

(1) transition-duration

지정한 시간(초)동안 속성에 대한 변형이 일어나도록 합니다. 확인을 위해 다음과 같이 div를 하나 생성하고
<div id="test_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.
</div>
여기에 배경속성과 크기를 지정 후 :hover 를 사용해 마우스(mouse)를 올릴때의 이벤트(Event)를 걸어 배경색이 바뀌도록 하였습니다.
<style>
  #test_div {
   width: 500px;

   background-color: blue;
  }

  #test_div:hover {
   background-color: red;
  }
</style>
여기에 transition-duration 속성을 추가하여 2초동안 애니메이션(animation)이 적용되도록 하면 다음과 같이 처리할 수 있습니다.
#test_div {
   width: 500px;

   background-color: blue;
   transition-duration: 2s;
 }
(2) transition-delay

이 속성은 일정시간 지연 후 속성에 대한 변형이 일어나도록 합니다.
 <style>
  #test_div {
   width: 500px;
   
   background-color: blue;
   transition-delay: 2s;
  }
  
  #test_div:hover {
   background-color: red;
  }
 </style>
위와 같이 속성을 지정하면 마우스(mouse)를 해당 div에 올리거나 내릴때마다 2초후에 배경색이 바뀔것입니다.

(3) transition-property

transition- 속성을 사용하여 애니메이션(animation)을 적용하면 지정된 모든 속성이 영향을 받게 됩니다. 예를 들어
  #test_div {
   width: 500px;

   background-color: blue;
   transition-duration: 2s;
  }

  #test_div:hover {
   width: 1000px;
   
   background-color: red;
  }
위와 같은 경우 background-color과 widht가 transition 속성에 영향을 받을 것입니다. 이때 transition-property 속성을 사용하면 여러 속성 전체가 아닌 특정속성에만 transition 속성의 영향을 받을 수 있도록 지정할 수 있습니다.
 <style>
  #test_div {
   width: 500px;

   background-color: blue;
   transition-duration: 2s;
   transition-property: background-color;
  }

  #test_div:hover {
   width: 1000px;
   
   background-color: red;
  }
 </style>
전체중 background-color 속성만 transition의 적용대상이 되도록 하였습니다. 다만 이 경우에도 만일 2가지 이상의 속성을 지정해야 하는 경우가 생기는데 이럴때는 transition-property: background-color, width; 처럼 ,를 사용해 구분하여 지정하면 됩니다.

(4) transition-timing-function

속성이 변경될때의 시간차에 대한 함수를 지정하는 속성입니다. 예를 들어 단순히 transition-duration: 2s 라고 했을때 기본값인 ease가 적용되 처음에는 느리게 가다가 점점 빠르게 진행되고 마지막 순간 다시 느려지는 다음 형태의 시간차가 적용될 것입니다.


만일 처음부터 끝까지 일정한 시간차로의 변형이 요구되는 경우라면 linear 형태가 알맞을 것이며 해당 속성을 다음과 같이 지정하면 됩니다.
#test_div {
   width: 500px;
   
   background-color: blue;
   transition-duration: 5s;
   transition-timing-function: linear;
}
특정 곡선이 아닌 임의의 시간차를 그릴 필요가 있다면 cubic-bezier 함수를 사용하면 됩니다.
transition-duration: 5s;
transition-timing-function: cubic-bezier(1,.01,.64,1);
참고로 cubic-bezier 함수에 담겨질 값은 http://cubic-bezier.com/ 사이트(site)를 이용하면 편리하게 생성할 수 있습니다.

(5) transition

transition-property 나 transition-delay 와 같은 속성을 일일이 따로 지정하지 않고 한꺼번에 모두 지정하고자 할때 transition 속성을 사용할 수 있습니다. transition의 구문 형식은 다음과 같습니다.

transition: <proerty> <duration> <function> <delay>;

예를 들어
transition: background-color 5s ease;
로 지정하는 경우 background-color 에 대해 5초동안의 ease시간차에 대한 애니메이션(animation)을 적용한다는 의미이며 delay로 인한 시간지연은 없음을 의미합니다.

transition 속성을 이용해서도 2가지 이상의 처리를 지정할 수 있는데 이 경우 ,(comma)를 사용해 각 설정을 구분하여 지정합니다.
transition: background-color 5s ease, width 5s ease 1s;
0 0
Programming/HTML CSS
클래스 선택자

태그에 특정 클래스가 적용되어 있는 경우 해당 클래스를 가진 태그를 .(점)문자를 사용하여 선택합니다.
<span class="color_span">CLIEL</span>
▶span 태그에 color_span 클래스 적용
.color_span {
 color:red;
}
▶color_span 클래스 사용 태그 선택

같은 클래스를 사용하는 서로 다른 태그에서 특정 태그만을 선택해야 한다면 <태그>.<클래스> 형식으로 지정해야 합니다.
<span class="color_span">CLIEL</span>
<p class="color_span">CLIEL</p>
▶다른 태그에 같은 color_span 스타일 적용
span.color_span {
 color:red;
}
▶span의 color_span만을 선택

또한 하나의 태그에 여러 클래스가 적용된 경우
<span class="color_span bold_span">CLIEL</span>
해당 클래스 모두 선택이 가능하며 각각의 스타일 적용이 가능합니다.
.color_span {
 color:red;
}

.bold_span {
 font-weight:bold;
}
0 0
Programming/HTML CSS
키프레임(keyframe)은 정해진 시간분할에 따라 %단위로 애니메이션(animation)을 구현하기 위한 것이며 이를 위해 animation- 속성 사용 후 키프레임(keyframe)과 연결하여 애니메이션을 구현하게 됩니다.

그럼 이제 keyframe과 animation 속성을 어떻게 사용하는지 예제를 통해 알아보도록 하겠습니다. 우선 아래와 같이 div하나를 생성한 후
<div id="test_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.
</div>
생성한 div에 관련 CSS3속성과 애니메이션(animation)을 적용을 위한 키프레임(keyframe)을 작성합니다.
#test_div {
   width: 100px;
   background-color: blue;
  }

@keyframes ani {
   from {
    width:100px;
   }

   to {
    width:500px;
   }
}
키프레임(keyframe)은 위와 같이 @keyframe으로 작성하며 뒤에 keyframe의 이름을 지정합니다. 예제에서는 이름을 ani라고 지정하였으며 실제 이름은 임의로 작성합니다.

키프레임(keyframe)안에 from과 to가 있는데 여기서 from은 0%시간대를, to는 100%시간대를 의미합니다.

keyframe 작성이 끝나면 animation-name속성을 사용하여 미리 작성한 keyframe과 연결합니다. 이렇게 하면 해당 keyframe에 정해진 대로 애니메이션(animation)이 구현될 것입니다.
#test_div {
   width: 100px;
   background-color: blue;

   animation-name: ani;
   animation-duration: 5s;
}
test_div의 CSS속성에 추가된 animation-duration 속성을 통해 5초간 애니메이션(animation)이 구현되도록 하였습니다.

위와 같이 예제를 작성한 후 브라우저(browser)를 통해 보면 5초동안 keyframe에서 지정한 from(0% -> 0초)에서 to(100% -> 5초)까지 설정된 만큼 크기가 변하는 것을 볼 수 있습니다.

만일 keyframe을 통해 50%(2.5초)정도의 시간차에서 특정한 동작을 구현하려면 다음과 같이 지정하고자 하는 %대를 선언하고 from이나 to와 같이 특정 동작을 지정하면 됩니다.
@keyframes ani {
   from {
    width:100px;
   }

   50% {
    width:400px;
   }

   to {
    width:500px;
   }
}
▶ keyframe을 통해 50%(2.5초대) 상황에서 div크기를 400px가 되도록 지정하였습니다.

CSS3에서 애니메이션(animation) 구현을 위해 사용할 수 있는 animation 속성은 다음과 같은 것들이 있습니다.

1. animation-name

키프레임(keyframe)은 이름만 달리하면 여러개 생성할 수도 있습니다. 이때 animation-name 속성은 여러개의 키프레임(keyframe)중 어떤것을 연결할지 지정하는 속성입니다.

2. animation-play-state

애니메이션(animation)이 재생될때 재생상태를 지정하는 속성입니다. 예를 들어 예제의 div를 통해 애니메이션(animation)이 재생되는 경우 해당 div에 마우스를 올릴때 애니메이션(animation) 재생을 중단하고자 한다면 다음과 같이 animation-play-state 속성을 지정하면 됩니다.
#test_div:hover {
   animation-play-state: paused;
}
3. animation-duration

애니메이션(animation)이 얼마동안 구현될지에 대한 시간을 지정합니다.

4. animation-delay

애니메이션(animation)을 즉시 재생하지 않고 지정한 시간동안 지연 후 재생하도록 합니다.

5. animation-iteration-count

애니메이션(animation)반복 횟수를 지정합니다. 원하는 횟수만큼의 숫자를 지정하거나 무한대일 경우 infinite를 지정합니다.

6. animation-timing-function

애니메이션(aniamtion)이 재생될때의 시간차에 대한 함수를 지정합니다. 예를 들어 단순히 animation-duration: 2s 라고 했을때는 기본값인 ease가 적용되 처음에는 느리게 가다가 점점 빠르게 진행되고 마지막 순간 다시 느려지는 다음과 같은 형태의 시간차가 적용됩니다.(ease 참고)


만일 처음부터 끝까지 일정한 시간차로의 변형이 요구되는 경우라면 linear 형태가 알맞을 것이며 해당 속성을 다음과 같이 지정하면 됩니다.
#test_div {
   width: 500px;
   background-color: blue;

   animation-name: ani;
   animation-duration: 5s;
   animation-timing-function: linear;
}
마찬가지로 특정 곡선이 아닌 임의의 시간차를 그릴 필요가 있다면 cubic-bezier 함수를 사용합니다.
animation-duration: 5s;
animation-timing-function: cubic-bezier(1,.01,.64,1);
참고로 cubic-bezier 함수에 담겨질 값은 http://cubic-bezier.com/ 사이트(site)를 이용하면 편리하게 생성할 수 있습니다.

7. animation-direction

animation-iteration-count 속성이 애니메이션(animation)이 반복되도록 반복횟수를 지정하는 경우라면 animation-direction은 어떤 형식으로 반복할지에 대한 반복형식을 지정하는 속성입니다.

이 속성의 값을 normal(기본값)으로 하는 경우 from에서 to로의 반복을 수행하지만 alternate로 지정하는 경우 from에서 to로 갔다가 다시 to에서 from으로 가도록 합니다.

참고로 animation-direction 속성이 제대로 동작하려면 animation-iteration-count 속성에 반복횟수가 지정되어 있어야 합니다.

8. animation

위 1~6번까지의 모든 속성을 한꺼번에 지정하려면 animation 속성을 사용합니다. animation 속성 사용형식은 다음과 같습니다.

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction>;
animation: ani 5s linear none 1 normal;
▶animation 속성 작성 예
0 0
Programming/HTML CSS
상태 선택은 사용자로 부터 어떤 값를 입력받는 요소에 많이 쓰이는 선택자 입니다.
<input type="radio" id="man" name="sex" />남<br />
<input type="radio" id="woman" name="sex"  disabled="disabled" />여

<span id="o_man">남자를 선택함.</span>
<span id="o_false">사용 불가</span>
(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) focus
input:focus {
 color:red;
}
▶ input 요소중 focus 상태인 것이 있으면 해당 input에 style을 적용

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
0 0
Programming/HTML CSS
선형 gradient 를 만듭니다. 예를 들어
<div class="div_grd"></div>
위와 같이 생성한 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%);

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
0 0
Programming/HTML CSS
자손 선택자 

자손은 문서 구조상 특정 태그의 아래 모든 요소를 자손이라고 합니다.
<table>
 <tr>
  <td>이름</td>
  <td>입력 : <input type="text" id="name" /></td>
 </tr>
 <tr>
  <td>전화번호</td>
  <td>입력 : <input type="text" id="phone" /></td>
 </tr>
</table>
위 태그에서 tr의 자손은 td입니다.
tr > td {
 color:red;
}
▶ tr 아래 모든 td에 스타일을 적용합니다.

자손을 지정할때 특정 태그로 한정한다면 해당 태그의 자손만 유효합니다. 예를 들어
<table>
 <tr>
  <td>이름</td>
  <td><input type="text" id="name" /></td>
 </tr>
 <tr>
  <td>전화번호</td>
  <td><input type="text" id="phone" /></td>
 </tr>
 <tr id="sub">
  <td>기타</td>
  <td>
   <table>
    <tr>
     <td>주소</td>
     <td><input type="text" id="address" /></td>
    </tr>
   </table>
  </td>
 </tr>
</table>
위와 같은 구조의 경우 다음과 같이 지정했을때
#sub > td {
 color:red;
}
스타일이 적용되는 것은 id가 sub인 tr에서의 아래 요소뿐이므로 화면상으로는 '기타'표시만 바뀌게 됩니다. 하위 table 아래에 td는 상위 sub 아이디의 tr 아래에 포함되지 않습니다.

위 예제로 table 태그를 사용하였는데 대부분의 웹브라우저에서는 table 태그사용시 자동으로 tbody를 추가하는 경우가 있습니다. 이 때문에 자손 선택자 사용시 원하지 않는 결과가 생길 수 있으므로 주의가 필요합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
0 0
Programming/HTML CSS
특정 요소를 화면에 어떻게 보일것인지를 지정하는 속성입니다.
<div id="view_div">
이름 : <input type="text" /><br />
주소 : <input type="text" /><br /><br />
<input type="button" value="확인" />
</div>
display 속성의 특성을 살펴보기 위해 div 하나를 만들고 그 안에 여러 요소를 배치하였습니다.
#view_div {
 display: none;
}
display 속성을 위와 같이 지정하면 div 전체가 화면에 표시되지 않을 것입니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
0 0
Programming/HTML CSS
태그 선택자

특정 태그를 사용하여 해당 문서내에 지정된 태그만을 선택합니다.
span {
 color:red;
}
만약 여러태그에 동일한 스타일을 적용하려면 해당 태그를 ,(콤마)로 구분해 지정합니다.
span, p {
 color:red;
}

'Programming > HTML CSS' 카테고리의 다른 글

[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
0 0
Programming/HTML CSS
속성 선택자

문서내에 요소중 특정 속성과 그 값을 가진 태그만을 선택하도록 합니다.
이름 : <input type="text" id="input_name" /><br />
<input type="button" value="확인" />
▶요소 정의
input[type=text] {
 border-color:red;
}
▶정의된 요소중 type 속성이 text 인것만 해당 스타일 적용

하나의 속성이 아닌 여러 속성을 지정해야 한다면 []로 '[속성=값][속성=값]'처럼 연결하면 됩니다.

만약 값이 아닌 속성만을 대상으로 해야 한다면 값을 제외하고 다음과 같이 지정합니다.
input[type] {
 border-color:red;
}
▶type 속성을 가진 요소만을 선택

속성과 값 사이에 특정 연산자를 사용하면 값의 구분을 제어할 수 있습니다. 위 예제에서는 = 기호만을 사용해 정확히 값에 일치하는 요소만을 선택하였으나 다음 표의 기호를 사용하면 값의 대한 선택방법을 좀더 유동적으로 바꿀 수 있습니다.

 ~=  속성이 '값'을 단어로 포함하고 있는 요소를 선택
 ^=  속성이 '값'으로 시작하는 요소를 선택
 $=  속성이 '값'으로 끝나는 요소를 선택
 *=  속성이 '값'을 포함하는 요소를 선택

예를 들어 아래에 attr_type 이라는 특정 속성이 적용된 경우
이름 : <input type="text" attr_type="aaa bbb" id="input_name" /><br />
<input type="button" attr_type="aaabbb" value="확인" />
선택자를 다음과 같이 지정했을때
input[attr_type~=bbb] {
 border-color:red;
}
input이 text 인 첫번째 태그가 선택됩니다. ~= 기호는 단어로서 포함되는 내용을 지정하기 때문에 aaa bbb 처럼 aaa와 bbb가 구분되어 bbb값을 따로 볼 수 있는 형태의 태그만 선택되는 것입니다. 두번째 input의 attr_type속성 값은 aaabbb 이므로 bbb를 별도의 단어로 인식하기에는 어려워 보입니다.

반면 아래 정의는
input[attr_type*=bbb] {
 border-color:red;
}
두개의 input 요소 모두를 선택하도록 합니다. *= 기호는 해당 속성에 지정된 값을 포함하고 있는 것이면 되므로 aaa bbb든 aaabbb든 모두 해당합니다.
input[attr_type^=aaa] {
 border-color:red;
}
위 선택자는 attr_type 속성의 값이 aaa로 시작하는 요소를 의미하므로 이것 역시 aaa bbb든 aaabbb든 모두 해당합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
0 0
Programming/HTML CSS
후손 선택자

후손이라 함은 특정 태그 아래에 속한 태그를 의미하며 태그를 단계별로 지정하여 원하는 요소를 선택하는 방법입니다.
<table>
 <tr>
  <td>이름</td>
  <td name="name"><input type="text" /></td>
 </tr>
 <tr>
  <td>전화번호</td>
  <td name="phone"><input type="text" /></td>
 </tr>
</table>
위와 같은 구조의 태그가 있는 경우 input 요소를 선택하려면 다음과 같이 할 수 있습니다.
td input {
 border-color:red;
}
td 아래에 input 이 있는 형태이므로 input은 td의 후손이라 할 수 있습니다.(사실 위 방법은 별 의미가 없습니다. 그냥 input 이라고만 해줘도 선택되는 것은 마찬가지인데 후손의 개념을 설명하기 위한 것이므로 이해 바랍니다.)

필요한 경우 다음과 같이 길게 늘어놓을 수도 있죠.
table tr td input {
 border-color:red;
}
▶table 밑에 있는 tr 밑에 있는 td 밑에 있는 input을 선택

이러한 방법말고 대신 전화번호에 해당하는 input 요소만을 선택하고자 한다면
td[name=phone] input {
 border-color:red;
}
위와 같이 할 수도 있습니다. 태그요소 대신 특정속성이나 아이디와 같은 다른 방법으로도 후손의 개념을 적용하는 것입니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
0 0
Programming/HTML CSS
특정 요소를 화면에 보이거나 보이지 않게 합니다.
<div id="view_div">
이름 : <input type="text" /><br />
주소 : <input type="text" /><br /><br />
<input type="button" value="확인" />
</div>
위 tag에서 div를 보이지 않게 하려면 다음과 같이 visibility 속성을 지정합니다.
#view_div {
 visibility: hidden;
}
hidden 대신에 visible로 하면 화면에 다시 보이도록 할 수 있습니다. display라는 속성으로도 비슷한 기능을 수행할 수 있는데 display는 요소를 숨기면서 요소가 차지하던 해당 공간도 제거하지만 visibility는 공간은 그대로 두고 요소만 보이지 않도록 합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
0 0
Programming/HTML CSS
말 그대로 선택자로 지정한 것이 아닌 것을 선택하는 선택자이며 not 을 사용합니다.
이름 : <input type="text" /><br />
주소 : <input type="text" /><br /><br />
<input type="button" value="확인" />
위 구조에서
input:not([type=text]) {
 color: red;
}
위와 같이 부정선택자를 사용하면 type이 text가 아닌것(예제에서 type이 button)만 선택하여 style을 적용하게 됩니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
0 0
Programming/HTML CSS
먼저 구조선택은 구조상 같은 위치의 태그를 선택하기 위해 다음 4가지 keyword를 사용할 수 있습니다.

 first-child  첫번째 태그
 last-child  마지막 태그
 nth-child  n번째 태그
 nth-last-child  마지막에서 n번째 태그

예를 들면
<table>
 <tr>
  <td>이름</td>
  <td>주소</td>
  <td>나이</td>
  <td>전화</td>
 </tr>
</table>
위 구조에서 첫번째 td와 세번째 td를 구조태그로 선택하려면 다음과 같이 선택자를 작성할 수 있습니다.
td:first-child, td:nth-child(3) {
 color:red;
}
특히 nth- 선택자를 사용하면 뒤에 가변적인 수열을 작성해서 원하는 태그를 반복적으로 선택할 수 있습니다.
td:nth-child(2n+1) {
 color:red;
}
위 구현은 첫번째 선택자 구현과 결과가 일치합니다. 뒤에 지정한 숫자는 2n + 1이므로 1부터 시작해 2씩 더해져 첫번째와 세번째 td를 선택하게 합니다. 이 상태에서 만약 td태그가 1개 더 추가된다면 자연히 추가된 td도 선택자 영향을 받게 됩니다.

구조 선택은 조금 다른 방식으로 다음 선택자도 사용할 수 있습니다.

 first-of-type  자손중 첫번째
 last-of-type  자손중 마지막
 nth-of-type  자손중 n번째
 nth-last-of-type  자손중 마지막 n번째

이 선택자를 사용해 이미 언급한 태그에서 첫번째 td만을 선택하게 하려면 아래와 같이 선택자를 작성합니다.
tr > td:first-of-type {
 color:red;
}
▶ tr 자손중 첫번째 td를 선택

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
0 0
Programming/HTML CSS
요소의 투명도를 지정합니다.
<div id="view_div">
asP.neT Web server Control
</div>
위 tag에서 div에 투명도를 설정하려면 다음과 같이 지정합니다.
#view_div {
 opacity: 0.3;
}
opacity 의 값은 0.0 ~ 1.0 까지이며 값이 높을 수록 불투명도가 높아집니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
0 0
Programming/HTML CSS
a tag 에서 href 속성이 적용된 다음과 같은 tag 를 선택하는 방법입니다.
<a href="http://www.daum.net/">다음</a>
<a href="http://www.naver.com/">네이버</a>
이와 같은 tag에서 사용할 수 있는 선택자는 다음과 같습니다.
a:visited {
 color: red;
}
▶ 이미 방문한 적이 있는 link는 붉은색으로 표시합니다.
a:link {
 color: blue;
}
▶ 모든 link tag 를 파란색으로 표시합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
0 0
Programming/HTML CSS
<p>안녕하세요.<br />
반갑습니다.</p>
위 tag 에서 첫글자 '안'과 첫번째줄인 '안녕하세요'에 style을 적용하려면 아래와 같은 선택자를 사용합니다.
p::first-letter {
 font-size: 50px;
}
▶ 첫글자 '안'의 크기를 50px로 합니다.
p::first-line {
 color: red;
}
▶ '안녕하세요' 첫줄 전체를 붉은 색으로 합니다.

문자와 관련하여 반응형으로 동작하는 재미있는 선택자도 있는데
p::selection {  color: red; }
이와 같이 selection 선택자를 사용하면 사용자가 p tag 내부의 특정 내용을 drag 하여 선택했을때 선택한 부분만 붉은색으로 바뀌도록 합니다.

또 다른 형태로 아래 선택자를 사용하면 tag 내부의 처음 또는 마지막에 특정 내용을 추가할 수 도 있습니다.
p::before {
 content: "->";
}
▶ p tag 의 처음 부분에 '->' 내용을 추가합니다.
p::after {
 content: "<-";
}
▶ p tag 의 마지막 부분에 '<-' 내용을 추가합니다.

이때 content 는 p tag 내부의 요소를 의미하는 것으로 before나 after 선택자에서만 사용이 가능합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
[CSS3] 선택자 - 동위 선택  (0) 2013.05.06
[CSS] z-index, top, left, zoom, float  (0) 2013.05.01
0 0
Programming/HTML CSS
동위 선택자

구조상 같은 level의 위치에 있는 tag를 선택하는 방법입니다.
<ul>
 <h1>Header 1</h1>
 <h2>Header 2</h2>
 <h2>Header 2</h2>
 <h3>Header 3</h3>
</ul>
위 구조에서 h1, h2, h3 는 모두 같은 위치에 있습니다. 이 상태에서 특정 tag의 바로 앞에 있는 tag를 선택하려면 + 기호를 사용합니다.
h1 + h2 {
 color:red;
}
▶ h1 바로 앞에 있는 h2를 선택합니다.

위 예제는 바로 앞에 있는 것만 해당하므로 세번째 h2는 해당되지 않습니다. 만일 앞에 있는 모든 h2를 선택하려면 ~ 기호를 사용해야 합니다.
h1 ~ h2 {
 color:red;
}
▶ h1 앞에 있는 모든 h2를 선택합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
[CSS3] 선택자 - 동위 선택  (0) 2013.05.06
[CSS] z-index, top, left, zoom, float  (0) 2013.05.01
[CSS3] 선택자 - 반응 선택  (0) 2013.04.29
[CSS3] 선택자 - 아이디 선택  (0) 2013.04.26
0 0
Programming/HTML CSS
반응 선택은 마우스를 특정 태그에 올리거나 클릭하는 경우에 스타일을 적용할 수 있도록 하는 선택자 입니다.
<span>CLIEL</span>
위 태그에서 사용자가 CLIEL에 마우스를 클릭하는 경우 특정 스타일로 반응하도록 하려면 반응 선택자를 다음과 같이 사용합니다.
span:active {
 color:red;
}
다른 반응 선택자로 hover라는 것도 있는데 이 것은 마우스 클릭이 아닌 단순히 올리는 경우에 해당하는 것으로서 IE에서 테스트결과 a 링크에만 적용되는 것으로 보입니다.
0 0
Programming/HTML CSS
태그에 아이디 속성이 지정되어 있는 경우 #문자를 사용하여 해당 아이디 값을 가진 태그를 선택합니다.
<span id="test_span">korea!</span>
▶span 태그에 test_span 이라는 아이디 지정
#test_span {
 color:blue;
}
▶test_span 태그 아이디 선택

아이디는 중복이 가능하며 이런 경우 해당 아이디를 가진 모든 태그가 선택됩니다. 다만 중복을 권장하지 않습니다.
0 0
Programming/HTML CSS
문서의 특정 태그에 특정한 스타일을 적용하기 위해서는 해당 태그에 대한 선택이 필요합니다. 이때 선택자 방식을 이용하게 되는데 이 선택자 방식은 CSS뿐만 아니라 jquery에서도 동일하게 사용됩니다.

선택자 형식은 다음과 같습니다.

 선택자 { 속성 : 값; }

전체 선택

문서의 모든 태그(body를 포함하는 html 태그 전체)를 선택하는 방법으로 * 문자를 사용합니다.
* {
 color:red;
}
0 0
1
블로그 이미지

클리엘