키보드와 하루

1. 개념 가상 클래스 - :enabled , :disabled , :checked 사용자의 움직임으로 인한 이벤트에 따른 것 뿐만 아니라 요소 안에서 이루어지는 상태에 따라 스타일을 지정할 수 있음 여기서 자주 사용되는 가상 클래스는 :enabled , :disabled , :checked 이러한 것들이 있음 2. 태그 :enabled , :disabled , :checked html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 키보드와 하루 1 input:enabled { border : 1px solid blue ; } 2 input:disabled { border : 1px ..

1. 개념 가상 클래스 - :link , :visited , :hover , :active , :focus 어떠한 요소를 클릭하거나 마우스 커서를 올리거나 내리기와 같이 특정한 동작이 이루어질 때 스타일이 바뀌도록 만들어 주는 것을 가상 클래스라고 함 그 중에서 자주 사용되는 가상 클래스는 :link , :visited , :hover , :active , :focus 이러한 것들이 있음 2. 태그 가상 클래스 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 키보드와 하루 1 a:link { background : yellow ;..

1. 개념 [속성 *=값] 선택자 - 특정 값이 일치하는 속성에 스타일 적용 *는 자신이 스타일을 주고자 하는 속성 값을 찾아서 위치에 상관없이 일치하는 값이 있을 경우에 스타일을 적용함 2. 태그 [속성 *=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 키보드와 하루 1 [class *="j"] { background : red ; color : #fff ; } testjava 클래스를 사용한 요소 testscript 클래스를 사용한 요소 testjsp 클래스를 사용한 요소 결과 화면 코드 설명 [class *="...."] 앞에서 살펴본 속성 선택자를 본다고 하면 값이 일치하거나 앞에서 시작하거나 뒤에서 시작하는..

1. 개념 [속성 $=값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용 ^는 속성에서 시작하는 문자열을 찾아서 스타일을 적용했다면 $는 ^과는 반대로 끝나는 값이 일치하는 것을 찾아서 스타일을 적용함 2. 태그 [속성 $=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 키보드와 하루 1 [class $="pdf"] { font-size : 20px ; } 2 [class $="hwp"] { font-size : 30px ; } 3 [class $="xls"] { font-size : 40px ; } pdf에 적용하고 싶은 클래스 hwp에 적용하고 싶은 클래스 xls에 적..

1. 개념 [속성 ^=값] 선택자 - 특정 값으로 시작하는 속성에 스타일 적용 ^을 사용하게 되면 자신이 입력하기 시작한 값에 스타일을 적용함 2. 태그 [속성 ^=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 키보드와 하루 1 [class ^="a"] { background : red ; color : white ; } 2 [class ^="b"] { background : yellow ; } 3 [class ^="c"] { background : blue ; color : white ; } a로 시작하는 클래스 b로 시작하는 클래스 c로 시작하는 클래스 결과 ..

1. 개념 [속성 |=값] 선택자 - 특정 값(하이픈 포함)이 포함될 경우 스타일 적용 |을 사용한 속성 선택자는 ~를 사용한 속성 선택자와 같이 특정한 값이 포함되어 있을 경우에 스타일을 적용함 |과 ~를 사용했을 때 차이점이 있다고 하면 ~를 사용하면 포함된 단어에 하이픈이 있으면 스타일을 적용하지 않지만 |는 중간에 하이픈이 있어도 스타일을 적용하게 됨 즉 하이픈이 있는지와 없는지에 따라 스타일을 적용 여부가 차이가 있음 2. 태그 [속성 |=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 키보드와 하루 1 [class !="test"] { background : #000 ;..

1. 개념 [속성 ~=값] 선택자 - 특정 값이 포함될 경우 스타일 적용 태그에서 클래스 속성을 이용할 경우에는 한개가 아닌 여러개의 클래스를 붙일 수 있음 이러한 경우 특정한 값이 포함되어 있을 경우에 스타일을 적용하기 위해 물결(~) 표시를 사용하여 스타일을 적용할 수 있음 2. 태그 [속성 ~=값] 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 키보드와 하루 1 [class ~="link"] { background : blue ; color : white ; } test 클래스 속성 test , link 클래스 속성 test , link , button 클래스 속성 결과 화면 코드 설명 1 [class ~="link..

1. 개념 [속성 =값] 선택자 - 특정한 값을 지닌 속성에 스타일 적용 속성이 있는지에 대한 것보다 한단계 나아가 속성과 해당하는 속성의 값이 정확하게 일치하는 것에만 스타일을 적용하고자 할 경우에 사용 이때에도 스타일에 대괄호([ ]) 안에 속성과 속성 값을 넣고 사용하면 됨 2. 태그 [속성 =값] 선택자 html5 코드 123456789101112131415161718192021 키보드와 하루 1 a[target = "_blank"] { background : yellow ; } blank을 가진 target 속성 self을 가진 target 속성 첫번째 self을 가진 target 속성 두번째 결과 화면 코드 설명 1 a[taget="_blank"] 앞에서는 속성 선택자라고 해서 해당하는 속성이..

1. 개념 속성 선택자 - 지정한 속성에 스타일 적용 특정한 속성을 사용한 요소를 찾아 스타일을 적용하는 속성으로 스타일을 적용하고자 할 경우에는 스타일에서 대괄호([ ]) 안에 찾으려는 속성을 지정하여 사용 2. 태그 속성 선택자 html5 코드 123456789101112131415161718192021 키보드와 하루 1 a[href] { background : yellow ; } 첫번째 메뉴 두번째 메뉴 세번째 메뉴 결과 화면 코드 설명 1 a[href] 스타일을 적용할 때 아이디나 클래스 뿐만 아니라 태그를 가져와서 적용할 수도 있고 오늘에서 본 것처럼 태그 안에 있는 속성을 가지고 스타일을 적용할 수가 있습니다. 지금 보시는 것처럼 a 라는 태그로 메뉴를 3개 지정하였습니다. 다른 점이 있다면 ..

1. 개념 형제 선택자(~) - 지정한 모든 형제 요소에 스타일 적용 하나의 부모 요소에서 형과 동생으로 같은 레벨에 형제 요소를 이루게 될 때 +기호는 동생 요소 중 제일 처음으로 오는 요소에만 스타일이 적용이 되지만 ~ 기호를 사용하면 동생 요소에 오는 모든 요소에 스타일을 적용할 수 있음 2. 태그 형제 선택자(~) html5 코드 12345678910111213141516171819202122 키보드와 하루 1 h1 ~ div { color : red ; } 키보드와 하루(형제 선택자) 첫번째 div 요소 두번째 div 요소 세번째 div 요소 결과 화면 코드 설명 1 h1 ~ div + 기호를 사용해서 첫번째 요소와 나머지 요소를 연결할 경우에는 나머지 처음에만 스타일이 적용되는 것을 알 수 있..