반응형 HTML+CSS36 z-index를 한 눈에 보여주는 - DevTools z-index z-index를 한 눈에 보여주는, DevTools z-index 웹 사이트를 만들다보면, 혹은 유지보수를 하다보면, 수 많은 작업자의 손을 거쳤던 웹사이트의 경우 z-index 속성이 어지럽게 얽혀 있는 경우가 많습니다. 왜냐하면, z-index를 999나 9999처럼 편의에 의해 높게 사용하는 경우가 발생하기 때문입니다. z-index를 대충 사용해서 결과물을 만드는 것은, 당장에는 당면과제를 쉽게 해결을 할 수 있는 방법이 될 수는 있을지 몰라도, 장기적으로 보면 내 뒤에 오는 미래의 작업자에게는 상당히 불편한 상황을 초래할 수 있는 일이기도 합니다. 웹문서에 적용된 z-index를 한눈에 볼 수 있는 방법이 없을까? 하는 지점이 생기게 마련인데요, 바로 이럴 때 DevTools z-index라는 .. 2023. 2. 6. [실무꿀팁] 반응형으로 백그라운드 이미지 넣기 1초컷 - Part 2 [실무꿀팁] 반응형으로 백그라운드 이미지 넣기 1초컷 - Part 2 초보시절 반응형 작업을 할 때, 글자들은 알아서 잘 흘러주기 때문에 비교적 다루기가 용이하지만, 이미지의 경우에는 떡하니 자리를 크게 차지하면서도 좀처럼 줄어들지 않아서 당황스러운 기억들이 납니다. 한달 전 즈음에, 웹문서에 이미지를 반응형으로 넣기 1초 컷이라는 주제로 포스팅을 했었습니다. 태그를 사용하면서 반응형으로 동작하도록 하는 아주 간단한 방법입니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말.. 2023. 2. 4. 웹문서에 구글 폰트(Google Fonts) 적용하기 웹문서에 구글 폰트(Google Fonts) 적용하기 웹문서를 만들다 보면 웹문서용으로 사용할 '웹폰트(web fonts)'라는 것이 필요합니다. 물론 웹폰트를 적용하지 않더라도, Windows나 Mac 등의 시스템에서 사용하고 있는 기본 폰트를 통해 글자들이 보여질 수는 있겠지만, 디자인 의도가 적용된 폰트를 제대로 반영하지 못하게 됩니다. CSS에서 세팅한 대로 적절한 폰트가 웹문서에 적용이 되지 않는 경우에는, 폰트가 차지하는 크기가 달라서 문단의 배치 등에도 좋지 않은 영향을 받을 수도 있습니다. 이처럼 웹문서 작성 시에는 분위기와 잘 어울리는 폰트를 사용하는 게 중요할 텐데요, 구글 폰트를 사용하게 되면 이와 같은 이슈를 아주 간단하게 해결할 수 있기 때문에, 거의 전세계의 웹 제작자들이 사용하.. 2023. 1. 31. 알면 득이 되지만 잘 사용하지 않는 inline styles 그리고 !important inline styles 그리고 !important CSS로 스타일링을 하는 방법에는 크게 3가지가 있습니다. 별도의 CSS파일을 만들어서 html 문서에 태그를 사용해서 불러다가 사용하는 방법이 가장 일반적이고, html 문서의 head 태그 안에다가 태그를 이용해서 직접 작성하는 방법도 간간히 사용되고, 태그가 적용되는 라인에 같이 사용하는(inline) 방법도 존재합니다. 가장 강력한 것, 즉 가장 우선 순위가 높은 방법은 인라인으로 스타일을 적용하는 방법이긴 한데, 실무에서는 가장 최후에 사용하는 방법으로 자리잡고 있습니다. 왜냐하면, 스타일을 유지보수 해야하는 경우라면 웹문서를 직접 열어야 해서 가장 번거롭기 때문이죠. 그리고 웹문서를 위한 코딩은 시멘틱(semantic) 하게 작성되는 것을 표.. 2023. 1. 22. 이전 1 2 3 4 5 6 7 ··· 9 다음 반응형
