• Q&A
  • 회원가입
  • 로그인

[selector] CSS - element+element 인접선택자 ★ - 인접형제요소 (요소선택자, IE7) + 스티키메뉴 (Sticky Menu)

3,290  
CSS 인접 선택자 (요소+요소) : CSS2 (익스7 이상 주요 브라우저 지원)
※ 인접 선택자 = 이웃 선택자  : 번역자에 따라 다르게 표현. ㅡㅡ;;

element+element 정의

지정요소 바로 다음에 인접한 요소에만 스타일 줄 때 사용

 


 
1. 
A + B 라고 할 경우, A 요소와 동위로 바로 인접하는 B 요소 선택
 
2.
+ 기호 앞뒤로 빈 공간이 있어도 되고, 없어도 상관 없음. 
(예) 요소+요소 (O) , 요소 + 요소 (O)


3.
스티키메뉴 만들 때 유용.


4.

IE7 이상 주요 최신브라우저 지원.
 

 
 
element+element 예제1
   
<style>
h1 + p {color: red;}
</style>
 
<p>홈페이지 무료 제작 강의</p>
<h1>홈짱닷컴 (homzzang.com)</h1>
<p>HTML 무료 강의</p>
<p>CSS 무료 강의</p>
<div>
   <p>JAVA 무료 강의</p>
</div>
 
※ h1 태그 바로 뒤 p요소만 스타일 주기.
 
element+element 예제2
 
<style>
div+p {color:red;}
</style>
 
<p>글 내용1</p>
<div>
    <p>글 내용2</p>
    <blockquote><p>글 인용</p></blockquote>
</div>
<p>글 내용3</p>
 
특정 태그 요소 (예:div)와 같은 레벨의 바로 뒤 (예: 글 내용3에 사용된 p) 선택.

즉, div 태그 이전에 있는 p태그나, div 안의 자손 p태그 등엔 적용 안 됨. 

 

element+element 응용 - 상단고정메뉴 (= 스티키메뉴 = Sticky Menu)


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

  margin: 0;

  font-size: 28px;

  font-family: Arial, Helvetica, sans-serif;

}


.header {

  background-color: #f1f1f1;

  padding: 30px;

  text-align: center;

}


#navbar {

  overflow: hidden;

  background-color: Tomato;

}


#navbar a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}


#navbar a:hover {

  background-color: #ddd;

  color: black;

}


#navbar a.active {

  background-color: #4CAF50;

  color: white;

}


.content {

  padding: 16px;

}


.sticky {

  position: fixed;

  top: 0;

  width: 100%;

}


.sticky + .content {

  padding-top: 60px;

}

</style>

</head>

<body>


<div class="header">

  <h2>홈짱닷컴</h2>

  <p>Homzzang.com</p>

</div>


<div id="navbar">

  <a class="active" href="javascript:void(0)">Home</a>

  <a href="javascript:void(0)">HTML</a>

  <a href="javascript:void(0)">CSS</a>

  <a href="javascript:void(0)">JS</a>

</div>


<div class="content">

  <h3>홈페이지 제작관리 + 서버관리</h3>

  <p id='demo'></demo>

</div>


<script>

window.onscroll = function() {homzzang()};


var navbar = document.getElementById("navbar");

var sticky = navbar.offsetTop;


function homzzang() {

  if (window.pageYOffset >= sticky) {

    navbar.classList.add("sticky")

  } else {

    navbar.classList.remove("sticky");

  }

}

  

 var text = "";

 var i;

 for (i = 1; i <= 30; i++) {

    text += i + ". 홈짱닷컴에 놀러오세요<br>";

    document.getElementById("demo").innerHTML = text;

 }

</script>


</body>

</html>


결과보기

관련글: BS affix

 


방문자 수

오늘 146
어제 1,599
최대 2,271
전체 809,310
Since 2012