세상과 연결

CSS3 그라디언트 그래디언트 방향을보다 잘 제어하려면 미리 정의 된 방향 (아래에서 위쪽, 오른쪽에서 왼쪽, 오른쪽 아래 등) 대신 각도를 정의 할 수 있습니다. 통사론background: linear-gradient(angle, color-stop1, color-stop2);각도는 수평선과 그라데이션 선 사이의 각도로 지정됩니다. 다음 예제는 선형 그래디언트에서 각도를 사용하는 방법을 보여줍니다.#grad { background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */ background: -..

CSS3 그라디언트 CSS3 그래디언트를 사용하면 둘 이상의 지정된 색상 간 부드러운 전환을 표시 할 수 있습니다. 이전에는 이러한 효과를 위해 이미지를 사용해야했습니다. 그러나 CSS3 그래디언트를 사용하면 다운로드 시간과 대역폭 사용을 줄일 수 있습니다. 그라디언트가 브라우저에서 생성되기 때문에 확대 / 축소하면 그라디언트가있는 요소가 더 잘 보입니다. CSS3는 두 가지 유형의 그라디언트를 정의합니다. 1. 선형 그라디언트 (아래 / 위 / 왼쪽 / 오른쪽 / 대각선으로 이동)2. 방사형 그라디언트 (중심에 정의 됨) CSS3 선형 그라디언트선형 그래디언트를 만들려면 적어도 두 개의 색상 정지 점을 정의해야합니다. 색상 멈춤은 자연스러운 장면 전환을 렌더링하려는 색상입니다. 그래디언트 효과와 함께 ..

CSS3 Colors CSS는 색상 이름, 16 진수 및 RGB 색상을 지원합니다. 또한 CSS3에서는 다음을 소개합니다. 1. RGBA 색상2. HSL 색상3. HSLA 색상4. 불투명 다음 예제에서는 서로 다른 RGBA 색상을 정의합니다. 예#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */ HSL 색상HSL은 색조, 채도 및 밝기를 나타냅니다. HSL 색상 값은 hsl (색조, 채도,..

CSS3 다중 배경CSS3를 사용하면 background-image속성을 통해 요소에 대한 여러 배경 이미지를 추가 할 수 있습니다 .서로 다른 배경 이미지는 쉼표로 구분되며 이미지는 서로 위에 겹쳐서 표시됩니다. 첫 번째 이미지는 뷰어에 가장 가깝습니다.다음 예제에는 두 개의 배경 이미지가 있습니다. 첫 번째 이미지는 꽃 (아래쪽 및 오른쪽으로 정렬 됨)이고 두 번째 이미지는 종이 배경 (왼쪽 위 모서리에 정렬 됨)입니다. #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } 개별 배경 속성..

CSS3 배경 크기CSS3 background-size속성을 사용하면 배경 이미지의 크기를 지정할 수 있습니다.CSS3 이전에는 배경 이미지의 크기가 이미지의 실제 크기였습니다. CSS3를 사용하면 다른 상황에서 배경 이미지를 재사용 할 수 있습니다.크기는 길이, 백분율 또는 두 키워드 중 하나를 사용하여 지정할 수 있습니다 : 포함 또는 표지.다음 예제는 픽셀을 사용하여 배경 이미지의 크기를 원본 이미지보다 훨씬 작게 조정합니다. #div1 { background: url(img_flower.jpg); background-size: 100px 80px; background-repeat: no-repeat; } 에 대한 다른 두 개의 값 background-size은 contain 및 cover입니다.c..

여러 배경 이미지의 크기 정의이 background-size속성은 여러 배경으로 작업 할 때 쉼표로 구분 된 목록을 사용하여 여러 배경 크기 값을 허용합니다.다음 예제에는 세 가지 배경 이미지가 있으며 각 이미지의 배경 크기 값이 다릅니다. #example1 { background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; background-size: 50px, 130px, auto; } Lorem Ipsum DolorLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum..

이미지 갤러리다음 이미지 갤러리는 CSS로 생성됩니다. 예 Add a description of the image here Add a description of the image here Add a description of the image here Add a description of the image here

기본 툴팁 사용자가 요소 위에서 마우스를 움직일 때 나타나는 툴팁을 생성하십시오 : 예 Hover over me Tooltip text

기본 드롭 다운사용자가 요소 위에서 마우스를 움직일 때 나타나는 드롭 다운 상자를 만듭니다. 예 Mouse over me Hello World!

수직 탐색 막대 예제배경색이 회색 인 기본 세로 탐색 막대를 만들고 사용자가 마우스를 움직일 때 링크의 배경색을 변경합니다.집뉴스접촉약예ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* Change the link color on hover */ li a:hover { background-color: #555; color: white; } 활성 / 현재 탐색 링크현재 링크에 "활성"클래스를 추가하여 사용자가 어떤 페이지에 있는지 알 수있게하십..