데스크탑의 개발자 도구에서 가상 모바일 기기로 테스트하면 레이아웃이 깨지지 않는데, 실제 모바일에서 테스트하면 잘되지 않는 경우가 있다. 이러한 이유는 크롬 브라우저 기준으로 상단바(주소창)이 스크롤하면서 자꾸 움직이기 때문이다. 상단바가 움직이면 레이아웃이 맞다가도 틀어지는 경우가 있다. *{ margin: 0; padding: 0; box-sizing: border-box;}html, body{ scroll-behavior: smooth; width: 100%; height: 100%; position: fixed; /* for mobile to fix screen and prevent address bar moving */ inset: 0; overf..

index.html 파일을 위와 같이 작성하자! body{ margin: 0; padding: 0; background-color: #0e1111; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .window{ width: 500px; height: 300px; background-color: wheat; transition: .5s; } .window:hover{ width: 100vw; height: 100%; } style.css 파일을 위와 같이 작성하자! 핵심은 슬라이드 이미지를 감싸고 있는 컨테이너인 body 요소에 플럭스박스를 적용하고 justify-content 와 alig..

* position: relative - 자신의 현재위치를 기준으로 상대적으로 배치 실습을 위하여 아래와 같이 코드를 작성한다. static relative .container{ background-color: #ccc; } .static, .relative{ width: 200px; height: 200px; } .static{ background-color: yellowgreen; } .relative{ background-color: blue; } .container{ background-color: #ccc; } .static, .relative{ width: 200px; height: 200px; } .static{ background-color: yellowgreen; } .relative{ ..

https://seokzin.tistory.com/entry/SCSS-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC [SCSS] SCSS 문법 정리 프로젝트 규모가 커지고 복잡해질수록 순수 CSS의 한계를 많이 느끼게 됩니다. 그래서 SCSS나 CSS-in-JS의 도입은 사실상 필수가 되었습니다. 이 글을 통해 CSS의 문제점을 개선한 SCSS에 대해 알아보 seokzin.tistory.com 7. 함수 (Function) 박스 1 박스 2 박스 3 $max-width: 100%; // 부트스트랩 그리드 시스템처럼 12개의 컬럼 중에서 특정 비율만큼 가져감 @function columns($number: 1, $columns: 12){ @return $max-width * ..

컨테이너 container 마진이 적용된 컨테이너 (반응형) 이미지 img-fluid 반응형 이미지 rounded-circle 둥근 이미지 텍스트 text start 좌측정렬 text end 우측정렬 fw-bold 볼드체 fs-1 폰트크기 display-4 fs-1 보다 큰 글씨체 Small 작은 텍스트 text-info 텍스트 색상 text-warning 텍스트 색상 text-dark 텍스트 색상 text-muted 텍스트 색상 (회색) text-center text-sm-start 기본적으로는 텍스트를 중앙에 정렬하고 디바이스 크기가 좀 더 커지면 왼쪽으로 정렬함 배경색 bg-dark 배경색 설정 bg-opacity-75 배경색 투명도 설정 opacity-50 투명도 50% 버튼 btn-info 버튼..

https://stackoverflow.com/questions/42273135/why-does-absolute-positioned-element-is-displayed-over-a-static-one Why does absolute positioned element is displayed over a static one? I know absolute positioning breaks normal flow but since the order in HTML is absolute element first then static one, I was expecting it to be reflected in the display order too. .absolute { stackoverflow.com 이미지 텍스트..

컨테이너에 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..

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; }

index.html 에 위 코드를 추가하자! .track.earth{ width: 400px; height: 400px; border-radius: 50%; border: 2px solid #ccc; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; } .sun{ width: 100px; height: 100px; background-color: orange; border-radius: 50%; } 위와 같이 하면 하나의 궤도가 생기고 태양이 아래와 같이 궤도의 중심에 위치하게 된다. 하지만 다른 궤도도 마찬가지로 원의..

Loading ... index.html 파일에 로딩 애니메이션을 보여주기 위한 div 요소를 추가한다. .loading{ width: 200px; height: 200px; border: 15px dotted orange; border-radius: 50%; border-top: 15px dotted white; border-right: 17px dotted orange; border-bottom: 20px dotted orange; border-left: 30px dotted orange; /* loading 의 부모요소 중에서 position 이 static 이 아닌 */ /* 요소의 위치를 기준으로 loading 의 위치가 결정됨 */ position: absolute; left: 50%; top..