본문 바로가기
웹코딩 배우기/· CSS

메뉴바 고정 - position: fixed;

by 닐기 2022. 7. 6.

 

position: fixed;를 사용하여 왼쪽 메뉴바를 고정한다. 그럼 오른쪽 내용 영역만 스크롤된다.

 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

	ul {
		list-style-type: none;
		background-color: #ccc;
		width: 25%;
		padding: 0;
		margin:  0;
		position: fixed;
		height: 100%;
		overflow: auto;
	}

	li a {
		text-decoration: none;
		display: block;
		color: #000;
		padding: 8px 15px 8px 15px;
		font-weight: bold;
	}

	li a.job {
		background-color: tomato;
		color: #fff;
	}

	li a:hover:not(.job) {
		background-color: #333;
		color: #fff;
	}

</style>

<ul>
	<li><a class="job" href="#">직업</a></li>
	<li><a href="#">패스파인더</a></li>
	<li><a href="#">아델</a></li>
	<li><a href="#">호영</a></li>
	<li><a href="#">히어로</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>왼쪽 사이드바 메뉴를 특정 위치에 고정합니다.</h2>
  <h3>position : fixed; 태그를 사용합니다.</h3>
  <p>overflow: auto; 를 사용하여 영역을 벗어나는 부분의 스크롤 유뮤를 자동으로 합니다.</p>
  <p>화면을 스크롤해보면 왼쪽 메뉴바는 그대로 있고 오른쪽 내용만 스크롤됩니다.</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>

</div>

</body>
</html>

 

 

참고 글

nilgi.tistory.com/455

 

CSS position

position: static; 특정 지정 값에 영향을 받지 않고 문서의 정상적인 흐름에 따라 배치된다. position: relative; top, right, bottom, left 값에 따라 위치가 변경된다. position: fixed; top, right, bottom,..

nilgi.tistory.com

nilgi.tistory.com/456

 

CSS overflow

overflow 내용이 지정한 영역을 벗어났을 때 어떻게 처리할 건지 설정한다. 내용을 잘라낼지 스크롤바를 만들것인지. 뭐 이런거? overflow: visible; / 기본. 넘치는 내용이 외부에 표시된다. overflow: hidde

nilgi.tistory.com

반응형

댓글4