Web Study

position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성. 용어 정리 1. fixed 박스: position: fixed 속성을 적용한 박스. 2. sticky 박스: position: sticky 속성을 적용한 박스. 3. scroll 박스: overflow: auto 또는 overflow: scroll 속성을 적용한 가장 가까운 조상 박스. sticky 박스의 특징 1. sticky 박스는 top, right, bottom, left 속성이 필수. 2. fixed 박스는 뷰포트에 고정하지만 sticky 박스는 scrol..

display:none block 아주 사라지게 하는것! 보이지도 않고 해당 공간도 존재하지 않게 됨 visibility:hidden visible 보이지만 않고 해당 공간은 존재! width와 height값을 주었다면 그만큼 공간은 존재하게 됨 이미 알고 있는 사실임에도 불구하고 작업할 때 간혹 간과하는 부분인 것 같다. 덕분에 다시 한 번 정리도 하고 잊지말도록 하자!!!

line-height > 인라인 박스의 높이를 조정한다 Value normal : 브라우저는 해당 요소의 글꼴 크기를 기준으로 인라인박스의 높이를 계산하는데 그 값이 1.0에서 1.2사이가 될것으로 추측한다 실수 : 단위를 포함하지 않는 실수를 지정한다. 음수값은 사용할 수 없다 길이 : 인라인박스의 높이를 고정값으로 지정한다. 음수값은 사용할 수 없다 백분율 : 글꼴 크기에 대한 퍼센테이지로 지정한다. 음수값은 사용할 수 없다 출처 : opentutorials.org/course/718/3902(생활코딩)

사용전 자바스크립트를 불러오고 + fullpage스크립트를 불러온다 html의 구조는 다음과 같이 id 선택자 형태로 되어 있는걸 볼 수 있다 Some section Some section Some section Some section 첫번째 구역이나 구역의 첫번째 슬라이드 이외에 다른 곳을 출발점으로 정의하고 싶다면 처음 불러오시려는 구역과 슬라이드에 active 클래스를 추가 Some section 슬라이드를 추가하고 싶을 때 다음과 같이 html을 쓸 수 있다 Slide 1 Slide 2 Slide 3 Slide 4 초기 설정 > 자바스크립트 > 제이쿼리 셋팅 $(document).ready(function() { $('#fullpage').fullpage({ //options here autoSc..

각 속성의 개념 property : transition을 적용시킬 속성을 정한다 timing-function : transition의 진행 속도를 정한다 duration : transition의 총 시간을 정한다 delay : transition의 시작을 연기한다 initial : 기본값으로 설정한다 inherit : 부모 요소의 속성값을 상속 받는다 단축 문법시 css div { transition: ; } transition-timing-function 기본값 : ease ease : cubic-bezier( 0.25, 0.1, 0.25, 1 ) linear : cubic-bezier( 0, 0, 1, 1 ) ease-in : cubic-bezier( 0.42, 0, 1, 1 ) ease-out : ..