JuinThyme

인스타그램처럼 페이지를 이동을 하면 스크롤이 해당 페이지의 첫 페이지의 위쪽 포인트만큼 이동이 되는 걸 본 적이 있을 겁니다. 이 기능을 사용하기 위해서는 fullpage.js 오픈 소스를 이용을 하는데, 상업용으로 이용할 경우엔 비용이 생깁니다. Javascript로 처리를 했었던 스냅 처리를 CSS로 할 수 있게 속성이 추가가 됐습니다. 그 속성은 scroll-snap-type 속성입니다. scroll-snap-type MDN에 따르면 scroll-snap-type 속성은'scroll-snap-type CSS 속성은 스냅 포인트가 있는 경우 스크롤 컨테이너에 스냅 포인트가 얼마나 엄격하게 적용되는지 설정합니다.' 라고 설명되어 있습니다. 스크롤은 좌우 축인 x축, 위아래 축인 y축 기준으로 스크롤을 ..

IT/응용 2021. 8. 4. 13:33

트랜지션이란 웹 요소의 배경 색이 바뀌거나 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것을 말한다. 속성 transition-property : 트랜지션 대상을 설정합니다. transition-duration : 트랜지션 진행 시간을 설정합니다. transition-timing-function : 트랜지션 속도 곡선을 설정합니다. transition-delay : 트랜지션 지연 시간을 설정합니다. transition : transition-property와 transition-duration, transition-timing-function, transition-delay 속성을 한꺼번에 설정한다. transition-property 속성 - 트랜지션을 적용할 속성 지정하기 트랜지션을 어느 속..

IT/HTML 및 CSS 2021. 5. 23. 14:39

transform-origin 속성 - 변형 기준점 설정하기 transform-origin 속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다. transform-origin: | initial | inherit; 속성 : 원점 기준의 x 좌푯값으로 길이 값이나 , left, center, right 중에서 사용할 수 있다. : 원점 기준의 y 좌푯값으로 길이 값이나 , top, center, bottom 중에서 사용할 수 있다. : 원점 기준의 z 좌푯값으로 길이 값만 사용할 수 있다. perspective, perspective-origin 속성 - 원근감 표현하기 perspective 속성은 3차원 변형에서 사용하는 속성으로 원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡..

IT/HTML 및 CSS 2021. 5. 17. 13:11

2차원 변형과 3차원 변형 CSS3를 이용하면 스타일 시트 소스만으로 간단히 이미지를 변형할 수 있다. 이미지의 변형은 2차원 변형과 3차원 변형으로 나뉜다. 2차원 변형은 웹 요소를 변형 시킬 때 단순히 수평이나 수직으로 이동하고 회전한다. 3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해 변형킨다. transform과 변형 함수 이미지를 회전 시키거나 이동하는 등 웹 요소를 변형하려면 transform 속성을 사용한다. 2차원 변형 함수 2차원 변형 함수는 익스플로러 9를 비롯한 이전 브라우저를 위해 -webkit-과 -moz-, -ms-, -o- 등의 브라우저 접두사를 붙여야 한다. translate(tx, ty) : 지정한 크기만큼 x축과 y축으로 이동한다. translateX(tx) : ..

IT/HTML 및 CSS 2021. 5. 16. 14:15

사용 동작에 반응하는 가상 클래스 사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다. :link 가상 클래스 선택자 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. :visited 가상 클래스 선택자 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용한다. :hover 가상 클래스 선택자 웹 요소 위로 마우스 커서를 올려놓을 때의 스타일을 지정한다. :active 가상 클래스 선택자 링크나 이미지 등 웹 요소를 활성화했을 때 스타일을 지정한다. :focus 가상 클래스 선택자 웹 요소에 초점이 맞추어졌을 때의 스타일을 지정한다. 메뉴 1 메뉴 2 메뉴 3 메뉴 4 실..

IT/HTML 및 CSS 2021. 5. 13. 12:36

[속성] 선택자 - 지정한 속성에 스타일 적용하기 지정한 속성을 가진 요소를 찾아 스타일을 적용할 수 있다. 메뉴 1 메뉴 2 메뉴 3

IT/HTML 및 CSS 2021. 5. 12. 18:58

하위 선택자 하위 선택자(descendant selector)는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것으로 '자손 선택자'라고도 한다. 자식 요소 뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. section p { color: blue; } section은 상위 요소고, p는 section 요소의 하위 요소다. 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. css에 section 태그의 태그의 아래 모든 요소의 글자 색상이 파란색으로 적용되게 했다. 그러면 태그는 적용된 속성이 없기 때문에 default 값인 검은색이 표출된다. 실행 화면 자식 선택자 - 자식 요..

IT/HTML 및 CSS 2021. 5. 11. 18:48

empty-cells 속성 - 빈 셀의 표시 여부 지정하기 border-spacing: separate를 사용해 셀들을 분리했을 경우, empty-cells 속성을 사용해 내용이 없는 빈 셀 들의 표시 여부를 지정한다. empty-cells: show | hide 속성 show : 빈 셀 주위에 테두리를 그려 빈 셀을 표시한다. 기본 값이다. hide : 빈 셀에 테두리를 그리지 않고 비워 둔다. 과일 사과 바나나 야채 토마토 채소 상추 width, height 속성 - 표 너비와 높이 지정하기 표와 셀의 너비를 지정하지 않으면 셀 안의 내용이 표시될 만큼만 표시된다. 그래서 width와 height 속성을 이용해 넓이와 높이를 지정하면 지정한 크기가 표출된다. 과일 사과 바나나 야채 토마토 table-..

IT/HTML 및 CSS 2021. 5. 7. 17:58