728x90 CSS 314 [CSS] background, position 속성 정리 줍줍 position static 기본값 relative top, left, right, bottom을 이용하면 쉽게 컨텐츠를 원하는 만큼 옮길 수 있다. absolute의 시작 위치를 잡아주는 용도(부모 위치 기준)로 쓰이는 경우가 많다. absolute 페이지 레이아웃에서 자리 차지를 하지 않고 둥둥 떠있는 상태이다. 부모를 기준으로 상대적으로 위치한다. 부모중에 position으로 위치한 요소가 없다면 body를 기준으로 한다. 💡 absolute를 먹인 요소가 block 요소일지라도 width: 100%가 아니다. fixed 문서 흐름에서 제거하고 페이지 레이아웃에서 자리 차지를 하지 않고 둥둥 떠있는 상태이다. 스크롤을 내려도 항상 브라우저상의 그 위치에 고정 되어있다. 💡 fixed를 먹인 요소가 .. 2022. 3. 29. grid 잘 정리된 곳 https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com 2022. 2. 26. css 부트스트랩 커스텀 안 먹힐땐 !important .nav { margin-bottom: 100px; } 안먹히다가 .nav { margin-bottom: 100px!important; } 먹힘 https://ddorang-d.tistory.com/18 [CSS]CSS가 안먹을때 해볼만한 것들 유지보수를 하다 보면 내가 정확히 쓴 것 같은데 CSS가 안 먹힐 때가 많다. 그럴 때 해볼 만 것들을 적어보려고 한다. CSS가 안먹을 만한 이유 01. 캐시문제 02. 그전에 쓰였던 CSS와 충돌 03. 겹쳐서 ddorang-d.tistory.com 참고싸이트 2022. 1. 30. 부트 스트랩 SCSS 사용해보기 npm init -y 하면 package.json 생성 npm install bootstrap@next 하니 에러가 떠서 npm ERR! code ETARGET npm ERR! notarget No matching version found for bootstrap@next. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Son\AppData\Roaming\npm-cache\_logs\20.. 2022. 1. 29. 모달 작동원리 (아이콘) (모달창) data-toggle=“modal” : 자바스크립트에 의해 작동하므로 이 속성을 추가해야 합니다. (이 속성은 토글 역할을 합니다. 즉, 클릭하면 팝업창이 나타나고 다시 이 버튼을 클릭하면 사라집니다.) data-target=“#myModal” : 버튼을 클릭했을 때 열리는 대상 모달창의 id값을 넣어줍니다. class=“modal fade” : .modal은 포지션을 정하기 위한 것이므로 나타나는 위치를 수정하려면 이 선택자에 대해 스타일을 재설정하면 됩니다. .fade는 창이 나타날 때 페이드 효과를 주기 위한 것입니다. ass=”modal-dialog“ : 실제 모달 창의 너비나 높이를 수정하려면 이 선택자의 스타일을 수정하면 됩니다. class=”close“ : .close는.. 2021. 12. 24. 인라인 스타일 시트 2021. 12. 24. readonly(읽기 전용, 쓰기 미활성화, 값 전달)와 disabled(읽기전용, 쓰기 미활성화, 값 미전달) 차이 disabled input값 전송하기 https://mmozzi.tistory.com/20 readonly(읽기 전용, 쓰기 미활성화, 값 전달)와 disabled(읽기전용, 쓰기 미활성화, 값 미전달) 차이 https://aljjabaegi.tistory.com/251 2021. 12. 23. 이전 1 2 다음 728x90
