scaleX(x) 메서드는 x축을 사용하여 요소를 스케일 변환하는 데 사용됩니다. 구문을 보자 - scaleX(x) 여기서 x는 요소의 각 점의 가로축에 적용할 scaling factor를 나타내는 숫자이다. 예를 들어 보겠습니다 - div { width: 60px; height: 60px; background-color: yellow; } .scaled { transform: scaleX(0.5); backgr
scaleZ(z) 메서드는 Z축을 사용하여 요소를 스케일 변환하는 데 사용됩니다. 구문을 보자 - scaleZ(z) 여기서 z는 요소의 각 점의 z좌표에 적용할 scaling factor를 나타내는 숫자이다. 예를 들어 보겠습니다 - div { width: 60px; height: 60px; background-color: black; } .perspective { transform: perspective(200px) translate
border-image-width 속성은 테두리 이미지 너비를 설정하는 데 사용됩니다. 다음 코드를 실행하여 border-image-width를 구현할 수 있습니다. 속성 - 예시 <html> <head> <style> #borderimg1 { border: 15px solid transparent; &nb
CSS3 크기 조정 속성에는 아래와 같이 세 가지 공통 값이 있습니다. - 가로 세로 둘 다 예시 CSS3 사용자 인터페이스에서 크기 조정 속성의 두 값 모두 사용: <html> <head> <style> div { border: 2px solid; &
외곽선은 테두리 외부에 있는 요소 주위에 선을 그리는 것을 의미합니다. 예시 다음 코드를 실행하여 CSS3 구현을 시도할 수 있습니다. 개요 오프셋 속성 - <html> <head> <style> div { margin: 20px; &nbs
CSS2 sizing 속성과 CSS3 box-sizing 속성의 차이점을 알아봅시다. CSS2 크기 조정 속성 <html> <head> <style> .div1 { width: 200px; height: 100px; &n
Box-sizing 속성은 요소의 높이와 너비를 변경하는 데 사용됩니다. CSS2 이후로 box 속성은 아래와 같이 작동했습니다 - width + padding + border = actual visible/rendered width of an element's box height + padding + border = actual visible/rendered height of an element's box 예시 box-sizing 속성을 이해하기 위해 예를 살펴보겠습니다: <html> &nb
미디어 쿼리는 모바일, 데스크톱 등과 같은 다양한 크기의 기기에 대한 다양한 스타일 규칙에 대한 것입니다. CSS3로 미디어 쿼리를 구현하기 위해 다음 코드를 실행할 수 있습니다 - 예시 <html> <head> <style> body { background-color: lightpink; } @media screen and (max-width: 420px) { body {
반응형 웹 디자인은 데스크탑, 모바일 및 탭과 같은 다양한 장치에서 최소한의 크기 조정으로 최적의 경험, 쉬운 읽기 및 쉬운 탐색을 제공합니다. 반응형 웹 디자인이 무엇인지 살펴보겠습니다.
다양한 CSS 스타일 규칙에 대한 미디어 쿼리를 설정하려면 다음 코드를 실행해 보세요. 예시 <html> <head> <style> body { background-color: lightpink; } &nb
CSS3는 글꼴 조합 기술을 채택했습니다. 여기에서 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도합니다. Sans-Serif 글꼴의 예를 살펴보겠습니다. −
CSS에는 너비, 여백, 패딩, 글꼴 크기, 테두리 너비 등과 같은 다양한 단위에 대한 여러 단위가 있습니다. 길이는 px와 같은 길이 단위 다음에 오는 숫자 값을 사용하여 나타냅니다. , dp, em 등. 숫자와 길이 단위 사이에 공백을 허용하지 않습니다. 길이 단위는 다음과 같이 나뉩니다. 상대 단위 절대 절대 단위 단위 약어 픽셀 픽셀 포인트 Pt 인치 안 센티미터 cm 피카스 PC 상대 단위 상대 단위에서는 길이 값이 고정되어 요소의 정확한 크기로 나타납니다.
상대 단위에서는 길이 값이 고정되어 요소의 정확한 크기로 나타납니다. 단위를 보자: 단위 약어 퍼센트 % 엠 전각 예시 예시 루트 엠 렘 표시 영역 너비 폭스바겐 표시 영역 너비 Vh 표시 영역 너비 Vm 문자 채널 그리드 하나님
스윙 애니메이션 효과는 정지된 상태에서 또는 축에서 요소에 대해 앞뒤로 또는 좌우로 움직이거나 이동하도록 합니다. 예시 <html> <head> <style> .animated { background-image: url(/css/images/logo.png);
이 요소를 사용하여 선택기에서 텍스트의 첫 글자에 특별한 스타일을 추가합니다. 다음 예는 문서에 있는 요소의 첫 글자에 특수 효과를 추가하기 위해 :first-letter 요소를 사용하는 방법을 보여줍니다. 예시 <html> <head> <style> p:first-letter { font-size: 5em
CSS로 Tada 애니메이션 효과를 만들려면 다음 코드를 실행해 보세요. 예시 <html> <head> <style> .animated { background-image: url(/css/images/logo.png); backgro
CSS border-image 속성은 일부 요소에 이미지 테두리를 추가하는 데 사용됩니다. 다음 코드를 실행하여 border-image 속성을 구현할 수 있습니다. - 예시 <html> <head> <style> #borderimg1 { border: 15px solid transparent;
CSS border-image 속성은 일부 요소에 이미지 테두리를 추가하는 데 사용됩니다. 다음 코드를 실행하여 이미지를 요소의 테두리로 설정할 수 있습니다. 예시 <html> <head> <style> #borderimg1 { border: 10px solid transparent;
border-image-source 속성은 CSS에서 이미지 경로를 설정하는 데 사용됩니다. 다음 코드를 실행하여 이미지 경로를 설정할 수 있습니다 - 예시 <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/css
border-image-slice 속성은 CSS로 테두리 이미지를 슬라이스하는 데 사용됩니다. 다음 코드를 실행하여 border-image-slice를 구현할 수 있습니다. 속성: 예시 <html> <head> <style> #borderimg1 { border: 15px solid transparent;