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..

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

각 속성의 개념 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 : ..

z-index 우선순위 규칙>>> 1. position 속성이 없는 태그들은 나오는 순서대로 쌓인다. 2. position 속성이 있는 태그들은 없는 태그들보다 위에 나오는 순서대로 쌓인다. 3. position 속성에 z-index까지 있다면 z-index가 큰 태그가 위에 쌓인다. 4. 하지만 z-index가 아무리 크더라도 부모 태그의 z-index가 더 우선이다. 5. z-index는 position이 relative거나 absolute여야 동작한다. 먼저 position이 static인 태그들이 나오는 순서대로 쌓이고, 그 위에 relative나 absolute인 태그들이 나오는 순서대로 쌓인다. See the Pen LYRQrmr by issue72y (@issue72y) on CodePen.

사용 예시 출처 > '카카오 AI 사이트 logo' 처음 개발자 도구에서 이미지를 가져 왔을 때 클래스명, fill, 제목 등등 사용자가 작성한 모든 것이 담겨 온다 kakaoi 필요한 부분만 수정, 다듬기(대부분의 로고 형태는 사이트에서 링크 되므로 a클래스 안에 넣어주자) 패스 부분 마저 가져오기 path는 svg 클래스 안에 포함되어 있어야 하는데, 패스 길이가 어마어마 하니 작업에 방해가 된다 그렇기 때문에 사용 하는 svg 이미지가 2개 이상 정도 되면 svg 클래스를 만든 후 따로 모아서 빼주는게 좋다 css 설정 html 입력이 끝났는데 이미지가 나오지 않을 때는 색상과 크기를 반드시 지정 해준다 (svg 이미지는 한계 없이 유연) /* 노말라이즈 */ body, ul, li { margin..