CSS44 요소 크기 위치 및 크기를 표현하는 속성 및 메서드 속성 및 메서드 설명 element.clientWidth 요소의 가로값(margin, border 미포함) element.clientHeight 요소의 세로값(margin, border 미포함) element.clientTop 요소의 Y축 값(부모 기준) element.clientLeft 요소의 X축 값(부모 기준) element.offsetWidth 요소의 가로값(border, padding 포함) element.offsetHeight 요소의 세로값(border, padding 포함) element.offsetTop 요소의 Y축 값(문서 기준) element.offsetLeft 요소의 X축 값(문서 기준) element.getBoundingClientRect().. 2022. 9. 1. 사이트유형 - 텍스트 유형 세 번째 사이트 유형 | 텍스트유형 텍스트 유형 은 카드 유형하고 비슷하지만 그안에 텍스트를 넣었습니다. 1.HTML 코드 코드 보기 텍스트 유형 각 유형의 특징을 알아보고, 골고루 사용해보자 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 우르르쾅쾅 곰 동물 자세히 보기 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 엄청 위험해요 그러니 도망가는.. 2022. 9. 1. 사이트유형 - 텍스트 유형 두 번째 사이트 유형 | 텍스트유형 텍스트 유형 은 카드 유형하고 비슷하지만 그안에 텍스트를 넣었습니다. 1.HTML 코드 코드 보기 Animal 귀여운 동물들 설명 여러분은 귀여운 동물들의 설명을 지금 이기회에 볼 수있습니다 여러분 어서 빨리 보세요! 우르르쾅쾅 곰 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 빛보다 빠른 치타 치타는 너무 빨라서 자동차를 이겨요 그러니 치타하고 달리기 할 생각은 하면안되는게 좋아요 의자왕 사자 사자는 여자친구가 많아서 부러워요 그냥 많이 부럽워서 저는 울지않아요 사자는 의자왕 이에요 귀여운 고양이 고양이는 귀여우니 무슨짓을해도 귀여워요 그러니 고양이는 최강입니다. 이제 뭘쓸지 너무 힘드네요. 더보기 2.CSS 코드 코드 보기.. 2022. 9. 1. 사이트유형 - 텍스트 유형 첫 번째 사이트 유형 | 텍스트유형 텍스트 유형 은 카드 유형하고 비슷하지만 그안에 텍스트를 넣었습니다. 1.HTML 코드 코드 보기 텍스트 유형01 세상에서 제일 귀여운 동물들 우르르쾅쾅 곰 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 더보기 빛보다 빠른 치타 치타는 너무 빨라서 자동차를 이겨요 그러니 치타하고 달리기 할 생각은 하면안되는게 좋아요 더보기 의자왕 사자 사자는 여자친구가 많아서 부러워요 그냥 많이 부럽워서 저는 울지않아요 사자는 의자왕 이에요 더보기 귀여운 고양이 고양이는 귀여우니 무슨짓을해도 귀여워요 그러니 고양이는 최강입니다. 이제 뭘쓸지 너무 힘드네요. 더보기 인간의친구 강아지 강아지는 인간의 친구에요 저는 인간의 친구인 강아지는 너무 좋.. 2022. 8. 30. 요소숨기기 요소를 숨기는 법 요소를 숨기는 법은 총 다섯가지가 있습니다. 한번 살펴봅시다. 01. display를 사용하는 방법 요소가 있는 블럭을 건드리는 방법입니다. 영역을 없애버리면서 애니메이션도 쓸 수 없게 만듭니다. .원하는 영역 { display : none; } 02. opacity 사용하는 방법 투명도를 조절하는 방법 입니다. 영역도 살릴 수 있고 애니메이션도 사용할 수 있습니다. .원하는 영역 { opacity : 0; } // 투명도를 0으로 만듬 03. visibility 사용하는 방법 레이아웃을 변경하지 않고 요소를 보이거나 숨기는 방법입니다. 영역을 없애버리면서 애니메이션도 쓸 수 없게 만듭니다. .원하는 영역 { visibility : hidden; } //숨긴다 04. whidth와 he.. 2022. 8. 29. 움직이는 애니메이션2 애니메이션2 원 두개가 회전하는 애니메이션을 구현했습니다. HTML코드 css코드 body { overflow: hidden; height: 100vh; background-image: linear-gradient(-60deg, #FF5858 0%, #f09880 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: load 1s ease 100; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } .loading .circle2 { display.. 2022. 8. 29. 이전 1 2 3 4 5 6 ··· 8 다음 728x90 반응형
