CSS4 웹페이지에서 뭐든지 기울이기 skew(); 이해 안되는 분? 여기로 모여라! 안녕하세요 오늘은 애니메이션 속성 transform: skew(); 에 대해서 알아보겠습니다. 원래 이랬던 div 박스의 기울기를 바꿔 보겠습니다! .html transform: skewY(+15deg); .css .skewY15{ background-color:aquamarine; width: 150px; height: 150px; margin-top: 100px; margin-left: 100px; color: black; transform: rotateY(15deg); /* 기울기 관련 코드 */ } 기울기가 바뀌었습니다. (혹시 몰라서 색도 바꿈) 원래 div와 비교해 보면! 이렇게 Y축 + 15도 는 가로선 밑으로 내려가는 것을 알 수 있습니다. 그렇다면 - 15도는 어떻게 나올까요? html .. 2023. 4. 12. [HTML/CSS 간단 TIP] github에 올라와 있는 이미지 url로 내 웹사이트에 넣! 다운로드 (필요X) 결론! -> 원하는 이미지가 있는 github 페이지에 들어가기 -> raw 버튼 클릭 -> 나오는 이미지 화면 link 복사 -> -> 끝 원하는 이미지가 있는 github 페이지에 들어가기 Raw 위치 raw 버튼 클릭 나오는 이미지 화면 link 복사 완료! 추가 크기 조절하기 width="30" 추가하기 2023. 4. 5. [HTML/CSS 간단 TIP] 기본으로 띄어지는 body 여백 지우기(코드 적용 사진 있음) body 여백 지우기 CSS 파일에 코드 추가 HTML 파일에 코드 추가 적용 이전 적용 이후 2023. 4. 5. [HTML/CSS 간단 TIP] 가운데 정렬 시키기 css코드 내용을 가운데 정렬하고 싶으신 분들 잘 오셨습니다. 결과부터 말하자면 .class_name{ display:block; margin-left: auto; margin-right: auto; } 가운데 정렬 코드 3개를 css파일에 넣어주거나 style로 추가하시면 됩니다. 상세한 과정을 원하신다면 계속 읽으시면 됩니다 정렬이 잘 되는지 쉽게보기 위해서 이미지를 넣어보겠습니다 Jang go 안녕하세요 냉장고입니다. img 코드를 넣고 class이름은 center로 만들어 보겠습니다. 그냥 사진만 두면 허전하니까 이름을 h3태그로 추가하고, 인사말을 간단하게 넣어보겠습니다. 둘다 class가 필요합니다. 이름의 class를 name으로, 인사말의 class를 hello라고 만들어 보 겠습니다. 일.. 2023. 2. 23. 이전 1 다음 반응형
