키보드와 하루

1. 개념 skew 함수 - 요소 비틀어서 왜곡시키기 skew 함수는 2차원에서만 사용이 가능하며 해당하는 요소를 정해준 각도만큼 비틀어서 왜곡함 방향은 양쪽이나 한쪽으로 비틀 수 있음 2. 태그 skew html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 키보드와 하루 1 2 3 코드 설명 1 transform : skewX(30deg) skew는 2차원에서만 변형이 가능한 함수 입니다. 그래서 3차원에서는 이 변형 함수는 사용할 수가 없습니다. skew는 해당하는 요소를 비틀어 왜곡을 할 때 사용합니다. 자신이 원하는 만큼의 각도로 비틀고 왜곡하고자 할 때 각도를 입력하게 되고 양의 값을 입력한 각도와 음의 값을 입력한 각도에 따라서 ..

1. 개념 rotate 함수 - 요소 회전시키기 rotate은 2차원이나 3차원에서 웹 요소를 시계 방향이나 반 시계방향으로 회전시킴 이 함수는 2차원,3차원에서 모두 rotate 함수로 사용이 가능하고 추가적으로 3차원에서는 rotate3d , rotateX , rotateY , rotateZ 함수도 사용가능 rotate 함수는 각도(deg)나 레디안 값을 사용 1레디안 = 180도 / π(파이) 2. 태그 rotate 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 키보드와 하루 1 2 3 코드 설명 1 transform : rorate(30deg) 위에서 보면 2차원에 해당하는 요소를 시계방향으로 회전시..

1. 개념 scale 함수 - 해당요소 확대,축소 scale은 지정한 크기 만큼 요소를 확대하거나 축소시킴 지정한 크기가 1보다 작으면 원래 이미지 보다 축소되고 1보다 크면 원래 이미지 보다 확대됨 scaleX , scaleY , scaleZ , scale , scale3d 와 같은 함수가 있음 2. 태그 scale 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 키보드와 하루 div { display : inline-block ; } 1 2 3 4 코드 설명 1 transform : scaleX(0.5) scaleX는 해당하는 요소를 지정한 크기 만큼 x축으로 확대하거나 축..

1. 개념 translate 변형 함수 - 해당하는 요소 이동 translate는 변형 함수로써 2차원 , 3차원에서 x축 , y축 , z축으로 요소를 이동시키고자 할 경우에 사용 2. 태그 translate 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 키보드와 하루 img { width : 150px ; } 1 2 3 코드 설명 1 transform : translateX(20px) translateX는 해당하는 요소를 지정한 크기만큼 x축 방향으로 이동시킵니다. 위에서 보시는 것처럼 해당하는 그림이 x축으로 30px만큼 이동해 있음을 알 수 있습니다. 이 애니메이션 효과는 보통에 마우스를 올..

1. 개념 가상 요소 - ::before , ::after ::before나 ::after를 사용하면 내용의 앞이나 뒤에 텍스트나 이미지를 추가할 수가 있음 2. 태그 ::before , ::after 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 .sel_before::before { content : "앞에서 표시!" ; color : red ; font-weight : bold ; } 2 .sel_after::after { content : "뒤에서 표시!" ; color : blue ; font-weight : bold ; } 1번 div 2번 div 3번 di..

1. 개념 가상 요소 - ::first-line , ::first-letter 가상 요소는 내용 중에서 일부만 찾아서 스타일을 적용하고자 할 경우에 사용 ::first-line은 첫 번째 줄에 스타일을 적용하는 것이고 , :: first-letter는 첫번째 글자에 스타일을 적용 2. 태그 ::first-line , ::first-letter 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 p::first-line { background : blue ; color : #fff ; } 2 p:first-letter { background : red ; } 첫번째..

1. 개념 구조 가상 클래스 - :nth-child(n) , :nth-last-child(n) 하나의 부모 요소를 두고 여러 개의 항목이 나열되어 있을 때 , class나 id 등과 같은 것을 사용하지 않고 몇 번째에 위치하였는지를 보고 스타일을 적용할 때 사용 2. 태그 :nth-child(n) , :nth-last-child(n) 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 43 44 45 키보드와 하루 1 td:nth-child(2) { background : red ; color : #fff ; } 2 td:nth-la..

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 *="...."] 앞에서 살펴본 속성 선택자를 본다고 하면 값이 일치하거나 앞에서 시작하거나 뒤에서 시작하는..