반응형 HTML+CSS33 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 HTML/CSS를 이용해서 Tab Menu 버튼을 만들어 봅시다. 바로 이런 거요. 쇼핑몰 상품설명 상세페이지에서 흔히 볼수 있는 형태입니다. 저의 입장에서라면 사실 flex를 이용하는 게, 익숙치 않은 float를 사용하는 것보다 훨씬 더 직관적이고 쉬울듯 하지 않을까라는 생각이 들기도 하지만, 다른 사람이 만들어 놓은 결과물을 수정해야 하는 경우도 있으니, 이 참에 먼저 float를 이용하여 만든 탭 메뉴에 익숙해질 수 있도록 포스팅을 통해 정리를 합니다. html 뼈대 구성 뼈대가 되는 html은 다음과 같이 ul, li를 이용해서 메뉴 형식으로 구성했습니다. 하단 각각의 div는 각 탭을 눌렀을 경우에 보여주거나 숨길 설명 내용입니다. 물론.. 2023. 2. 12. 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. 이전 1 2 3 4 5 6 ··· 9 다음 반응형
