우당탕탕 개발일기

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..

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

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

📓 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..

1_ text-align: center; vertical-align: middle; 2_ display: flex; align-items: center; justify-content: center; 간단한 추가 버튼을 만들 때 두 개과 동일한 효과를 내는 것 확인. padding 값 주의!