상대 위치 지정을 사용하면 요소가 일반 위치를 기준으로 배치됩니다. 이를 위해 위치:상대를 사용합니다. 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> div.demo { position: relative; color: white; background-color: orange; border: 2px dashed blue; &nbs
텍스트 들여쓰기의 경우 CSS의 text-indent 속성을 사용하십시오. 단락의 첫 줄 들여쓰기를 위한 것입니다. 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> div { text-indent: 30px; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo tex
CSS를 사용하여 배경색을 설정하려면 background-color 속성을 사용하십시오. 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline underline; background-color: red; } </style> </head> <body> <h1>Details</h1> &
CSS의 배경 반복은 웹 페이지에서 배경 이미지가 반복되는 방식을 설정하는 데 사용됩니다. 이를 위해 background-repeat 속성을 사용하십시오. 다음은 속성 값일 수 있습니다. - background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> body { background-image: ur
배경 위치는 배경 이미지의 시작 위치를 설정하는 것입니다. 이를 위해 background-position 속성을 사용하십시오. 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/images/Swift.png"); background-repeat: no-repeat;
열 규칙을 설정하려면 다음 속성을 설정할 수 있는 축약형 열 규칙 속성을 사용하십시오 - column-rule-width: set the width of the rule between columns column-rule-style: set the style of the rule between columns column-rule-color: set the rule of the rule between columns 열 규칙의 값은 -로 설정할 수 있습니다. column-rule: column-rule-width column-
CSS의 translate() 함수는 요소를 가로 및 세로 방향으로 재배치하는 데 사용됩니다. 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} .translate_img { transform: translate(50px,
절대 위치 지정을 사용하면 가장 가까운 위치에 있는 상위 항목을 기준으로 요소가 배치됩니다. 예 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> div.demo1 { position: relative; color: white; background-color: orange; border: 2px dashed blue; width
CSS에서 목록 스타일 유형을 설정하려면 CSS에서 list-style-type 속성을 사용하세요. 예시 정렬되지 않은 목록에 대한 목록 스타일 유형을 설정하는 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> ul { list-style-type: square; } </style> </head> <body> <h2>Teams</h2> <ul> <li>
CSS 절대 단위 절대 길이 단위는 서로에 대해 고정되어 있습니다. 이 단위는 출력 형식이 이미 알려진 경우에 사용됩니다. 다음은 절대 길이 단위의 일부입니다 - Sr.No 단위 및 설명 1 cm 센티미터 2 mm 밀리미터 3 안에서 인치(1in =96px =2.54cm) 4 픽셀 * 픽셀(1px =1인치의 1/96) 5 pt 포인트(1pt =1in의 1/72) 6 PC 파이카 (1pc =12pt) 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> &l
list-style-position 속성은 목록 항목 마커의 위치를 설정하는 데 사용됩니다. 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> ul.demo1 { list-style-position: outside; } ul.demo2 { list-style-position: inside; } </style> </head> <body> <h1>T
이미지를 목록 마커로 사용하려면 CSS에서 list-style-image 속성을 사용하세요. 예시 이미지를 목록 마커로 사용하는 예를 살펴보겠습니다. - <!DOCTYPE html> <html> <head> <style> ul.demo1 { list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); } ol.demo2 { list-style-image: u
줄 높이를 설정하려면 line-height 속성을 사용하십시오. 다음은 속성 값입니다 - line-height: normal|number|length|initial|inherit; 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> div { line-height: 1.9; } </style> </head> <body> <h1>Demo Heading</h1> &l
CSS를 사용하여 링크 기본 밑줄을 제거하려면 코드는 다음과 같습니다 - 예시 <!DOCTYPE html> <html> <head> <style> a:link { color: blue; text-decoration: none; } a:visited { color: blue; text-decoration: none; } </style> </head> <body> <
CSS로 링크의 스타일을 지정하려면 먼저 링크, 방문, 호버 및 활성과 같은 링크 상태를 알아야 합니다. 앵커 요소의 유사 클래스를 사용하여 링크 스타일 지정 - a:link for link a:visited forvisited link a:link for hover on link a:active for active link 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> a:link { color: orange
정적 위치 지정을 사용하면 요소가 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을 받지 않습니다. 이를 위해 position:static을 사용합니다. 예시 이제 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> div.static { position: static; color: white; background-color: orange; border: 2p
CSS의 rotate3d() 함수는 3D 공간에서 요소를 회전하는 데 사용됩니다. 회전의 양과 각도를 rotate3d()의 매개변수로 설정합니다. 예시 예를 들어 보겠습니다 - <!DOCTYPE html> <html> <head> <style> .demo { transform: rotate3d(1, 1, 1, 45deg); } .skew_img { transform-origin: left; transform: skew(
font-size 속성으로 글꼴 크기를 설정하려면 키워드도 설정할 수 있습니다. 이 키워드는 절대 크기 또는 상대 크기 키워드로 나뉩니다 - 상대적 크기의 키워드 다음 키워드 포함:더 크게, 더 작게 절대 크기 키워드 다음 키워드를 포함합니다:xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large 예시 이제 Absolute-size 키워드를 사용하여 글꼴 크기를 설정하는 예를 살펴보겠습니다. - <!DOCTYPE html> <html>
CSS3를 사용하여 이미지에 세피아 효과를 적용하려면 filter 속성에 세피아 값을 사용하십시오. 예시 코드는 다음과 같습니다 - <!DOCTYPE html> <html> <head> <style> img.demo { filter: sepia(100%); } </style> </head> <body> <h1>Learn Spring Framework</h1> <img src="https://www.
CSS3로 이미지를 포화시키려면 필터 속성에 포화 속성 값을 사용하십시오. 예시 이미지의 채도를 조정하는 예를 살펴보겠습니다 - <!DOCTYPE html> <html> <head> <style> img.demo { filter: saturation(500%); } </style> </head> <body> <h1>Learn Spring Framework</h1> <img src="https://w