우당탕탕 개발일기

오늘도 폭풍 작업을 하던 중.... 맞닥뜨린 css 문제... A와 B는 한 div 안에 묶여있어야 하면서 A는 가운데 정렬, B는 왼쪽 정렬이 되어야하는데 문제는 B의 시작점이 가운데 정렬된 A의 시작점과 동일해야한다는 것이었다. 제일 첫번째 방법은 B에 absolute를 먹이는 방법이었다. 하지만 적용하니, 붕 뜨면서 A가 B의 height를 인지하지 못했다. position이 absolute가 되면 float를 적용한 것처럼 공중에 붕 떠서 부모 요소가 자식 요소의 height를 인지 못한다고 한다. float를 사용하는 경우에는, clear: both를 이용하여 해결하는 방법이 있었지만, float를 쓰지 않았기도 했고 clear를 적용해도 내가 원하는 방식으로 결과물이 나오지 않았다. 찾아보니 ..

body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } 드래그를 전체적으로 방지하고 싶다면 body 태그에 해당 css 코드를 넣어주면 드래그가 막히게 된다. 나는 특정 페이지(/특정 영역)에서는 드래그가 되어야만했는데, 이럴 땐 특정 페이지의 CSS에서 아래의 코드를 추가해주면 된다. { -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; } 나는 긁혀도 텍스트만 긁히기를 원해서 text를 넣어줬다. all을 넣어주니 선택하자마자 전체 선택이 돼서 text만 넣었다.

기존 체크박스, 체크되었을 때 체크박스, 비활성화일때 체크박스의 CSS가 전부 다른 상황이었다. 기존 체크박스와 체크되었을 때는 여기를 참고하여 쉽게 작성을 했지만, disabled는 css가 먹히지 않는 상황! @import "../../../asset/css/_variable.scss"; input[type="checkbox"] { &#check-box { display: none; + label { cursor: pointer; /* 기본 */ &::before { /* 생략 */ } } /* 체크했을 때 */ &:checked { + label::before { /* 생략 */ } } /* 여기 안됨!!!!!!! */ &:disabled { content: ""; background-color: ..

HTML 파일 작성시에 JS파일(외부 파일) 연결하려면 태그 안에서

padding-top을 %로 주면 해당 비율에 맞는 크기로 직사각형이 그려진다. 즉, 가로만 수정하면 가로 비율에 맞게 height 영역이 잡힌다.