반응형 HTML+CSS33 [HTML] <div> 태그와 <span> 태그의 차이는? 태그와 태그의 차이 예전에 HTML을 공부하면서, div와 span의 차이에 대해서 개념을 제대로 이해하지 못하던 시기가 있었습니다. 지금 돌아보면 진짜 별것도 아닌 내용인데 말입니다. 그냥 문득 그 때가 생각이 나서 조금 기록을 해봅니다. HTML 학습요령 HTML 학습에만 해당하는 내용은 아닐 것 같은데요, 저는 일단 비슷한 녀석들이 눈에 띄이면 '어떻게 서로 다른가?'라는 측면으로 비교해두는 편입니다. 머리가 나빠서 그런지 그런 임팩트를 줘야 이해가 쉽고, 기억에 남더군요. 그래서 div와 span 태그의 경우에도 이해가 되지 않던 개념을, 상호 비교를 통해 비로소 명확하게 이해를 할 수 있게 된 것 같습니다.(머리가 정말 나빠요...ㅜ.ㅜ) div : division, '구분, 구역' 정도의 의미.. 2023. 1. 10. HTML / CSS / Javascript 각자의 역할은 무엇일까? HTML / CSS / Javascript 각자의 역할은 무엇일까? 아들놈들이 언젠가 코딩에 관심을 갖고 시작하게 될 때, 한번 봐주었으면 하는 마음으로 웹페이지 제작에 관한 기초적인 내용을 정리해둡니다. 우리는 크롬, 엣지 등의 브라우저를 통해 다양한 웹사이트 혹은 웹페이지에 접속할 수 있습니다. "접속"이라는 표현을 쓰다보니 어딘가로 찾아가서 웹페이지를 열람하는 것으로 이해하기 쉽지만, 사실 이전 포스팅에서 살펴본 GET요청 방식으로 요청을 한 후 "내 컴퓨터"에 내려 받은 웹페이지를 열람하는 것이 인터넷의 특징입니다. 즉, 서버에 '접속'한 후 요청한 웹페이지를 결국 내려 받기 위해 인터넷이라는 망이 필요해지는 것 뿐입니다. 아무튼 인터넷을 탐험하는 브라우저들은 그렇게 동작하고 있었습니다. 사람으로.. 2023. 1. 9. 반응형 이미지 교체 기능, <img>를 <picture>로 감싸보자 얼마 전 포스팅에서, HTML 문서에 삽입한 이미지를 반응형으로 만드는 아주 간단한 팁을 살펴보았습니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 kincoding.com 그런데 이처럼 1개의 이미지를 반응형으로 동작하게 하는 것이 아니라, 가로세로 비율이 다른 여러 개의 이미지를 그때 그때 반응형으로 맞처서 아예 교체를 해주려면 어떻게 해야 할까요? 이번 포스팅에서는 바로 이 점을 살펴보도록 해보겠습니다. 반응형 이미지를 교체하려면 태그를 사.. 2023. 1. 2. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 이미지 사이즈도 좀 커지게 되는데요, 이렇게 좀 사이즈가 큰 이미지의 경우 휴대폰에서 볼 때는 모바일 반응형으로 사이즈가 알아서 줄어들어 주면 좋겠죠? 실무에서 자주 사용하는 간단한 팁을 공유해드려봅니다. 일단 신년인사용 팝업을 디자인해서 메인 페이지에 게재를 했습니다. 팝업 게재 부분은 로 분리되어 구성되어 있구요, 해당 부분의 코드는 다음과 같습니다. 기본적인 이미지 삽입 방법 id나 label 부분에는 popup_20180922_cs라고 되어 있는 걸 보니, 2018년도에 코드를 작성한 이후 필요할 때마다 이미지만 바.. 2022. 12. 29. 이전 1 ··· 3 4 5 6 7 8 9 다음 반응형
