본문 바로가기

Web Programming

 (34)
당신이 몰랐던 마진 상쇄(겹침)현상의 이유 들어가며 종종 블록 요소나 빈 요소의 마진이 겹쳐진 것처럼 사라지는 경우가 생긴다. 이는 마진 상쇄(margin collapsing)이라 부르는 현상으로, 가장 큰 한 가지 마진 값으로 합쳐지는 현상이다. W3C의 CSS 스펙를 찾아봐도 왜 이런 현상을 규정했는지에 대해 명확한 이유가 나타나지는 않는다. 그리고 대부분의 한국어 문서에서 마진 상쇄가 어떤 경우에 일어나는지와 해결책만이 적혀 있기에 "왜 마진 상쇄를 규정했는지"에 대한 궁금증을 해소하기에는 부족했다. 그러던 중 stackoverflow에서 이를 잘 설명 해준 멋진 글을 하나 발견했다. HTML과 CSS HTML은 Hyper Text Markup Language다. 그리고 기본적으로 HTML을 통해 만드는 것은 '문서'다. 지금은 게임을 비롯..
자바스크립트로 만 나이, 연 나이, 세는 나이 한번에 구하기 연단위로 나이를 세는 경우, 만 나이, 연 나이, 세는 나이 이렇게 3가지가 나올 수가 있다. 각각 나이의 사용은 다음과 같다. 만 나이 : 법적 나이로, 법률 및 공문서 등에는 만 나이를 사용해야 한다. 연 나이 : 연도를 제외한 생일을 모를 때 사용할 수 있다. 또한 청소년 보호법 등에서, "n세가 되는 해의 1월 1일을 맞이한 사람"처럼 우회적으로 사용하기도 한다. 세는 나이 : 주로 일상 생활에서 사용하는 나이로, 연 나이에 한 살을 더한 값인 '햇수'다. 다음 함수는 2022년 4월 13일 기준으로 1970년 12월 31일생의 나이를 {age: 51, yearAge: 52, countingAge: 53}으로 반환한다. 아래 코드를 사용하면 나이 계산을 만나이, 연나이, 세는나이를 한번에 할 수 ..
[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을 나타..
React에서 잘못된 랜더링 조건문을 작성하는 경우 React에서 인라인 조건문을 삼항식 대신에, && 연산자를 사용하여 표현하는 경우가 있다. 위의 코드에서 의도 했던 동작은, 리스트의 길이가 0보다 클 때 Count를 반환하고, 0이면 아무것도 반환하지 않는 것이다. 하지만 실제 실행결과는 리스트의 길이가 0인 경우에, '0' 자체가 랜더링되게 된다. 분명 React에서는 일반적으로 거짓으로 취급되는 몇몇 값들이 반환될 경우에는, 랜더링을 하지 않는다. 그러나 숫자 0은 예외적으로 그대로 랜더링하게 된다. 그렇기 때문에, 위와 같은 코드를 사용해서는 안된다. 위의 코드는 ' > 0 '을 추가하여 의도한 대로 코드가 동작될 수 있도록 하였다. 이처럼 &&연산자를 사용하여 인라인 랜더링 조건문을 작성할 때에는 앞의 조건식이 boolean을 반환하도록 하는..
mobx 6 출시와 변경된 점 9월일에 mobx 6.0이 출시되었다. mobx 6 요약 ECMAScript에 적합한 라이브러리 & Proxy (모던브라우저) 및 비 Proxy (ES5) 동시지원 mobx가 데코레이터를 버리는 이유 가장 큰 이유는 데코레이터가 현재 표준으로 지정되어 있지 않은 점이다. 그렇기 때문에, 데코레이터를 사용하려면 복잡한 설정이 꼭 동반된다. 예를 들면 create-react-app로 프로젝트를 생성한 경우에는 순정상태로 사용할 수 없고 eject를 통해서 설정을 해줘야한다. 또한 비표준 데코레이터를 버림으로써, 추후에 등장할 표준 데코레이터(?)를 잘 지원할 수 있고, 당장은 비지원으로 인한 코드 용량 절감을 들 수 있다. mobx 6 With ES5 기존에는 IE를 지원하는 프로젝트에서는 mobx 5를 사..
[CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리 div와 같은 block 요소와는 다르게, span은 inline요소이기 때문에, text-overflow: ellipsis 속성을 줘도 제대로 동작하지 않는다. 이러한 경우에는 span 요소에 display: inline-block이나 display: block 을 추가하여 block 요소로 변경하면 정상적으로 동작한다.

티스토리툴바