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

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

6,776  
목차
  1. element+element 예제 - h1태그 바로 뒤 p요소만 선택
  2. element+element 정의
  3. element+element 구문
  4. element+element 예제 - div태그 바로 뒤 p요소만 선택
  5. element+element 응용 - 상단고정메뉴 (= Sticky Menu)

 

element+element 예제 - h1태그 바로 뒤 p요소만 선택

   
<style>
h1 + p {color: red;}
</style>
 
<p>홈페이지 무료 제작 강의</p>
<h1>홈짱닷컴 (homzzang.com)</h1>
<p>HTML 무료 강의</p>
<p>CSS 무료 강의</p>
<div>
   <p>JAVA 무료 강의</p>
</div>
 

element+element 정의


지정요소 바로 뒤 인접 요소만 선택.

 


 
1. 
A + B 라고 할 경우, A 요소와 동위로 바로 뒤 인접하는 B 요소 선택
※ (인접선택자 = 이웃선택자) 라고도 함.
 
2.
CSS버전: CSS2

 

3.

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

 

element+element 구문

 

element + element { css 선언; }

 

PS. + 기호 앞뒤 공백 유무 상관없음.
 

element+element 예제 - div태그 바로 뒤 p요소만 선택

 
<style>
div+p {color:red;}
</style>

<p>글 내용1</p>
<div>
    <p>글 내용2</p>
    <blockquote><p>글 인용</p></blockquote>
</div>
<p>글 내용3</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 , http://stickyjs.com/



찾아주셔서 감사합니다. Since 2012