Dlog

다음과 같이 스크롤 시 필더바를 상단에 고정시키고 싶다면?

.

.

position: sticky를 사용하면 된다.

sticky : 최초 relative속성과 같이 동작하다가 , 스크롤시 지정 지점에서 요소를 고정시킨다.

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

주의) position sticky가 동작안하는 이유

1. 자신의 부모 요소 범위 안에서만 동작 됨!!

2. 부모태그에 무조건 height 높이 값이 들어가 있어야함. (부모  height 높이 값만큼 sticky가 고정)

3. 부모요소중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안됨

- 끝 -

show/hide 

기본적으로 요소를 숨김/표시할 때, display를 사용

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

다만  display는 transition 속성에 영향을 받지 않기 때문에 자연스러운 애니메이션 구현이 안됨..!

fade in/fade out

자연스러운 fade in/fade out 애니메이션을 구현하려면 display 대신 visibility 사용

visibility는 transition  속성에 영향을 받음

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

opacity 속성만을 사용하여 요소를 숨기게 되면, 요소는 여전히 DOM에서 차지하는 공간을 유지하고, 마우스 클릭 등의 이벤트도 발생할 수 있음. opacity를 0으로 설정하면 요소가 완전히 투명해지지만, 요소의 공간과 이벤트는 그대로 유지 됨.

1. 기본 선택자

전체 선택자 (Universal selector)

html의 모든 요소에 적용

* {
    color: red;
}

타입 선택자 (Type selector)

특정 태그 이름을 가진 모든 요소를 선택

h1 {
	color: red;
}

클래스 선택자 (Class selector)

주어진 class명을 가진 모든 요소를 선택

.title {
	color: red;
}

ID 선택자 (ID selector)

id 속성에 맞는 요소를 선택

#title {
	color: blue;
}

속성 선택자 (Attribute selector)

주어진 속성을 가진 모든 요소를 검색 

특정 속성을 가진 요소 선택

• 문법: [attribute]
• 예제: title 속성을 가진 모든 요소를 선택

[title] {
    color: blue;
}

특정 값을 가진 속성을 선택

• 문법: [attribute="value"]
• 예제:  title 속성이 'example'인 요소를 선택

[title="example"] {
    color: blue;
}

특정 값을 포함하는 속성을 선택

• 문법: [attribute~="value"]
• 예제: class 속성에 'header' 단어가 포함된 요소를 선택

[class~="header"] {
    color: blue;
}

2. 복합 선택자 

일치 선택자 (태그와 클래스)

태그와 클래스를 동시에 만족하는 요소를 선택

<span class="orange">오렌지</span>

span.orange {
    color: red;
}

후손 선택자

자신이 포함하고 있는 모든 요소 중에서 선택

<div>
    <span class="orange">오렌지</span>
</div>

div .orange {
    color: red;
}

자식 선택자 

해당 태그의 자식 요소 중에서 선택

<ul>
    <li class="orange">오렌지</li>
</ul>

ul > .orange {
    color: red;
}

 인접 형제 선택자 

다음 형제 요소를 한 개 선택

<ul>
    <li class="orange">오렌지</li>
    <li>사과</li>
</ul>

.orange + li {
    color: red;
}

일반 형제 선택자 

다음 형제 요소를 모두 선택

<ul>
    <li class="orange">오렌지</li>
    <li>사과</li>
    <li>망고</li>
</ul>

.orange ~ li {
    color: red;
}