프로그래밍/HTML/CSS (4) 썸네일형 리스트형 semantic-ui 테마 커스트마이징 하기 bootstrap 만 쓰다가 semantic-ui 가 예뻐서 사용해 봤습니다. 만족스럽더군요. 한참 프로젝트를 진행하다 폰트를 바꿀일이 있어 살펴보니 각 엘리먼트마다 font-family가 지정되어 있었습니다. 이걸 다 어떻게 바꾸지 하고 멘붕이 왔습니다. 다행히 Theming 이라는 테마변경 기능이 존재했습니다. 하지만 첨 해보는 gulp 도 알아야하고 뭔가 좀 복잡하더군요. 어떻게 꾸역꾸역 하긴 했는데 gulp build 에서 넘어가지가 않고 계속 멈춰 있습니다. ㅜㅜ 반나절을 씨름하다 검색에 검색을 해보니 semantic-ui 자체의 에러였습니다 ㅜㅜ 오래된 버그인데 고칠생각을 안하고 있더라구요. 해외유저도 열받았는지 fomantic-ui라고 Fork 한 프로젝트가 이것을 해결해 놨네요. 해외유저들.. 크기를 자동계산해 주는 border-box 속성 CSS 의 float 속성으로 html 레이아웃 코딩하다보면 미치고 환장할때가 있습니다 바로 border 나 margin, padding 등을 주려고 하면 1, 2 픽셀 차이 때문에 밑으로 떨어지곤 하는 짜증 솟구치는 현상때문이죠.#ads_1사실 이게 저한텐 너무나 큰 스트레스였습니다.예전 table 태그로 레이아웃 잡을때는 레이아웃에 대한 스트레스는 없었는데웹표준코딩으로 넘어오면서 레이아웃때문에 정말 엄청나게 스트레스를 받았습니다.1px, 2px 때문에 얼마나 열이 받았던지 웹프로그램을 때려치우기로 맘 먹은적도 있었습니다. 실제로 1년넘게 쳐다보지도 않았죠 ㅋㅋㅋ 암튼 마음 가다듬고 픽셀과의 싸움하면서 그냥 팔자려니 했는데....간단하게 해결하는 방법이 있었네요 ㅠㅠ바로 box-sizing 속성에서 b.. float:left 요소의 부모영역의 높이 차지하게 만들기 블록요소를 가로로 정렬하게 하기 위해서 보통 float:left 를 사용합니다.하지만 이때 float 적용한 요소가 부모의 영역 초과하게 될때 부모요소는 자식의요소의 높이를 반영하지 않아 참 괴롭습니다. 보통 아래와 같이 되지요.#ads_1 AAABBB AAA BBB 이걸 해결하는 간단한 방법이 있습니다.#ads_2 방법1)바로 부모의 overflow 항목을 hidden 으로 주기만 하면 됩니다.왜 그런지는 저도 이해가 잘 안되지만 결과적으론 잘 되니 만족스럽습니다. 결과는? 짜잔~ AAA BBB 방법2)부모 박스 뒤에 가상의 블록을 만들어 clear:both 시켜도 됩니다..parent:after{content:'';display:block;clear:both;}이렇게요.결과는 똑같습니다.방법1보다는 .. div 안에 이미지 중앙 정렬(가로, 세로) 하기 팁 div 안에 이미지 중앙 정렬(가로, 세로) 하기 팁 이미지 중앙정렬 방법이 많지만 여러가지 팁중에 이런 방법도 있습니다. 단, 이 방법은 이미지의 가로세로 높이를 미리 알아야 합니다. 이미지를 absolute 속성으로 주고 top과 left를 50%로 위치지정합니다. 그 후 (이미지크기 / 2) 의 값을 margin 에서 빼주는 방법입니다. #ads_1 #ads_2 #ads_3 이전 1 다음
