반응형 html11 Interactive의 시작, transition 속성 1/2 - duration, delay Interactive의 시작, transition 속성 1/2 - duration, delay html을 이용해서는 주로 문서의 레이아웃을 구성한다고 이전 포스팅에서 정리를 해보았습니다. 레이아웃은 주로 static한 형태로서의 웹문서의 구성과 배치를 의미하게 되는데요, 보다 생동감 있은 interactive한 움직임을 표현하려면 반드시 transition 속성이 필요하게 됩니다. transition 속성을 부여하면 html 문서에서는 마치 마법 같은 일이 벌어지기 때문에 많은 사람들이 좋아합니다. 저 또한 역시 그렇습니다. transition을 자유자재로 다룬다는 것은 아주 흥미로운 일이 되기 때문입니다. 이번 포스팅에서는 다채로운 transition의 기본적인 내용들을 함께 살펴보면서, transit.. 2023. 3. 23. 가상 클래스 선택자 Vs. 가상 엘리먼트 선택자 가상 클래스 선택자 Vs. 가상 엘리먼트 선택자 HTML 소스들을 살펴보다 보면, 가끔 :hover 또는 ::after 이런 것들이 눈에 띄곤합니다. 매우 낯선 모습의 요소들이지만 HTML, CSS에서는 매우 빈번하게 사용하는 중요한 선택자들입니다. 그런데 어떤 것들은 점 하나?이고 또 어떤 것들은 점이 두개?라서 점점 더 미궁으로 빠져드는 느낌이 들기도 합니다. 헷갈리면? 이참에 정리를 해보는 거죠 뭐. PSEUDO CLASSES - 가상 클래스 'pseudo'는 어떻게 읽을까요? 발음이 매우 낯설죠. [ suːdoʊ ]라고 읽습니다. 한국식 발음으로는 [수-도]에 가깝습니다. '가상의', '가짜의' 라는 뜻을 가지고 있는데, 파파고는 '사이비의'라고 좀 더 과격하게 알려주는군요^^; 일단 세미콜론 한.. 2023. 1. 17. HTML / CSS / Javascript 각자의 역할은 무엇일까? HTML / CSS / Javascript 각자의 역할은 무엇일까? 아들놈들이 언젠가 코딩에 관심을 갖고 시작하게 될 때, 한번 봐주었으면 하는 마음으로 웹페이지 제작에 관한 기초적인 내용을 정리해둡니다. 우리는 크롬, 엣지 등의 브라우저를 통해 다양한 웹사이트 혹은 웹페이지에 접속할 수 있습니다. "접속"이라는 표현을 쓰다보니 어딘가로 찾아가서 웹페이지를 열람하는 것으로 이해하기 쉽지만, 사실 이전 포스팅에서 살펴본 GET요청 방식으로 요청을 한 후 "내 컴퓨터"에 내려 받은 웹페이지를 열람하는 것이 인터넷의 특징입니다. 즉, 서버에 '접속'한 후 요청한 웹페이지를 결국 내려 받기 위해 인터넷이라는 망이 필요해지는 것 뿐입니다. 아무튼 인터넷을 탐험하는 브라우저들은 그렇게 동작하고 있었습니다. 사람으로.. 2023. 1. 9. 반응형 이미지 교체 기능, <img>를 <picture>로 감싸보자 얼마 전 포스팅에서, HTML 문서에 삽입한 이미지를 반응형으로 만드는 아주 간단한 팁을 살펴보았습니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 kincoding.com 그런데 이처럼 1개의 이미지를 반응형으로 동작하게 하는 것이 아니라, 가로세로 비율이 다른 여러 개의 이미지를 그때 그때 반응형으로 맞처서 아예 교체를 해주려면 어떻게 해야 할까요? 이번 포스팅에서는 바로 이 점을 살펴보도록 해보겠습니다. 반응형 이미지를 교체하려면 태그를 사.. 2023. 1. 2. 이전 1 2 3 다음 반응형
