"SStarP"님의 바톤을 이어받어....
전 "CSS"를..... Script는 남은 한분이....
CSS는 Cascading Style Sheets의 줄임말이고, HTML문서의 전체적인 꾸밈에 대해 관여하는 언어입니다.
텍스트가 날라온다든지.... 아니면 예제 보여드린것처럼 이미지를 둥둥 띄울수 있다던지... 말이죠....
SStarP님의 표(테이블)도 CSS로 꾸밀수 있습니다.
인터넷에 보면 관련예제들이 많이 있고.... 저도 그 중에 하나를 쓴지라 ^^;;
이해가 쉽게 될정도로 간단간단하게 설명들어가도록 하겠습니다.
기본적으로 CSS의 사용방식은 아래와 같습니다.
라는 곳에서 시작하여 이라는곳에서 끝나게 됩니다.
사진에도 써있겠지만 해석해본다면.....
"나는 여기서부터 CSS를 시작하겠으니 구분해달라...." 라는 뜻으로 사용하는거니까 이를 선언해주지 않으면 적용이 되질 않습니다.
.Contents {} 안에 명령어를 써넣음으로써 어떠한 효과를 어느정도 주겠다라고 명령을 내리는거죠.
font-family / font-size / color 자리에 아래에 있는 명령어를 넣고 ":(콜론)"으로 구분해준다음 어느정도 줄지 써넣으시면 됩니다.
주로 사용하는 관련 명령어는 다음과 같아요.
- font-family = 어떤 폰트를 사용해서 꾸밀지 정해주는 명령어예요. 주로 font-family: "맑은 고딕"; 이런형식으로 사용하게 됩니다.
- font-size = 위에서 명시해준 폰트의 크기를 어느정도로 정할지 정해주는거예요.
단위는 pt(포인트) / px(픽셀) 등이 있고 font-size: "12pt"; 이런형식으로 사용하게 됩니다.
- color = 어떤색으로 표현해줄거냐를 정해주는거예요. #을 포함한 숫자와 영문 6자리(ex. #FF00FF) 또는 영문으로 된 색깔명(ex. orange / white / blue)로 입력해주시면 되요. color: "orange"; 또는 color: "#FFFFFF"; 형식으로 사용하게됩니다.
- 이 외에도 background-image를 사용해 텍스트 뒤에 이미지를 넣을수도 있고, background-color를 이용해 색깔을 넣을수도 있습니다.
알면 확실히 여기서의 쓰임새는 많을겁니다..... 필요하시면 나중에 설명드리기로 하고....
대충 소스코드를 보게된다면......
이런식인데;;;
이걸 설명하기엔 너무 복잡해요 ㅠㅠㅠㅠㅠ
그래서....
엄~~~청 간단한 방법으로....
사이트에서 원하는 효과의 소스를 복사해오는 방법이 있습니다.
불법은 아니고 사용자들이 제작한 CSS를 공유한다.... 라고 생각하시면 됩니다.
http://ianlunn.github.io/Hover/#
위의 사이트를 들어가보시면 여러가지 CSS효과들이 있습니다.
마우스의 커서를 올려보시고....
원하시는 효과의 이름을 기억하시고... 효과의 이름은 버튼에 그대로 써져있습니다.
아래의 사진과 같이말이죠.....
그 다음 https://github.com/IanLunn/Hover/blob/master/css/hover.css에 접속.
Ctrl + F를 누르시고 아까 기억하신 효과의 이름을 검색합니다.
저 같은경우엔 위의 사진같이 "Skew Backward"를 검색하는거죠...
그럼 "/* Skew Backward */" 라는 형식으로 검색이 됩니다.
그 아래부터 긁어서 마찬가지로 /* 효과명 */ 이 나오기 바로전까지 Ctrl + C 하신 후...
아~~~까 선언한
(IP보기클릭).***.***
(IP보기클릭).***.***
(IP보기클릭).***.***
(IP보기클릭).***.***
(IP보기클릭).***.***
(IP보기클릭).***.***