HTML에서 고정 요소를 만드는 방법

이 블로그에서는 CSS 위치 속성과 HTML에서 고정 요소를 만드는 방법에 대해 설명합니다.

CSS 위치 속성이란 무엇입니까?

CSS 위치 속성은 절대, 고정, 통계, 고정, 상속, 상대 또는 초기가 될 수 있는 HTML 요소의 위치 지정 방법을 지정합니다.

통사론

위에 주어진 구문은 position 속성이 다른 값을 가짐을 보여줍니다. 그에 따라 할당할 수 있습니다.

이제 HTML에서 고정 요소를 만드는 절차를 확인하십시오.

CSS position: sticky란 무엇입니까?

'가 있는 HTML 요소 어려운 ” position 은 특정 지점에 도달할 때까지 상대적인 위치를 가지며 고정 요소처럼 작동합니다.

CSS 고정 위치의 개념을 이해하기 위해 간단한 예제를 살펴보겠습니다.

예: HTML에서 고정 요소를 만드는 방법은 무엇입니까?
HTML 파일에서 제목에

, 단락에

, 클래스 이름이 '인

를 추가합니다. 어려운 '. 그런 다음 목록

와 함께 중첩된 순서 목록

이 있는

태그를 추가합니다.

메모 : 페이지를 스크롤할 때 고정 요소의 동작을 관찰할 수 있도록 긴 목록을 가져왔습니다.

HTML

< h2 > 스티커 메모: 스티커 요소의 효과 보기 < / h2 >
< 피 > 위치: 끈끈한 < / 피 >
< 사업부 수업 = '어려운' > 이것은 내 할 일 목록입니다! < / 사업부 >
< 피 >
< 올 >
< 저것 > 통화 관리자 < / 저것 >
< 저것 > 직원과의 만남 < / 저것 >
< 저것 > 보고서 제출 < / 저것 >
< 저것 > 의사에게 가다 < / 저것 >
< 저것 > 비행기 예약 < / 저것 >
< 저것 > 산책하러 가십시오. < / 저것 >
< 저것 > 식료품을 사러 가십시오. < / 저것 >
< 저것 > TV 시청 < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< 저것 > 일부 텍스트. < / 저것 >
< / 올 >
< / 피 >

다음으로 sticky라는 div에 스타일을 제공합니다.

• 여기, ' .어려운 ”는 스타일 속성을 적용해야 하는 클래스를 나타냅니다.
• 중괄호 안에 ' 위치 ' 속성 값 ' 어려운 '.
• “ 맨 위 ”는 “로 설정 0 '.
• “ 배경색 ' 이다 ' #00154f '.
• 좀 줘' 심 ” 값을 “로 설정하여 div에 40픽셀 '.
• “ 글꼴 크기 ' 처럼 ' 30픽셀 '.
• “ 색깔 '로 설정되어 있습니다. 하얀 '.

CSS

.어려운 {
위치 : 어려운 ;
맨 위 : 0 ;
배경색 : #00154f ;
심 : 40픽셀 ;
글꼴 크기 : 30픽셀 ;
색깔 : 하얀 ;
}

HTML 파일을 저장하고 브라우저에서 열어 출력을 확인합니다.



보너스 팁

'를 활용하여 슬라() ” 방법을 사용하면 다음과 같이 추가된 스티커 요소에 투명 배경을 설정할 수 있습니다.

배경 - 색깔 : 슬라 ( 0 , 100 %, 90 %, 0.8 ) ;

산출



이것은 요소가 CSS ' 위치 ' 속성 값 ' 어려운 '.

결론

“ 어려운 ” 위치 CSS에서 요소 위치를 상대 위치와 고정 위치 간에 전환합니다. 결과적으로 추가된 스티키 요소는 스티키처럼 동작하는 특정 지점에 도달할 때까지 스크롤을 기준으로 배치됩니다. hsla() 메서드를 활용하여 추가된 고정 요소의 투명도를 조정할 수도 있습니다. 이 블로그는 간단하고 끈끈한 투명 요소를 만드는 방법을 안내했습니다.