CSS | 컴퓨터

CSS의 :nth-child 의사 클래스

CSS :nth-child() 의사 클래스는 다른 요소의 n번째 자식 요소인 요소를 선택합니다. 구문 다음은 구문입니다 - :nth-child(){ /*declarations*/ } 예시 CSS :nth-child() Pseudo class −의 예를 살펴보겠습니다. <!DOCTYPE html> <html> <head> <title>CSS :nth-child() Pseudo Class</title> <style> form { &n

CSS에서 의사 요소란 무엇입니까?

CSS 의사 요소는 기본적으로 첫 글자, 첫 줄 등과 같은 요소의 특정 부분에 대한 선택기입니다. :after 및 :before 의사 요소는 각각 요소 앞뒤에 삽입하는 데 사용할 수 있습니다. 구문 다음은 요소에서 CSS Pseudo 요소를 사용하기 위한 구문입니다 - Selector::pseudo-element { css-property: /*value*/; } 예시 CSS Pseudo Elements −의 예를 살펴보겠습니다. <!DOCTYPE html> <html> <hea

HTML 페이지에 CSS를 포함하는 방법

세 가지 방법으로 HTML 페이지에 CSS를 포함할 수 있습니다. 이들은 - 인라인 여기에서 element의 style 속성에 CSS 스타일을 지정합니다. 단, 파일을 모듈화하기 위해서는 CSS의 내부 또는 외부 링크를 권장합니다. 내부 HTML 문서의 내부에 있는 태그에 CSS 사양을 포함할 수 있습니다. 외부 태그를 사용하여 로컬로 또는 서버에 배치할 수 있는 .css 파일을 연결할 수 있습니다. 파일의 외부 링크를 사용하여 파일을 리팩토링하면 여러 웹페이지에서 사용할 수 있는 공통 CSS 파일을 가질 수 있습니

HTML 문서에 CSS 포함

HTML 문서에 CSS를 포함하려면 내부적으로, 인라인으로 포함하거나 외부 파일을 링크할 수 있습니다. 구문 HTML에 CSS 파일을 포함하는 구문은 다음과 같습니다. /*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> </head> /*external*/ <head> <link rel=&q

CSS의 요소 유형 선택기

CSS 요소 유형 선택기는 유형의 모든 요소를 선택하는 데 사용됩니다. CSS 요소 유형 선택자의 구문은 다음과 같습니다. 구문 element { /*declarations*/ } 예시 다음 예는 CSS 요소 유형 선택기를 보여줍니다. <!DOCTYPE html> <html> <head> <style> li { list-style: none; margin: 5px; border-bottom-s

CSS의 하위 선택기

CSS 요소 선택기는 요소 이름이 두 번째 선택기와 일치하는 첫 번째 요소의 자손을 선택하는 데 사용됩니다. 구문 CSS 자손 선택자의 구문은 다음과 같습니다 - element element { /*declarations*/ } 예시 다음 예는 CSS 자손 선택자를 보여줍니다 - <!DOCTYPE html> <html> <head> <style> div { float: right; margin: 25px;

CSS의 outline-width 속성

outline-width 속성은 요소의 테두리 주위에 특정 굵기의 선을 그리도록 정의할 수 있지만 테두리 속성과 달리 테두리는 요소 치수의 일부가 아닙니다. 구문 CSS outline-width 속성의 구문은 다음과 같습니다 - Selector { outline-width: /*value*/ } 참고 - Outline-width를 선언하기 전에 outline-style 속성을 정의해야 합니다. Outline-width 속성의 예를 살펴보겠습니다 - 예시 <!DOCTYPE html> <ht

CSS의 최소 너비 속성

너비가 min-width보다 작더라도 요소의 콘텐츠 상자가 더 좁아지지 않도록 하는 CSS min-width 속성을 사용하여 요소의 콘텐츠 상자에 대해 고정된 최소 너비를 정의할 수 있습니다. 구문 CSS min-width 속성의 구문은 다음과 같습니다 - Selector { min-width: /*value*/ } 예시 CSS min-width 속성의 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <title>CSS min-widt

CSS 절대 및 상대 단위

CSS 절대 단위와 상대 단위는 모두 거리 단위 범주에 속합니다. CSS 상대 단위는 다른 요소를 참조하여 요소의 길이를 정의합니다. 예:vh 상대 단위는 표시 영역 높이에 상대적입니다. 다음은 CSS 상대 단위입니다 - Sr.No 단위 및 기준 1 % 상위 요소 차원 2 그들 요소의 글꼴 크기 3 예 요소 글꼴의 x 높이 4 lh 요소의 줄 높이 5 렘 루트 요소의 글꼴 크기 6 rlh 루트 요소의 줄 높이 7 vb 루트 요소의 블록 축에서 뷰포트 크기의 1% 8 vh

CSS의 최소 높이 속성

CSS min-height 속성을 사용하여 요소의 콘텐츠 상자에 대해 고정된 최소 높이를 정의할 수 있습니다. 이 속성은 높이가 min-height보다 작더라도 요소의 콘텐츠 상자가 더 작아지는 것을 허용하지 않습니다. 구문 CSS min-height 속성의 구문은 다음과 같습니다 - Selector { min-height: /*value*/ } 예시 CSS min-height 속성의 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <tit

CSS의 Clear 속성을 사용하여 Float 끄기

CSS clear 속성을 사용하여 흐르는 콘텐츠를 제거할 부동 요소의 측면을 지정할 수 있습니다. 예시 CSS clear 속성의 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <title>CSS Clear</title> <style type="text/css"> .clear { clear: left; } .yellow{ background-color: #FF8A00; } .

CSS 중앙, 수평 및 수직 정렬

요소와 그 콘텐츠를 가로, 세로 또는 중앙에 정렬하는 다양한 옵션을 제공하는 CSS를 사용하여 요소 또는 그 안의 콘텐츠를 정렬할 수 있습니다. 수평 정렬 인라인 요소 CSS text-align 속성을 사용하여 텍스트, 앵커, 스팬 등과 같은 인라인 요소 또는 인라인 블록 요소를 수평으로 정렬할 수 있습니다. 블록 수준 요소 div, p 등과 같은 블록 수준 요소는 CSS margin 속성을 사용하여 수평으로 정렬할 수 있지만 요소의 너비는 부모에 대해 100%가 아니어야 합니다. 그러면 정렬이 필요하지 않기 때문입니다.

CSS를 사용한 절대 위치 지정

CSS에서 요소의 위치를 절대 위치로 정의하여 첫 번째 위치에 있는(정적 제외) 상위 요소를 기준으로 요소를 렌더링할 수 있습니다. 위치 지정 방법이 절대인 요소는 CSS 위치 지정 속성(왼쪽, 오른쪽, 위쪽 및 아래쪽)에 의해 위치가 지정됩니다. 예시 CSS 절대 위치 지정 방법의 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> p { margin: 0; position: absolute; &n

CSS를 사용한 부동 요소

CSS float 속성은 상자나 콘텐츠의 위치를 지정하거나 서식을 지정하는 데 사용됩니다. 개발자는 CSS float를 사용하여 요소를 왼쪽 또는 오른쪽으로 배치할 수 있습니다. float 속성은 다음 값 중 하나를 가질 수 있습니다. - 왼쪽 − 요소는 컨테이너의 왼쪽에 떠 있습니다. 맞습니다 − 요소는 컨테이너의 오른쪽에 떠 있습니다. 없음 - 요소는 부동하지 않습니다. 기본값입니다. 상속 − 요소는 상위 요소의 부동 소수점 값을 상속합니다. 예 CSS Float 속성의 예를 살펴보겠습니다 - <!DOCTYPE

CSS의 :first-child 의사 클래스

CSS :first-child 의사 클래스는 다른 요소의 첫 번째 자식 요소인 요소를 선택합니다. 구문 다음은 구문입니다 - :first-child{ /*declarations*/ } 예시 CSS first-child Pseudo 클래스의 예를 살펴보겠습니다 − <!DOCTYPE html> <html> <head> <style> table { margin: auto; padding: 10px;

CSS를 사용한 고정 위치 지정

CSS에서 요소의 위치를 고정으로 정의하여 사용자의 뷰포트를 기준으로 요소를 렌더링할 수 있습니다. 위치 지정 방식이 고정된 요소는 스크롤해도 이동하지 않으며 CSS 위치 지정 속성(왼쪽, 오른쪽, 위, 아래)에 의해 위치가 지정됩니다. 예시 CSS 고정 위치 지정 방법의 예를 살펴보겠습니다. - <!DOCTYPE html> <html> <head> <style> p { margin: 0; position: absolute;

CSS에서 요소의 너비와 높이

CSS height 및 width 속성은 각각 요소의 높이와 너비를 지정하는 데 사용됩니다. max-height, max-width, min-height 및 min-width 속성을 사용하여 이러한 속성의 최대값과 최소값을 설정할 수도 있습니다. 구문 CSS 높이 및 CSS 너비 속성의 구문은 다음과 같습니다. - 선택자 { 높이:/*값*/ 너비:/*값*/} 요소의 실제 너비와 높이는 다음과 같이 계산됩니다. - 상자 크기 계산 총 너비 너비 + 왼쪽 여백 + 오른쪽 여백 + 왼쪽 테두리 + 오른쪽 테두리 + 왼쪽 여백 +

CSS를 사용하여 요소 주위에 여백 설정

CSS margin 속성은 테두리 주변의 선택된 요소 주변의 여백 영역을 설정하는 데 사용됩니다. margin 속성은 margin-top, margin-right, margin-bottom 및 margin-left의 약어입니다. 구문 CSS margin 속성의 구문은 다음과 같습니다 - Selector { margin: /*value*/ } 다음 예는 CSS 여백 속성을 보여줍니다 - 예시 <!DOCTYPE html> <html> <head> <style> bod

CSS 여백 속성

CSS margin 속성은 margin-top, margin-right, margin-bottom 및 margin-left의 약어입니다. 요소 주위의 공간을 지정할 수 있습니다. 우리는 또한 개별 면에 대한 여백을 설정할 수 있습니다. 구문 CSS margin 속성의 구문은 다음과 같습니다 - Selector { margin: /*value*/ } 예시 다음 예는 CSS 여백 속성을 보여줍니다 - <!DOCTYPE html> <html> <head> <style>

CSS의 배경 첨부

CSS의 background-attachment 속성은 뷰포트를 기준으로 페이지를 스크롤할 때 배경 이미지의 위치를 지정하는 데 사용됩니다. 스크롤, 고정 및 로컬 값을 가질 수 있습니다. 구문 CSS background-attachment 속성의 구문은 다음과 같습니다 - Selector { background-attachment: /*value*/ } 예시 다음 예는 CSS background-attachment 속성을 보여줍니다 - <!DOCTYPE html> <html> &