css 썸네일형 리스트형 CSS 지원 브라우저 확인 코딩하다보면 가끔 이 CSS가 어디까지 적용되는지 헷갈릴때가 있습니다. 자주 쓰는거야 기억하지만 상대방이 물어볼때 다 아는것처럼 물어보기 때문에 우리는 수시로 찾아볼수 있어야 합니다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 그래서 전 여기를 자주 씁니다. 팩트체크하기 좋은 곳입니다. 디자인은 다소 구릴지 몰라도 한눈에 기똥차게 보여줍니다. 더보기 [html11]배경 이미지 사용하는 방법 오늘은 배경 사용방법에 대해서 배워볼게요.먼저 div 가 있어야겠죠? p태그도 상관없고, 블록형태의 태그면 됩니다. 저는 저번에 이어서 11번 폴더를 만들었고, 마찬가지로 html을 만들었습니다.이제 설명 안해도 이 부분은 아시겠죠?box라는 div를 만들어줬습니다. 크기를 먼저 설정해줘야겠죠?저번과 마찬가지로 클래스 형태로 스타일을 주겠습니다. 이제 배경을 설정할 차례입니다. background 라고 써주면 됩니다. 아주 간단하게 만들어졌죠? 이미지로도 적용할 수 있습니다.미리 저장해둔 이 이미지를 써보겠습니다. 적용은 됐는데 이미지가 너무 커서 보이질 않네요.사이즈를 키웠더니 보이네요. 사실 앞에 red는 지워도 되긴 합니다. 어떤 형태로 된거냐하면 bg로 빨간색을 깔고, 위에 이미지를 덧입힌 겁니다.. 더보기 [html10]반복작업을 줄여주는 class 활용하기 안녕하세요. 저번시간에 실전코딩을 통해 얻으신게 좀 있나요?ㅎ 저번 실습 통해서 배너 만들때 텍스트 크기, 간격 등 약간만 변경하면 좀 더 그럴싸한 코딩이 완성된다는건 느끼셨을거예요.하지만 손이 굉장히 바쁘시고 힘드셨을거예요. 매번 글을 쓸때마다 font-family 정하고 size 입력하고 간격입력하고 그래야하나 결론부터 미리 말씀 드리면 아니예요.코딩은 생각보단 불편하면서도 편리한기능도 들어있어요. 오늘 강좌에서는 반복작업을 줄여줄 방법을 소개하려고해요. CSS 클래스 만들기 1.글자 일괄변경하기 저번코딩을 한번 봐볼까요? h2에서 썼던 비슷한 내용이 p태그에서도 쓰이고 있어요. 하지만 모두 개별적으로 쓰이고 있죠.이걸 하나로 묶어줄수가 있어요. 예제를 한번 만들어볼게요.폴더를 생성해줘야겠죠? 10번.. 더보기 [css]keyframe 애니메이션 활기차게 움직여보고 싶어? 코딩하다보면 정적인 것보다 움직이는게 더 보기 좋더라구요. 역시 기술이 있다면 쳐발라야합니다. 오늘 알려드릴 방법은 애니메이션 사용법인데요. 예제 보시고 잘 따라해보세요. 아주 쉽게 만들었습니다. html 사실 여기서 중요한 내용은 없고 div.box 하나 만들어준거네요. css 이제 css도 적용해보겠습니다. .box{ width:100px; height:100px; background: red; position: relative; -webkit-animation: boxmove 3s infinite; /* Safari 4.0 - 8.0 */ animation: boxmove 3s infinite; } /* 애니메이션 제작 */ @-webkit-keyframes boxmove.. 더보기 이전 1 다음
