https://webty.tistory.com/178 JS : 스크롤 동적처리 1. scrollTo, scrollBy, offsetTop, scroll-behavior window.scrollTo( X, Y ) window.scrollTo({ X좌표, Y좌표 }) 문서의 지정된 위치로 스크롤을 이동합니다. * X, Y좌표는 문서의 왼쪽 상단부터 시작합니다. * X, Y좌표는 px 단위의 가로/세로 축입니다. * X 좌표의 webty.tistory.com https://www.javascripttutorial.net/javascript-dom/javascript-width-height/ Getting Width & Height of an Element in JavaScript In this tutorial..

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) developer.mozilla.org css 변수는 규모있는 웹사이트의 스타일 코드에서 반복해서 등장하는 값을 재사용할 수 있게 변수로 지정하는 것이다. 이렇게 하면 반복되는 동일한 값을 수정해야 할때 맨 상단에 지정한 변수값만 변경하면 되므로 유지..

컨테이너에 table 을 적용하고 아이템에 table-cell 을 설정하면 아이템들을 수평으로 나열할 수 있다. .container{ width: 100%; height: 70px; border: 3px solid #333; display: table; } .container .item{ width: 100px; height: 100%; background-color: #333; border: 1px solid orange; margin: 10px; display: table-cell; } 각 아이템의 너비도 다르게 지정이 가능하다. .container{ width: 100%; height: 70px; border: 3px solid #333; display: table; } .container .ite..

https://d2.naver.com/helloworld/854017 flex-grow 아이템의 확대에 관련된 속성 0 또는 자연수 기본값 0 0 : 컨텐츠크기로 고정 (늘어나지 않음) 1 이상 : 컨테이너를 완전히 채우도록 늘어남 아이템 .container { display: flex; height: 100px; border: 3px solid #333; } .item{ flex-grow: 0; margin: 5px; background-color:skyblue; } .container { display: flex; height: 100px; border: 3px solid #333; } .item{ flex-grow: 1; margin: 5px; background-color:skyblue; } 아래..

ci vision history 보고 싶은 탭을 클릭하세요! ci 첫번째 탭 vision 두번째 탭 history 세번째 탭 section{ display: none; } #ci:target{ display: block; } #ci:active #vision, #ci:active #history{ display: none; } #vision:target{ display: block; } #vision:active #ci, #vision:active #history{ display: none; } #history:target{ display: block; } #history:active #ci, #history:active #vision{ display: none; }

span::before{ content: '\e8b6'; }

* section 의 width: 120vw 로 잡은 이유 120vw 로 잡으면 이미지가 120% 정도 더 커진 상태에서 브라우저 너비를 줄이면 100%까지 이미지가 줄어든다. 이제 브라우저 창을 줄여도 100% 에서는 더이상 사진이 줄어들지 않는다. * body 의 overflow: hidden 으로 잡은 이유 앞서 section 의 width: 120vw 로 잡으면 가로 스크롤바가 생기기 때문이다. 처음 화면 로딩시 양쪽에서 텍스트가 중앙으로 모이는 텍스트 애니메이션 효과가 있습니다. Made fresh to order Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conse..

사용된 개념 1. border-box 2. 블록요소 인라인요소 3. 상태 연산자 4. 부정 연산자 5. 너비제한 max-width 6. 가로중앙 정렬 margin: auto 7. 텍스트 세로중앙 정렬 vertical-align: middle 8. 블러처리 backdrop-filter: blur() 9. 글래스모피즘 : background-color: rgba(255, 255, 255, .3) 10. 세로중앙 정렬 position: absolute left: 50% top: 50% transform: translate(-50%, -50%) 6. 클래스 간결하게 작성하고 레고 블록처럼 추가하기 Register FIRST NAME LAST NAME EMAIL PASSWORD check_box_outline_b..

This is some title Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas. Read more→ This is some title Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultr..

세로중앙 배치문제 status 의 동그라미(.dot)와 글자를 묶고 있는 부모요소에 position: relative 를 적용하고, 그 안의 동그라미와 글자에는 position: absolute, top: 50%, transform: translateY(-50%) 적용해서 세로 중앙에 배치하면 된다. display: inline-block 동작 안하는 문제 부모요소의 너비가 좁으면 자식요소에 아무리 display: inline-block 을 적용해도 수평정렬되지 않는다. 부모요소의 width 를 넓히면 된다. Users Table UI User Status Location Phone Contact Actions Kiran Acharya @kiranacharyaa Active Bangalore +91 98..