다음은 일반적으로 사용되는 의사 클래스 중 일부입니다. 값 설명 :링크 이 클래스를 사용하여 방문하지 않은 링크에 특별한 스타일을 추가합니다. :방문 이 클래스를 사용하여 방문한 링크에 특별한 스타일을 추가합니다. :호버 이 클래스를 사용하여 요소 위에 마우스를 올렸을 때 요소에 특별한 스타일을 추가합니다. :활성 이 클래스를 사용하여 활성 요소에 특별한 스타일을 추가합니다. :포커스 요소에 포커스가 있는 동안 요소에 특별한 스타일을 추가하려면 이 클래스를 사용하십시오. :첫
:첫 번째 자식 사용 다른 요소의 첫 번째 자식인 요소에 특수 스타일을 추가하는 의사 클래스입니다. 예시 :first-child 의사 클래스의 사용법을 이해하기 위해 다음 코드를 실행할 수 있습니다. − <html> <head> <style> div > p:first-child {
:lang 의사 클래스를 사용하여 지정된 요소에서 사용할 언어를 지정합니다. 이 클래스는 특정 언어 구성에 대해 서로 다른 규칙을 사용하는 여러 언어에 호소해야 하는 문서에 유용합니다. 예시 다음 코드를 실행하여 :lang 의사 클래스의 사용법을 이해할 수 있습니다. <html> <head> <style> /* Two levels of quotes for two languages*
가시성이라는 속성 보기에서 요소를 숨길 수 있습니다. JavaScript와 함께 이 속성을 사용하여 매우 복잡한 메뉴와 매우 복잡한 웹페이지 레이아웃을 만들 수 있습니다. 가시성 속성은 다음 표에 나열된 값을 사용할 수 있습니다. 값 설명 보임 상자와 내용물이 사용자에게 표시됩니다. 숨김 상자와 그 내용은 여전히 페이지 레이아웃에 영향을 미치긴 하지만 보이지 않게 됩니다. 접기 동적 테이블 열 및 행 효과에만 사용할 수 있습니다. 예시 다음 코드를 실행하여 보이는 작업 방법을 배울
가시성 값이표시되는 속성 요소를 표시하는 데 사용됩니다. 다음 코드를 구현하여 보이는 속성 - 예시 <html> <head> <style> p { visibility: hidden; } </style&g
CSS는 HTML 요소의 위치를 지정하는 데 도움이 됩니다. 원하는 위치에 HTML 요소를 넣을 수 있습니다. 페이지의 자연 위치를 기준으로 요소를 배치할지 또는 상위 요소를 기반으로 절대 위치를 지정할지 지정할 수 있습니다. 예시 상대 위치 지정의 예를 살펴보겠습니다. − <html> <head> </head> <body> <div style =
CSS의 위치 지정 관련 속성은 다음과 같습니다. 상대적 위치 상대 위치 지정은 일반적으로 나타나는 위치를 기준으로 HTML 요소의 위치를 변경합니다. 따라서 left:20은 요소의 LEFT 위치에 20픽셀을 추가합니다. 절대적 위치 위치:가 있는 요소 절대값은 화면 왼쪽 상단 모서리를 기준으로 지정된 좌표에 위치합니다. 고정 위치 고정 위치를 사용하면 스크롤에 관계없이 페이지의 특정 지점에 요소의 위치를 고정할 수 있습니다. 지정된 좌표는 브라우저 창을 기준으로 합니다.
상대적 위치 지정은 일반적으로 나타나는 위치를 기준으로 HTML 요소의 위치를 변경합니다. 따라서 left:20은 요소의 LEFT 위치에 20픽셀을 추가합니다. 두 개의 값을 사용할 수 있습니다. 상단 그리고 왼쪽 위치 와 함께 HTML 문서의 아무 곳이나 HTML 요소를 이동하는 속성입니다. 왼쪽으로 이동 - 왼쪽에 음수 값 사용 . 오른쪽으로 이동 - 왼쪽으로 양수 값을 사용합니다. 위로 이동 - 상단에 음수 값을 사용합니다. 아래로 이동 - 상단에 양수 값을 사용합니다. 예시 상대 위치 지정을 구
위치가인 요소: 절대 화면 왼쪽 상단 모서리를 기준으로 지정된 좌표에 위치합니다. 두 가지 값을 사용할 수 있습니다. top 그리고 왼쪽 위치와 함께 HTML 문서의 아무 곳이나 HTML 요소를 이동하는 속성입니다. 왼쪽으로 이동 - 왼쪽에 음수 값을 사용합니다. 오른쪽으로 이동 - 왼쪽으로 양수 값을 사용합니다. 위로 이동 -상단에 음수 값을 사용합니다. 아래로 이동 - 상단에 양수 값을 사용합니다. 예시 절대 위치 지정을 구현하기 위해 다음 코드를 실행할 수 있습니다. - <html>
고정 위치 지정을 사용하면 스크롤에 관계없이 페이지의 특정 지점에 요소의 위치를 고정할 수 있습니다. 지정된 좌표는 브라우저 창을 기준으로 합니다. top 및 left 두 가지 값을 사용할 수 있습니다. 위치 와 함께 HTML 문서의 아무 곳이나 HTML 요소를 이동하는 속성입니다. 왼쪽으로 이동 - 왼쪽에 음수 값 사용 . 오른쪽으로 이동 - 왼쪽에 양수 값 사용 . 위로 이동 - 상단에 음수 값 사용 . 아래로 이동 - 상단에 양수 값 사용 . 예시 고정 위치를 구현하기 위해 다음 코드를 실행할 수 있습니다.
z-색인 속성은 위치와 함께 사용됩니다. 속성을 사용하여 레이어 효과를 만듭니다. 어떤 요소가 맨 위에 오고 어떤 요소가 맨 아래에 와야 하는지 지정할 수 있습니다. 예시 다음 코드를 실행하여 z-색인을 구현할 수 있습니다. 속성 - <html> <head> </head> <body> <div style = "background-color:blue; width:3
CSS 의사 클래스는 일부 선택기에 특수 효과를 추가하는 데 사용됩니다. 이러한 효과를 사용하기 위해 JavaScript나 다른 스크립트를 사용할 필요가 없습니다. 가장 일반적으로 사용되는 의사 클래스는 - 값 설명 :링크 이 클래스를 사용하여 방문하지 않은 링크에 특별한 스타일을 추가합니다. :방문함 이 클래스를 사용하여 방문한 링크에 특별한 스타일을 추가합니다. :hover 이 클래스를 사용하여 요소 위에 마우스를 놓을 때 요소에 특별한 스타일을 추가합니다. :활성 이 클래스를 사용하여
:link 의사 클래스는 방문하지 않은 링크에 특별한 스타일을 추가하는 데 사용됩니다. 가능한 값은 모든 유효한 형식의 색상 이름일 수 있습니다. 예시 <html> <head> <style> a:link { color:#000000; } </style> </head> <
줄 높이 속성은 텍스트 줄의 높이를 설정하는 데 사용됩니다. 줄 높이 값 속성은 숫자, 길이 또는 백분율이 될 수 있습니다. 예시 <html> <head> </head> <body> <p style = "width:300px; height:100px; border:2px solid green; padding:5px; margin:10px; line-height:30px;
최소 높이 속성은 상자가 될 수 있는 최소 높이를 설정하는 데 사용됩니다. min-height 속성의 값은 숫자, 길이 또는 백분율이 될 수 있습니다. 예시 <html> <head> </head> <body> <p style = "width:400px; min-height:150px; border:1px solid blue; padding:5px; margin:10px;
CSS를 사용하여 레이어를 생성하려면 다음 코드를 실행할 수 있습니다. Z-색인 속성을 사용했습니다 예시 <html> <head> </head> <body> <div style = "background-color:red; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2"&g
오른쪽 여백 요소의 오른쪽 여백을 지정합니다. 길이, % 또는 자동 값을 가질 수 있습니다. 다음 코드를 실행하여 오른쪽 여백을 설정할 수 있습니다. - 예시 <html> <head> </head> <body> <p style = "margin-right: 10px; border:2px solid red;">
최대 너비 속성은 상자의 최대 너비를 설정하는 데 사용됩니다. max-width 속성의 값은 숫자, 길이 또는 백분율이 될 수 있습니다. 예시 <html> <head> </head> <body> <p style = "max-width:100px; height:200px; border:1px solid green; padding:5px; margin:10px;"&
최소 너비 속성은 상자의 최소 너비를 설정하는 데 사용됩니다. min-width 속성의 값은 숫자, 길이 또는 백분율이 될 수 있습니다. 예시 <html> <head> </head> <body> <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
CSS는 overflow라는 속성을 제공합니다. 상자의 내용이 상자 자체보다 큰 경우 브라우저에 수행할 작업을 알려줍니다. 이 속성은 다음 값 중 하나를 사용할 수 있습니다. - 값 설명 보임 컨텐츠가 포함하는 요소의 경계를 넘도록 허용합니다. 숨김 중첩된 요소의 내용은 포함하는 요소의 테두리에서 단순히 잘리고 스크롤바가 표시되지 않습니다. 스크롤 포함하는 요소의 크기는 변경되지 않지만 사용자가 콘텐츠를 보기 위해 스크롤할 수 있도록 스크롤 막대가 추가됩니다. 자동 목적은 스크롤과 같지만 내