WHAT I LEARNED/HTML&CSS 10

[CSS] position: absolute / 부모 요소 높이 안잡히는 경우 / 자식 요소 겹칠 때 (야매)해결방법

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

[CSS] 드래그 방지

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만 넣었다.

비활성화(disabled) input 체크박스 CSS 적용하는 방법 (Feat. SCSS)

기존 체크박스, 체크되었을 때 체크박스, 비활성화일때 체크박스의 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: ..

[CSS] 기본 css 초기화 하기 (reset.css)

html로 작업할 땐 예쁘게 다듬는건 오로지 css로 작업하는게 좋대서 margin뿐만 아니라 heading 태그에 지정된 css 등 기본으로 세팅된 css를 초기화해주는 reset.css을 적용해보기로 했다. https://www.jsdelivr.com/package/npm/reset-css로 접속한다. jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for product..

[HTML] JSX에서 공백(띄어쓰기) 넣기

스페이스바를 아무리 뚜드려도 먹히지 않는 띄어쓰기.. 띄어쓰기를 하는 방법은 따로 있었다! 바로 &nbsp 라는 태그를 사용하는 것! &nbsp에서 nbsp는 'Non-breaking Space'라는 뜻으로 만약 여러개의 공백을 표현하고 싶다면 원하는 갯수만큼 를 추가해 주면 된다. 2칸과 1칸 띄우기! 📍 참고 https://hianna.tistory.com/299 [HTML] 공백 삽입하기 (띄어쓰기) HTML에서 공백(스페이스, 띄어쓰기) 삽입하기 HTML태그에 아무리 키보드로 여러 개의 스페이스를 입력해도 브라우저에는 하나의 공백만 표현 된다. 그렇다면, 화면에 여러개의 공백을 표현하기 hianna.tistory.com

[CSS] background-image로 사진 넣을 때 비율 맞추기

- 비율을 맞춰서 넣으려면 background-size: contain, div 에 꽉차게 넣으려면 background-size: cover - div 사이즈보다 이미지가 작은 경우, 이미지가 반복되므로 한 장만 보여주기 위해 background-repeat: no-repeat 📍 참고 https://multifidus.tistory.com/182 일정한 사이즈 div 안에 이미지 넣기 (잘리면서 꽉차게, 잘리지 않고 축소) +) 이번 프로젝트를 진행하면서 퍼블리싱 부분에서 가장 애를 먹었던 부분. 혹시 제가 놓친 점이나 더 좋은 방법, 다른 방법이 있다면 얼마든지 알려주시기 바랍니다. 1. 잘리면서 꽉차게 * 상위 d multifidus.tistory.com

[CSS] position

📓 fixed와 sticky 차이 📍 https://ordinary-code.tistory.com/106 [css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기 스마트폰이 요즘 많이 보급되면서 PC 홈페이지의 레이아웃 중 스크롤이 강조된 레이아웃들이 많이 등장하고 있다. 그중 스크롤을 내리면서 나타나는 애니메이션 효과도 점점 발전하고 있다. 오 ordinary-code.tistory.com 📓 relative와 absolute의 차이 - 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다. 이제 top, right, bottom, left 속성을 사용해 위치 조절이 가능. 각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, r..