반응형 HTML+CSS36 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. [실무꿀팁] 문단 맞추기 위해 사용한 <br>태그, 반응형에서 제거하기 태그 태그는 break, 즉 문단에서 Enter를 입력해서 줄바꿈을 하는 기능을 수행합니다. 그래서 같은 식으로 2번을 넣게 되면 문단과 문단 사이를 한 줄 띄어주는 결과를 내줍니다. 그런데 화면이 넓은 PC 보기 모드에서는 이런 정렬방식이 효과적일 수도 있지만, 화면이 좁은 Mobile 보기 모드에서는 태그가 없는 경우가 더 선호되기도 합니다. 이러한 태그 사용 간극의 차이, 어떻게 하면 좋을까요? 오늘은 실무에서 자주 사용되는 방식으로 Tip으로 기록해두기로 합니다. 태그의 일반적인 사용방식 다음과 같은 코드를 대충 짜보았습니다. You are 'ESTJ' 옳다고 생각되는 일은 거침없이 밀고 나가는 엄격한 관리자형 연애 초반엔 표현이 서툴러도 점점 표현력이 좋아짐 주변에 말 잘 안함 상대랑 잘 맞으면.. 2022. 12. 28. 이전 1 ··· 4 5 6 7 8 9 다음 반응형
