키보드와 하루

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 + 기호를 사용해서 첫번째 요소와 나머지 요소를 연결할 경우에는 나머지 처음에만 스타일이 적용되는 것을 알 수 있..

1. 개념 인접 형제 선택자(+) - 제일 가까운 요소에 스타일 적용 하나의 부모 요소 아래에 같은 레벨을 형성하는 태그가 있을 경우에는 형제 관계가 성립이 됨 처음에 나오는 요소는 형 , 나중에 나오는 요소는 동생의 관계를 맺게 되는데 + 기호를 사용해서 동생 요소 중 맨 처음으로 오는 요소에만 스타일을 적용할 수 있음 2. 태그 인접 형제 선택자(+) html5 코드 1234567891011121314151617181920212223 키보드와 하루 1 h1 + div { color : blue ; font-weight : bold ; } 키보드와 하루 첫번째 div 속성 두번째 div 속성 세번째 div 속성 결과 화면 코드 설명 1 h1 + div test1이라는 id를 가진 section 아래에 ..

1. 개념 하위 선택자와 자식 선택자 하위 선택자는 스타일을 적용하고자 할 때 부모에게 포함된 모든 요소에 스타일을 적용하는 것이고 자식 선택자는 부모에게 포함된 모든 요소에게 적용되는 것이 아니라 자식요소에만 스타일이 적용됨 2. 태그 하위 선택자와 자식 선택자 html5 코드 123456789101112131415161718192021222324252627282930313233 키보드와 하루 1 #test1 div { border : 1px solid #000 ; } 2 #test2 > div { border : 1px solid #000 ; } 키보드와 하루 div 태그에 있는 키보드와 하루 키보드와 하루 div 태그에 있는 키보드와 하루 결과 화면 코드 설명 1 #test1 div 두개의 div를..

1. 개념 vertical-align - 셀 안에서 수직 정렬 vertical-align 표에서 내용을 입력했을 때 width가 지정된 상태에서 콘텐츠 내용이 길어질 때 셀 안에 있는 내용에 따라 너비를 변하게 할지 , 고정시킬 것인지를 정해주는 속성 속성 설명 baseline 셀의 기준선에 내용에 해당하는 기준선을 맞춤 top 셀의 위쪽 가장자리에 내용 윗부분을 맞춤 middle 셀의 중앙에 내용을 맞춤 bottom 셀의 아래쪽 가장자리에 내용 아랫부분을 맞춤 2. 태그 vertical-align html5 코드 12345678910111213141516171819202122232425262728293031323334353637 키보드와 하루 td { border : 1px solid #000 ; wi..