반응형 CSS20 CSS 선택자? 우선 '#', '.' 2개만 기억하세요 CSS 선택자(CSS Selector) CSS는 뼈대를 이루는 HTML 문서에 피부(또는 옷)를 입히는 역할을 해줍니다. 예쁘게 꾸며주는 역할을 합니다. 그래서 원하는 곳에 변화를 잘 주려면, 원하는 위치를 잘 콕~ 찝어 내는 게 중요해집니다. 프로그래밍 혹은 코딩이라는 건 결국 컴퓨터를 시켜서 '손 안대고 코를 푸는 것'입니다. 그래서 CSS를 이용해서 스타일링을 할 때에도 '무언가를 선택하는 일'은 매우 중요한 기능이 됩니다. section과 div 사용해서 의미론적으로 구분해보기 누구나 잘 알고 있는 를 이용해서 간단하게 HTML 문서를 마크 업 해보았습니다. 이번에는 section, div를 사용해서 의미론적으로 구분을 해볼 수 있도록 했습니다. 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보.. 2023. 1. 12. HTML / CSS / Javascript 각자의 역할은 무엇일까? HTML / CSS / Javascript 각자의 역할은 무엇일까? 아들놈들이 언젠가 코딩에 관심을 갖고 시작하게 될 때, 한번 봐주었으면 하는 마음으로 웹페이지 제작에 관한 기초적인 내용을 정리해둡니다. 우리는 크롬, 엣지 등의 브라우저를 통해 다양한 웹사이트 혹은 웹페이지에 접속할 수 있습니다. "접속"이라는 표현을 쓰다보니 어딘가로 찾아가서 웹페이지를 열람하는 것으로 이해하기 쉽지만, 사실 이전 포스팅에서 살펴본 GET요청 방식으로 요청을 한 후 "내 컴퓨터"에 내려 받은 웹페이지를 열람하는 것이 인터넷의 특징입니다. 즉, 서버에 '접속'한 후 요청한 웹페이지를 결국 내려 받기 위해 인터넷이라는 망이 필요해지는 것 뿐입니다. 아무튼 인터넷을 탐험하는 브라우저들은 그렇게 동작하고 있었습니다. 사람으로.. 2023. 1. 9. 반응형 이미지 교체 기능, <img>를 <picture>로 감싸보자 얼마 전 포스팅에서, HTML 문서에 삽입한 이미지를 반응형으로 만드는 아주 간단한 팁을 살펴보았습니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 kincoding.com 그런데 이처럼 1개의 이미지를 반응형으로 동작하게 하는 것이 아니라, 가로세로 비율이 다른 여러 개의 이미지를 그때 그때 반응형으로 맞처서 아예 교체를 해주려면 어떻게 해야 할까요? 이번 포스팅에서는 바로 이 점을 살펴보도록 해보겠습니다. 반응형 이미지를 교체하려면 태그를 사.. 2023. 1. 2. Bootstrap 기초 class 사용 + Javascript 조작하기 연습 이전 포스팅에서, 부트스트랩을 이용한 레이아웃 구성을 살펴봤습니다. container, row, column에 대해서 살펴봤습니다. 이번에는 약간 더 나아가서 이를 이용해서 간단한 레이아웃을 구성하는 연습을 해보려고 합니다. 그리고 이후에 Javascrip로 핸들링까지 해보려 합니다. Bootstrap 기초 class 사용 + Javascript 조작하기 연습 초보인 경우 이 포스팅을 진행하기 전에, 이전 내용을 먼저 확인하면 도움이 됩니다. 부트스트랩 Layout의 시작 - BreakPoints, Container, Grid 부트스트랩 Layout의 시작 - BreakPoints, Container, Grid Bootstrap은 그냥 예제 코드를 가져다 복붙해서 사용하는 아주 편리한 방식을 제공합니다... 2022. 12. 26. 이전 1 2 3 4 5 다음 반응형
