[CSS] KEYFRAME 애니메이션 기초

CSS로 애니메이션 효과를 넣어보자 기본적인건 색바꾸기 HTML 작성 안녕하세요 여러분. CSS .text1 h1{ font-size: 15px; animation : slide 5s ease-out; position: relative; animation-name: colorChangeAdvanced; animation-duration: 5s ease-out; } @keyframes colorChangeAdvanced { 0% {color: #0dcaf0;} 25% {color: #3cb3ff;} 50% {color: #4e69ff;} 100% {color: #0a53be;} } 이번엔 왼쪽에서 날아오게 해보자 .text1 h1{ font-size: 15px; animation : slide 5s eas..

• format_list_bulleted 교육/HTML+CSS
• · 2023. 1. 12.
• textsms

[CSS] CSS가 뭐지?

CSS에 대해서 알아보자 CSS는 Cascading Style Sheets의 약자로 문서를 꾸며주기 위한 시트를 이야기 한다 주로 HTML이나 PHP와 같은 WEB언어에서 많이 사용된다. 그 외에도 SVG 또는 XML, 등에서도 사용된다. CSS는 순차적인 개발을 거치며 CSS1, CSS2.1..그리고 현재의 CSS3이 되었다. CSS는 문서의 내부에 내장할 수도 있고 별도의 파일에서 호출하여 사용이 가능하다. CLASS와 ID로 구분하여 꾸며줄 수 있으며 동일 속성이 주어진다면 CLASS보다는 ID가 우선적으로 적용된다. ID와 CLASS의 차이점은 ID는 동일 속성을 복수 사용이 불가능하다. 하지만 CLASS는 복수 지정이 가능하다. 예를들어 내가 2개의 DIV와 같은 OBJECT를 생성하였고 1개의..

• format_list_bulleted 교육/HTML+CSS
• · 2022. 12. 4.
• textsms

[CSS] CALC

CSS 스타일 시트에서 간단한 계산이 필요할때 사용한다. EX 1) WIDTH : CALC(100% /3); EX 2) WIDTH : CALC(100% -10px);

• format_list_bulleted 교육/HTML+CSS
• · 2022. 11. 22.
• textsms

[HTML/CSS] 슬라이딩 애니메이션 : KEYFRAMES

유투브에서 그냥 긁어왔다............개인이 긁어온거라 괜찮을꺼라 생각된다..

• format_list_bulleted 교육/HTML+CSS
• · 2022. 11. 14.
• textsms

[HTML/CSS] 버튼에 HOVER 속성을 이용하여 에니메이션을 넣어보자

html 온라인 판매처 NAVER 11ST AUCTION COUPANG G MARKET css .bt, .bt a{ text-decoration: none; width: 100%; height: auto; padding-top : 1%; padding-bottom: 1%; position: relative; display: block; outline: #333 solid 4px; font-size: 0.7em; color: #fff; background-color:#000;; border: 4px solid # #C1C1C1; font-weight: normal;; } .bt:hover{color: #000; -webkit-transition: all .7s ease; -moz-transition: al..

• format_list_bulleted 교육/HTML+CSS
• · 2022. 10. 31.
• textsms

[CSS] CSS로 동그라미를 그려보자.

이미지없이 css만으로 동그라미를 만들어 보자 먼저 출력할 곳을 만들어 준다 그리고 색상이 표현될 수 있는 가로와 세로가 동일한 기본 속성을 입력하고 거기에 border-radius: 50%; 를 추가한다 css 속성은 그럼 이렇게 된다 .test{ width: 50px; height: 50px; position: relative; display : block; background-color: brown; border-radius: 50%; } 이걸 html 화면에 다 합쳐서 적어 보면 요래 된다

• format_list_bulleted 교육/HTML+CSS
• · 2022. 10. 14.
• textsms

[CSS] 높이 100%

CSS에서 가로를 100% 속성을 넣어줄떄는 해당 id 또는 클래스에 width: 100%; 위 속성을 입력해주면 된다. 하지만 가로 속성 height : 100%; 이건 지원되지 않는다. 이 속성을 사용하기 위해서는 정확한 픽셀(px) 단위를 입력해주거나 스크립트 또는 계산 속성을 이용하여 입력해주어야 한다. 그래서 text 또는 이미지가 없는 div에 100%속성을 넣어주기 위해서는 아래와 같이 사용한다. padding-bottom : 100%; 이렇게 사용하면 세로크기는 유동적으로 지정이 되는것은 확인이 되지만 뭔가 이상할 것이다. 그렇다. width의 크기를 기준으로 100%가 설정되었다. 그럼 내가 원하는 100% 크기를 설정하려면 어떻게 입력해야 할까? 방법은 여러가지 있지만 스크립트 없이 많..

• format_list_bulleted 교육/HTML+CSS
• · 2022. 10. 12.
• textsms

[HTML] smooth-scroll

이동버튼1 이동버튼2 이동버튼3 이동 버튼4 이동 버튼5 내용1 내용2 내용3 내용4 내용5 이렇게 만 입력하면 클릭시 툭툭 끊기는 느낌으로 대상 id가 있는 위치로 이동한다. ....역시 보기 싫다... 이럴떈 아래의 코드를 추가해주도록 한다. 사용된 js 스크립트는 검색하면 쉽게 찾을수 있다. 다운받아서 쓰거나 링크해서 쓰면 된다. 대리점 모집 안내 Business partner 이동버튼1 이동버튼2 이동버튼3 이동 버튼4 이동 버튼5 내용1 내용2 내용3 내용4 내용5 이렇게 적용하면 스크롤이 드래그 하는거처럼 부드럽게 이동한다. https://www.w3schools.com/cssref/pr_scroll-behavior.asp CSS scroll-behavior property W3Schools ..

• format_list_bulleted 교육/HTML+CSS
• · 2022. 10. 12.
• textsms

[HTML/CSS] div 또는 a 속성의 버튼을 편하게 나열해 보자 (grid-template-columns)

1 2 3 4 5 6 7 8 9 10

• format_list_bulleted 교육/HTML+CSS
• · 2022. 10. 11.
• textsms

[HTML] 테이블 기초

1 2 3 4 출력: 12 34 배경 속성과 테두리 속성 그리고 병합 속성을 넣어보면 1 2 3 4

• format_list_bulleted 교육/HTML+CSS
• · 2022. 10. 11.
• textsms