CSS font-style 속성은 요소의 텍스트에 대해 normal, italic 또는 oblique 스타일을 지정하는 데 사용됩니다. 구문 CSS font-style 속성의 구문은 다음과 같습니다 - Selector { font-style: /*value*/ } 예시 다음 예제는 CSS 글꼴 스타일 속성을 보여줍니다 - <!DOCTYPE html> <html> <head> <style> h2 { font-style: italic; &nbs
CSS를 사용하면 링크에 색상을 지정할 수 있습니다. color 속성은 요소의 텍스트 색상을 설정하는 데 사용됩니다. 유사 선택기의 순서는 - :link, :visited, :hover, :active로 지정됩니다. 구문 CSS 색상 속성의 구문은 다음과 같습니다 - Selector { color: /*value*/ } 예시 다음 예는 CSS 색상 속성을 보여줍니다 - <!DOCTYPE html> <html> <head> <style> #demo::after {
윤곽선은 공간을 차지하지 않으며 설정된 경우 테두리 주위에 표시됩니다. 요소를 강조 표시하는 데 사용되며 개별 면에 윤곽선이 있어야 하는지 여부를 지정할 수 없습니다. 테두리와 마찬가지로 윤곽선은 기본적으로 표시되지 않습니다. Firefox와 같은 일부 브라우저에서는 초점이 맞춰진 요소가 얇은 윤곽선으로 표시됩니다. 테두리는 더 크게 사용자 정의할 수 있습니다. 테두리의 개별 면에 스타일을 지정하고 가장자리를 둥글게 만듭니다. 테두리는 공간을 차지하고 상자 크기에 영향을 줍니다. 구문 CSS 테두리 속성의 구문은 다음과 같습니다
정렬되지 않은 목록과 정렬된 목록의 스타일과 위치는 list-style-type, list-style-image 및 list-style-position이 있는 CSS 속성으로 형식을 지정할 수 있습니다. 구문 CSS 목록 스타일 속성의 구문은 다음과 같습니다 - Selector { list-style: /*value*/ } 예시 다음 예는 CSS 목록 스타일 속성을 보여줍니다 - 다음 예제 스타일은 정렬된 목록 - <!DOCTYPE html> <html> <head> &l
HTML에는 세 가지 유형의 목록이 있습니다 - 순서 없는 목록 이 목록에는 특정 순서가 없는 글머리 기호 목록 항목이 있습니다. 순서 목록 이 목록은 주문된 목록 항목에 사용됩니다. 정의 목록 이 목록은 용어에 대한 정의를 표시하는 데 사용됩니다. 이 목록을 중첩하고 원하는 대로 스타일을 지정할 수 있습니다. CSS 속성 list-style은 목록 항목의 스타일을 지정하는 데 도움이 됩니다. 구문 HTML 목록의 구문은 다음과 같습니다 - <type of list> <li></li
CSS를 사용하여 테이블의 스타일을 정의할 수 있습니다. 다음 속성은 및 해당 요소의 스타일을 지정하는 데 자주 사용됩니다. 테두리 CSS 테두리 속성은 테두리 너비, 테두리 스타일 및 테두리 색상을 정의하는 데 사용됩니다. 테두리 축소 이 속성은 요소에 공유 또는 별도의 테두리가 있어야 하는지 여부를 지정하는 데 사용됩니다. 캡션 캡션 측 속성은 테이블 캡션 상자를 세로로 배치하는 데 사용됩니다. 빈 셀 이 속성은 테이블의 빈 셀 표시를 지정하는 데 사용됩니다. 테이블 레이아웃 테이블의 행, 열 및 셀을 배치
확장 가능한 텍스트 크기의 경우 글꼴 크기는 em으로 표시됩니다. 기본적으로 하나의 em은 16px 또는 12pt와 같습니다. 그 값은 상위 요소의 글꼴 크기에 상대적입니다. 구문 CSS font-size 속성의 구문은 다음과 같습니다 - Selector { font-size: /*value*/ } 예시 다음 예는 CSS font-size 속성을 ems −에서 설정하는 방법을 보여줍니다. <!DOCTYPE html> <html> <head> <style> div
글꼴의 더 나은 호환성을 위해 요소의 글꼴 크기를 지정하기 위해 퍼센트와 em의 조합을 사용할 수 있습니다. 이를 통해 다양한 브라우저에서 균일한 텍스트를 사용할 수 있습니다. 구문 CSS font-size 속성의 구문은 다음과 같습니다 - Selector { font-size: /*value*/ } 예시 다음 예는 CSS font-size 속성이 키워드로 설정되는 방법을 보여줍니다 - <!DOCTYPE html> <html> <head> <style> body
CSS font-weight 속성은 요소의 텍스트 문자의 굵기를 정의하는 데 사용됩니다. 구문 CSS font-weight 속성의 구문은 다음과 같습니다 - Selector { font-weight: /*value*/ } 예시 다음 예는 font-weight 속성을 보여줍니다 - <!DOCTYPE html> <html> <head> <style> div { margin: 3px; font-family: "In
CSS background-repeat 속성은 배경 이미지가 반복되는 방식을 정의하는 데 사용됩니다. 구문 CSS background-repeat 속성의 구문은 다음과 같습니다 - Selector { background-repeat: /*value*/ } 예시 다음 예는 CSS background-repeat 속성을 보여줍니다 - <!DOCTYPE html> <html> <head> <style> body { background-image:
CSS 인접 형제 선택자는 요소의 인접 형제를 선택하는 데 사용됩니다. 첫 번째 선택자 바로 다음에 오는 요소만 선택하는 데 사용됩니다. 구문 CSS 인접 형제 선택자의 구문은 다음과 같습니다 - element + element { /*declarations*/ } 예시 다음 예제는 CSS 인접 형제 선택자를 보여줍니다. - <!DOCTYPE html> <html> <head> <style> div { margin: 8px; &
CSS text-indent 속성은 요소의 첫 번째 줄 들여쓰기를 설정하는 데 도움이 됩니다. 구문 CSS text-indent 속성의 구문은 다음과 같습니다 - Selector { text-indent: /*value*/ } 예시 다음 예는 CSS 텍스트 들여쓰기 속성을 보여줍니다. <!DOCTYPE html> <html> <head> <style> div { display: flex; float: left; &nb
CSS word-spacing 속성은 요소의 단어 사이의 간격을 지정하는 데 사용됩니다. 구문 CSS word-spacing 속성의 구문은 다음과 같습니다 - Selector { word-spacing: /*value*/ } 예시 다음 예제는 CSS 단어 간격 속성을 보여줍니다 - <!DOCTYPE html> <html> <head> <style> div { display: flex; float: left;
CSS를 사용하면 원하는 대로 링크 스타일을 지정할 수 있습니다. 색상, 배경, 크기 증가 등을 추가하여 텍스트 서식을 지정할 수 있습니다. 또한 애니메이션을 추가하여 즐거운 시각 효과를 만들 수 있습니다. 적절한 기능을 위해 의사 선택기의 순서는 - :link, :visited, :hover, :active로 지정됩니다. 예시 다음 예는 CSS를 사용한 링크 스타일을 보여줍니다 - <!DOCTYPE html> <html> <head> <style> p { mar
CSS color 속성은 요소의 텍스트 색상을 설정하는 데 사용됩니다. 구문 CSS 색상 속성의 구문은 다음과 같습니다 - Selector { color: /*value*/ } 예 다음 예는 CSS 색상 속성을 보여줍니다 - <!DOCTYPE html> <html lang="en"> <head> <style> div { height: 100px; width: 200px; mar
CSS text-align 속성을 사용하여 요소의 텍스트를 가로로 설정할 수 있습니다. 왼쪽, 오른쪽, 양쪽 맞춤 또는 가운데로 설정할 수 있습니다. 구문 CSS text-align 속성의 구문은 다음과 같습니다 - Selector { text-align: /*value*/ } 예시 다음 예제는 CSS text-align 속성을 보여줍니다 - <!DOCTYPE html> <html> <head> <style> div { margin: aut
CSS Z-Index 속성 개발자를 사용하여 요소를 서로 스택할 수 있습니다. Z-색인은 양수 또는 음수 값을 가질 수 있습니다. 참고 − 겹치는 요소에 z-index가 지정되지 않은 경우 문서에서 마지막으로 언급된 해당 요소가 표시됩니다. 예시 z-색인 속성의 예를 살펴보겠습니다 − <!DOCTYPE html> <html> <head> <style> p { margin: 0; position: absolute; &nbs
이 CSS Pseudo Element는 요소 콘텐츠의 첫 글자를 선택합니다. 그러나 요소가 인라인 수준인 경우에는 작동하지 않습니다. 예시 CSS ::first-letter 의사 요소 −의 예를 살펴보겠습니다. <!DOCTYPE html> <html> <head> <style> div{ background-color: #32485d; border: 5px solid black; color: #959799; } p::fi
미디어 종속 스타일시트는 기본 스타일시트일 뿐이지만 미디어 유형이 문서가 표시되는 장치 유형과 일치하는 경우에만 html 문서에 적용됩니다. 다음과 같은 방법으로 미디어 종속 스타일시트를 만들 수 있습니다. - @media At-rules 사용 @import At-rules 사용 미디어 속성이 있는 HTML 요소 사용 예시 미디어 종속 스타일시트를 만드는 예를 살펴보겠습니다. − HTML 문서 <!DOCTYPE html> <html> <head> <link rel="styles
CSS @media 규칙은 단일 스타일 시트에서 다양한 미디어 유형(예:인쇄, 화면, 모두 등)에 대해 서로 다른 스타일을 지정하는 데 사용됩니다. 그 뒤에는 일반적으로 쉼표로 구분된 미디어 유형 목록과 대상 미디어에 대한 스타일 규칙이 포함된 CSS 선언 블록이 옵니다. 구문 다음은 구문입니다 - @미디어 아님 | 미디어 유형 및 (표현식) { CSS-Code;}만 예시 CSS @media 규칙의 예를 살펴보겠습니다 - * { box-sizing:border-box; }.col { 부동 소수점:왼쪽; 너비:20%; 패딩:40p