CSS

Let's Conquer CSS Margin Collapse

마진 병합현상 (Margin Collapsing) 인접하는 블록요소의 상 하단의 마진이 한쪽으로 병합되는 현상이다.(상쇄,겹침 등등 다양하게 불린다.) 때문에 마진 10+10이 =10이 되거나, 15+10은 15가 되는(더 큰 쪽의 마진값으로 병합) 원치 않는 상황이 발생된다. 하지만 알고보면 마진병합현상은 CSS가 의도적으로 만든 기능이다. 상하단 마진이 병합되지 않고 둘 다 적용이 된다면 상대적으로 다른곳들에 비해 그 부분만 마진이 너무 두꺼워지기 때문에, 디자인이 더 안정적으로 보일 수 있도록 설계된 것이다. 일단은, 마진 병합은 우리를 도와주는 이로운 현상이다라고 이해하자. 마진병합현상이 일어날 수 있는 조건 인접해있는 block 요소끼리만 일어난다. 상하단만 해당사항이다. 일단 아래와 인접해있는..

HTML과 CSS로 감성달력 만들기.

URL https://koreanhamster.github.io/calendar/4:5/index.html 소스코드 https://github.com/Koreanhamster/calendar HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 9..

How to move bullet points in css?

부딪친 문제 li tag를 사용하여 Bullet이 적용되었는데, 왼쪽으로 치우져져 있었다. 이를 해결하려 css에서 li tag에 padding값을 주었으나, 결과는 Bullet들은 그대로 있고 글만 패딩값이 적용되었다. li { padding-left: 20px; } 해결방법 모든 li tag에 list-style-position Property를 inside로 지정해주었다. 아래는 검색했던 링크. https://stackoverflow.com/questions/49906604/how-to-move-bullet-points-in-css

이종찬님 특강 - 행복한 CSS냐 망한 CSS냐.

css는 복잡하다. 진입장벽이 쉬울 뿐, 간단한 홈페지이 하나를 만들 때에도 이걸 건들면 저게 삐걱, 저걸 건들면 이게 삐걱.. #망한다 하지만 기초를 탄탄하게, 또 꾸준히 수련을 통해서 #행복한 CSS를 만들어 줄 수 있다. css 순서 가이드 전체적인 덩어리를 먼저 나눠라. 컨텐츠부터 막 서둘러 넣지말자. 구분을 위해 각각 시각적으로 힌트를 줘야한다. 백그라운드컬러를 줌으로서 이 요소가 어떤 공간을 차지하고 있는지 쉽게 확인가능하거나, 이미지가 들어갈 곳에는 가상의 이미지를 미리 넣어줄 수도 있다. 기본 레이아웃 관련 스타일만 짠다. 안에 내용물을 막 넣기 이전에 공간부터 마련한다. 기본 margin / padding / width을 설정해주고, height 는 왠만하면 오토로 두는게 행복한 상황이다..