본문 바로가기

CSS

(7)
당신이 몰랐던 마진 상쇄(겹침)현상의 이유 들어가며 종종 블록 요소나 빈 요소의 마진이 겹쳐진 것처럼 사라지는 경우가 생긴다. 이는 마진 상쇄(margin collapsing)이라 부르는 현상으로, 가장 큰 한 가지 마진 값으로 합쳐지는 현상이다. W3C의 CSS 스펙를 찾아봐도 왜 이런 현상을 규정했는지에 대해 명확한 이유가 나타나지는 않는다. 그리고 대부분의 한국어 문서에서 마진 상쇄가 어떤 경우에 일어나는지와 해결책만이 적혀 있기에 "왜 마진 상쇄를 규정했는지"에 대한 궁금증을 해소하기에는 부족했다. 그러던 중 stackoverflow에서 이를 잘 설명 해준 멋진 글을 하나 발견했다. HTML과 CSS HTML은 Hyper Text Markup Language다. 그리고 기본적으로 HTML을 통해 만드는 것은 '문서'다. 지금은 게임을 비롯..
[CSS] img태그의 src를 css로 대체하는 방법 요약 CSS로는 HTML의 프로터피인 src 값을 바꿀 수 없다. 하지만 content 프로퍼티를 통해 가능하다. 들어가며 타 사이트의 아이콘을 바꾸고 싶어서 Stylus와 같은 확장 프로그램을 사용 중이었다. 하지만 이 글에서 언급했듯이 after 및 before로 가려줄 수가 없었고, JS Extension을 쓰고 싶은 마음은 없었다. 하지만 곧 해결책을 찾을 수 있었다. img 태그의 src를 CSS로 대체하는 방법 위와 같이 "content:url(a.jpg)" 속성을 추가 해주면 된다. 다음 글도 읽어보세요 커밋을 잘게 쪼개자 - 커밋은 언제 하는 것이 가장 좋을까? [리팩토링] 코드 숨기기, 가독성 좋은 코드 짜기 API는 인터페이스다 - 프론트 개발과 API await의 함정, 숨은 병목을 ..
[CSS] img태그에서 ::after 및 ::before 안되는 이유 요약 닫는 태그가 없는 경우에는 ::after와 ::before와 같은 가상요소(Pseudo-element)를 사용할 수 없다. 들어가며 Stylus extension으로 나만의 커스텀을 하다가 img를 replace하기 위해 :after를 사용하려고 했었다. Chrome 개발자도구에서는 분명 :after가 잘 나타나지만, 랜더링 되지는 않았다. img 태그는 ::after와 ::before를 쓸 수 없다 after와 before같은 가상요소(Pseudo element)는 기존의 컨텐츠의 앞뒤에 덧붙여서 추가한다. 그러나 img 태그는 컨텐츠를 담을 수 없기 때문에 추가 할 수가 없다. ::after와 ::before를 대신하는 방법 after와 before를 쓰는 목적은 무엇인지가 중요하다. 일반적인 ..
[CSS] em과 rem, 제대로 알고 사용하자! em과 rem em과 rem은 CSS 상대 단위 중 하나이다. 절대 단위인 px와는 다르게 동작한다. 상대 단위와 절대 단위의 차이는, 현실에서 km²와 여의도 x배의 면적 차이와 동일하다. 마찬가지로, 1px는 어느 곳에서나 1px이지만, 1em이나 1rem은 상황에 따라 달라질 수 있다. em은 요소의 글꼴 크기 1em은 요소의 글꼴 크기다. 1em은 해당 element의 font-size 값과 동일하다. element의 글꼴 크기가 12px이면, 1em은 12px이 되고, 2em은 24px이 된다. rem은 루트 요소의 글꼴 크기 1rem은 루트 요소의 글꼴 크기다. 1rem은 루트 요소(일반적으로 태그) font-size 속성의 값과 동일하다. 일반적으로는 브라우저에서 지정한 값인 16px을 나타..
웹 폰트에서 EOT, TTF 파일을 배제해야하는 이유 필요한 웹폰트 파일은 WOFF2 뿐 폰트 파일을 사용할 때는, 원칙적으로는 WOFF2만 쓰는 것이 좋고, IE에 대한 호환이 필요한 경우에 WOFF파일을 사용하면 된다. EOT파일은, 100%라고 표현할 수 있을 정도로, 모든 경우에 필요하지 않다. EOT 파일이 필요한 경우는 IE 8 이하의 브라우저를 지원해야하는, 아주 극단적인 레거시 페이지에서만 필요하다. 물론 그러한 페이지에서 웹 폰트를 사용해서 꾸미는 경우는 거의 없을 것이다. TTF 파일도 필요 없다 TTF파일도 마찬가지로, 굳이 제공해줄 필요가 없는 것이, 모든 브라우저에서 WOFF와 WOFF2 형식을 지원하고 있다. IE를 지원해야하는 경우라도, WOFF를 쓰는 것이 옳다. TTF는 압축되지 않은채로 제공되기 때문에, 사용자 경험에 악영향..
[CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리 div와 같은 block 요소와는 다르게, span은 inline요소이기 때문에, text-overflow: ellipsis 속성을 줘도 제대로 동작하지 않는다. 이러한 경우에는 span 요소에 display: inline-block이나 display: block 을 추가하여 block 요소로 변경하면 정상적으로 동작한다.
깔끔한 모던 날씨 카드 디자인 HTML과 CSS만 이용해서 만든 날씨 카드 샘플이다. 영감은 https://story.pxd.co.kr/1379 그래프는 생각보다 어렵기 때문에(이미지가 아니면 좀 복잡하다) 제외했다. 생각보다 깔끔하게 디자인이 나왔다.