Web Programming/HTML & 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을 나타.. [CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리 div와 같은 block 요소와는 다르게, span은 inline요소이기 때문에, text-overflow: ellipsis 속성을 줘도 제대로 동작하지 않는다. 이러한 경우에는 span 요소에 display: inline-block이나 display: block 을 추가하여 block 요소로 변경하면 정상적으로 동작한다. CSS) 한가운데 div 배치하기(가로세로중앙정렬) 예를 들어 아래와 같은 코드가 있을 때,article을 중앙에 배치하기 위해 flex를 사용한다면, .container의 스타일을 다음과 같이 설정할 것이다..container{ display:flex; justify-content:center; align-items:center; }그러나 이는 실패한다.가로로는 정렬이 되었지만, 세로로는 위에 붙어있다. 세로로도 중앙 정렬을 해야 한다.그렇다면 어떻게 하면 article을 한가운데에 배치할 수 있을까?한줄만 추가해주면 된다..container{ display:flex; justify-content:center; align-items:center; height:100vh }vh는 viewport height의 약자이다.이제 .container는 사용자가 .. CSS에서의 vh와 vw vh : Viewport Heightvw : Viewport Width 예를 들어 화면을 꽉 채우고 싶을 때(Content의 넓이가 100%가 안되더라도) width: 100vw;height: 100vh; 로 하면 보이는 화면의 100%로 된다.즉 1vw와 1vh는 각각 가로 1%와 세로 1%이다. 이전 1 다음
