Web/CSS19 CSS_Font Awesome 오늘은 CSS의 마지막이 될것 같아요! CSS에서 Font Awosome이라는 것에 대해서 알아볼텐데요. Font Aweome 이란? http://fontawesome.io/ 여기 페이지에서 확인하시면 됩니다. 원리는 음.... 뭐랄까... 다른 홈페이지에서 정해놓은(?) 만들어놓은 아이콘을 가져다가 쓰는것을 의미하는데요 사용법이랑 코딩하는 방법을 알아보도록 하겠습니다!ㅎㅎ 먼저 홈페이지에 들어가보면 이렇게 나오게 되구요 제가 저기 위에 빨간색으로 네모칸 쳐 놓은 곳에 Icons 라고 되어있는것을 클릭하면 사용하고자 하는 아이콘들이 많이 나오게 됩니다. Icons를 클릭하게되면 여러개의 아이콘이 나오게 되는데요... 사용하고자 하는 아이콘에 마우스를 올리면(hover 하게되면^^) 저렇게 초록색으로 표시.. 2017. 3. 28. CSS_link&import 오늘은 link 태그 와 import에 대해서 알아볼게요! link태그는 중복되는 부분을 따로 빼놓았다가 가져올때 쓰는건데요... 우선 이렇게 Style sheet를 빼서 따로 파일을 하나 만들어 저장합니다. 그러고 난 후 두개의 파일에서 똑같이 h1태그를 같은 속성을 갖게 하려면 이런식으로 하시면 됩니다. 결과화면은 Page1 과 Page2 가 모두 빨간색으로 나오게 되겠죠? 2017. 3. 27. CSS_Transition 심화 이번에 포스팅할것은 transition 심화인데요... 여기엔 JavaScript가 좀 들어가있어서요... 코딩부분만 올려드리고 JavaScript를 하고 설명하는걸로 할게요! 이렇게 코딩을하게되면 결과화면은 전체화면이 검정색이었다가 점점 background색깔이 흰색으로 바뀌게 되는 화면을 보시게 될것입니다! 2017. 3. 27. CSS_Transition 오늘은 CSS에서 Transition이라는 것에 대해서 알아볼게요. 음.... Transition은 장면 전환을 할때 쓰는거에요. 그래서 애니매이션효과(?)를 나타낼 수 있어요~!!ㅎㅎ 그럼 코딩을 해보도록 할게요. 보시는 바와 같이 코딩을 했는데요... 하나하나 보도록 하겠습니다. 먼저 Style 태그 안을 보도록 하겠습니다. 먼저 a태그에 대해서 속성들을 적용 시켰는데요 먼저 font-size 글자 크기는 3rem으로, display 는 inline-block으로, transition-property : all 이것은 모든 것들에 대해서 변화를 주겠다는 것을 의미하고요, transition-duration : 0.1s 는 0.1초동안 변화를 주겠다는것을 의미해요. 그리고 a : active는 클릭했을.. 2017. 3. 27. 이전 1 2 3 4 5 다음
