[CSS] 메뉴 상단에 고정하기 (sticky)

스크롤을 내려도 헤더가 상단에 고정되어 있게 만들어봅시다. 1. 구현 모습 확인 ① 구현 화면 예시 영상을 가져왔습니다. 위의 영상처럼 스크롤을 내려도 헤더가 고정되어 있게 구현할 것입니다. - 2. position: sticky header{ position: sticky; } ① sticky 방법은 간단합니다. 태그에 sticky만 넣어주시면 됩니다. [position:sticky;] 입니다. header{ position:sticky; top:0; } ② top 설정 혹시 sticky를 넣었는데 여전히 헤더가 상단에 있지 않고 올라가나요? 중요한 것이 하나 남았습니다. 바로 위치를 설정해 주는 것입니다. 다른 position 속성과 마찬가지로 top 위치를 설정해 주시면 그 위치에 붙어있습니다. 주..

coding/html + css · 2023. 8. 4. 07:30

[css] position을 이용해 반투명 배경 올리기

안녕하세요. 플입니다. 오늘은 position 활용법을 알아보겠습니다. position을 이용해 포토샵의 레이어처럼 층을 하나 올려 반투명한 배경을 만들어 볼 것입니다. 이런 식으로 이미지 위에 단색이지만 약간 투명도가 있어 밑의 이미지가 보이는 모습을 만들 것입니다. 1. 기본 재료 준비 기본적으로 html에서 이미지와 위에 올릴 요소 한 가지가 있어야 합니다. 제 코드는 이런 식으로 되어있습니다. 태그에 배경을 주어서 위로 올려줄 예정입니다. 2. position position:relative; 우선 relative를 이용해 레이어처럼 층을 만들어줍니다. relative란 '관련 있는'이라는 영어단어로 position값을 준 요소의 부모 태그와 관련이 있다고 생각하면 쉽습니다. 위치가 부모 태그의 ..

coding/html + css · 2019. 9. 26. 07:30