HTML, CSS
-
(73)CSS_css우선순위HTML, CSS 2023. 4. 5. 16:12
우선순위 예제 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> css 우선순위 #id-style{ background-color: deeppink; } #id-style2{ background-color: deepskyblue; } div{ display: block; padding: 30px;..
-
(72)CSS_animation 2HTML, CSS 2023. 4. 5. 16:11
animation 2번째 예제 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> animation2 Clock Hourglass Loader 1 loader 2 loader 3 loader 4 loader 5 loader 6 loader 7 loader 8 loader 9 loader 10 외부 ..
-
(71)CSS_animation1HTML, CSS 2023. 4. 5. 16:09
animation 1번째 예제 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> animation .box{ margin-top: 100px; margin-left: 100px; padding: 20px; height: 60px; animation-name: moving; animation-dur..
-
(70)CSS_transition2HTML, CSS 2023. 4. 4. 15:45
transition 2번째 예제 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> transition2 h2{ text-align: center; } #ex{ position: relative; width: 800px; height: 400px; margin: 0 auto; border: 5px ..
-
(69)CSS_transition1HTML, CSS 2023. 4. 4. 15:40
transition 1번째 예제 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> transition div{ width: 100px; height: 100px; float: left; margin: 30px; } #bg-tr{ background-color: gold; transition: ba..
-
(68)CSS_transfromHTML, CSS 2023. 4. 4. 15:39
transfrom 예제 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> transfrom p{ width: 600px; padding: 20px; border: 3px solid rgba(0, 0, 0, 0.5); } #translate{ transform: translate(30px, 50px..
-
(67)CSS_동적인 카페 소개 페이지 만들기HTML, CSS 2023. 4. 4. 15:37
동적인 카페 소개 페이지 만들기 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> 카페 소개 카페소개 오시는 길 이달의 추천 카페 소개 영업 시간: 오전 9시 ~ 밤 10시 휴무: 매주 수요일 (수요일이 공휴일인 경우 수요일 영업, 다음날 휴무) 오시는길 서귀포시 안덕면 사계리 000-000 제주..
-
(66)CSS_기본문법HTML, CSS 2023. 4. 4. 15:34
trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실 을 알리기 위해 사용하는 접두사 W3C CSS 권고한에 포함되지 않는 기능이나, 포함되어 있지만 아직 완벽하게 재정된 상태가 아닌 기능을 사용할 때 붙임 -webkit- : 크롬, 엣지를 위한 접두사 -0- : 오페라를 위한 접두사 -ms- : 익스플로러를 위한 접두사 -moz- : 파이어폭스를 위한 접두사 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가..