CSS는 ::first-letter 의사 요소를 사용하여 요소의 첫 글자 스타일을 지정하는 데 도움이 됩니다. 구두점, 이중 문자 및 콘텐츠 속성은 첫 글자를 변경할 수 있습니다. 다음 예는 CSS ::first-letter pseudo-element를 보여줍니다. 예시 <!DOCTYPE html> <html> <head> <style> body { text-align: center; } ::first-letter { font-size: 3e
CSS ::first-line pseudo-element는 요소의 첫 번째 줄 스타일을 지정하는 데 도움이 됩니다. 다음 예는 CSS ::first-line pseudo-element를 보여줍니다. 예 <!DOCTYPE html> <html> <head> <style> body { text-align: center; background-color: darkorchid; } ::first-line { font-size:
첫 번째 선택자 직후에 발생하는 요소를 일치시키려면 인접한 형제 선택자(+)를 사용합니다. 여기에서 두 선택자는 동일한 상위 요소의 하위 요소입니다. CSS 인접 형제 결합자의 구문은 다음과 같습니다 - Selector + Selector{ attribute: /*value*/ } 두 번째로 선택한 요소의 위치에 관계없이 동일한 부모의 형제를 선택하려면 CSS 일반 형제 결합자를 사용합니다. CSS 일반 형제 결합자의 구문은 다음과 같습니다 - Selector ~ Selector{
CSS 자식 결합자는 부모 요소의 모든 자식 요소를 선택하는 데 사용됩니다. CSS 자식 결합자의 구문은 다음과 같습니다. 선택자 { 속성:/*값*/} CSS 자손 결합자는 상위 요소의 모든 자손을 선택하는 데 사용됩니다. CSS 자손 결합자의 구문은 다음과 같습니다. 선택기 선택기 { 속성:/*값*/} 예 다음 예는 CSS 하위 및 하위 결합자를 보여줍니다. * { text-align:center; border:10px 홈 토마토;}::first-line { box-shadow:inset 0 0 7px cornflowe
포커스가 있는 요소의 부모 스타일을 지정하려면 CSS :focus-within pseudo-class를 사용합니다. 다음 예는 CSS :focus-within pseudo-class를 보여줍니다. 예시 <!DOCTYPE html> <html> <head> <style> form { margin: 2%; padding: 2%; display: flex; flex-direction: column; &
CSS 객체 맞춤 및 객체 위치 속성은 이미지를 자르고 요소에 표시되는 방식을 지정하는 데 도움이 됩니다. CSS object-fit 속성의 구문은 다음과 같습니다 - Selector { object-fit: /*value*/ object-position:/*value*/ } 예시 다음 예는 CSS object-fit 속성을 보여줍니다. <!DOCTYPE html> <html> <head> <style> img { o
data-* 속성을 사용하여 요소에 대한 추가 정보를 저장할 수 있습니다. 다음 예는 CSS data-* 속성을 보여줍니다. 예시 <!DOCTYPE html> <html> <head> <style> dl { margin: 2%; } p { width: 60%; background-color: lightgreen; padding: 2%; color: white; &
웹 브라우저에서 제공하는 기본 스크롤 앵커를 비활성화하려면 overflowanchor를 사용할 수 있습니다. 재산. 예시 다음 예는 overflow-anchor 속성에 대한 아이디어를 제공합니다 - <!DOCTYPE html> <html> <head> <style> body { overflow-anchor: none; } div{ display: flex; flex-direction: row; } </style&g
CSS pointer-events 속성을 사용하여 요소에서 마우스와 터치가 허용되는지 여부를 제어할 수 있습니다. CSS 포인터 이벤트 속성의 구문은 다음과 같습니다 - pointer-events: auto|none; 위, 자동 기본값입니다. 요소는 포인터 이벤트에 반응하는 반면 없음: 요소가 포인터 이벤트에 반응하지 않음 예시 다음 예는 CSS 포인터 이벤트 속성을 보여줍니다. <!DOCTYPE html> <html> <head> <style> a { ma
삽입 캐럿의 색상을 변경하려면 CSS caret-color 속성 사용됩니다. 예시 다음 예는 CSS caret-color 속성을 보여줍니다. 양식 { 패딩:2%; 마진:2%; 텍스트 정렬:센터;}형태:포커스 내부 { 상자 그림자:0 0 10px rgba(0,0,0,0.6); 배경색:베이지;}입력 { 글꼴 크기:3em; 캐럿 색상:Chartreuse; margin:2%;}히트! 출력 이것은 다음 결과를 생성합니다 - 예시 양식 { 패딩:2%; 마진:2%; background-color:thistle;}form:focus-wit
CSS 탭 크기 속성 탭에서 사용되는 공백의 양을 설정할 수 있습니다. 다음 예는 CSS tab-size 속성을 보여줍니다. 예시 <!DOCTYPE html> <html> <head> <style> body { display: flex; flex-direction: column; } p { white-space: pre; } p:last-of-type { tab-size: 32; &nb
CSS 텍스트 정렬 속성은 요소의 정당화 유형을 지정하는 데 도움이 됩니다. text-align 속성은 요소에 있는 텍스트의 수평 정렬을 설정합니다. 예 다음 예는 CSS text-justify 속성을 보여줍니다. <!DOCTYPE html> <html> <head> <style> article { margin: 3%; background-color: peachpuff; text-align: justify; } p:fi
CSS 하이픈 사용 속성을 사용하여 텍스트에 하이픈을 추가하는 방법을 지정할 수 있습니다. 예시 다음 예는 CSS 하이픈 속성을 보여줍니다. div { 너비:20%; 테두리:2px 홈 라임; 여백:10px; 패딩:10px; 하이픈:없음; -webkit-하이픈:없음; -ms-하이픈:없음;}div:마지막 유형 { 하이픈:수동; -webkit-하이픈:수동; -ms-하이픈:수동;}abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz 출력 이것은 다음 결과를 생성합니다 - 예시 div { 여백
CSS 텍스트 들여쓰기 속성을 사용하면 들여쓰기 텍스트의 공백 크기를 지정할 수 있습니다. 예 다음 예는 CSS 텍스트 들여쓰기 속성을 보여줍니다. p { text-indent:15%;}article { background-color:#000000; 마진:2%; 그래서 에로가 많은 10대들의 좋은 계곡이다. 페리가 덩어리가 되면서 교실에 있지 않습니다. 슬프고 부드러운 시작의 경계에서 출력 이것은 다음과 같은 결과를 생성합니다 - 예 p { 여백:2%; 텍스트 들여쓰기:13%; 테두리:2px 단색 lightgoldenrody
다음 텍스트 장식 속성의 도입으로 이제 이전보다 더 많은 방법으로 텍스트의 스타일을 지정할 수 있습니다. text-decoration은 text-decoration-thickness, text-decoration-color, text-decoration-line 및 text-decoration-style의 약어입니다. text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset 및 text-underline-position을 명시적으로 지
페이지의 텍스트 색상과 배경 색상을 변경하여 웹사이트에 어둡거나 밝은 모드를 추가할 수 있습니다. 구문 다음 구문을 사용하여 다크 모드를 적용할 수 있습니다. Selector { color: white; background-color: black } 예시 <!DOCTYPE html> <html> <head> <style>
CSS overscrollbehavior 속성을 사용하여 웹 페이지의 경계 영역 스크롤 출력을 변경할 수 있습니다. 이를 통해 브라우저에서 Pull-to-Refresh를 비활성화할 수 있습니다. CSS overscroll-behavior 속성의 구문은 다음과 같습니다 - Selector { overscroll-behavior: /*value*/ } 예 다음 예는 CSS overscroll-behavior 속성을 보여줍니다. <!DOCTYPE html> <html> <head> <styl
개발자가 JavaScript와 CSS를 혼합하여 웹 사이트를 사용자 정의할 수 있도록 새로운 CSS 속성이 개발되었으며 이제 인기 있는 브라우저를 지원합니다. 이들 중 일부는 아래에 나열되어 있습니다 - 포커스 내 요소 내에서 포커스 접근성을 해결하는 것을 목표로 합니다. 스크롤 스냅 이렇게 하면 기본 스크롤 및 감속이 가능합니다. @media(-* 선호) 사용자의 디바이스 선호도에 따라 페이지의 UI와 UX를 동시에 설정할 수 있도록 도와줌으로써 더 높은 수준의 개인화를 가능하게 합니다. * 밝기 수준, 강제 색상, 색 구
CSS :not() 유사 클래스를 사용하면 특정 값이 없거나 선택자와 일치하지 않는 요소를 선택하여 스타일을 구체화할 수 있습니다. 예시 다음 예는 의사 클래스가 아닌 CSS를 보여줍니다. <!DOCTYPE html> <html> <head> <style> p { background-color: cornflowerblue; color: white; } p:not(div>p) { background-color: kh
position:sticky 및 top:0을 설정하면 HTML 테이블의 스크롤에 고정 헤더를 만들 수 있습니다. 예시 다음 예는 이것을 구현하는 방법에 대한 아이디어를 제공합니다 - <!DOCTYPE html> <html> <head> <style> div { color: white; display: flex; padding: 2%; background-color: rgba(190,155,150)