HTML 웹 기술이 진보되면서 HTML도 변화가 생기는데, 브라우저가 HTML을 해석하기 위해서 브라우저에게 어떤 HTML 표준을 사용하는지 알려주는 것을 DTD라고 한다. HTML에서는 DOCTYPE을 사용해서 알려준다. DOCTYPE html ? 선언은 HTML 문서의 시작 부분에 위치하며, 브라우저에게 문서가 HTML5 표준을 따르고 있음을 알려준다. 이 선언으로 브라우저는 해당 문서를 “표준 모드”에서 렌더링될 수 있도록 지시한다. 즉, 최신 웹 표준에 따라 콘텐츠를 해석하고 표시하라는 의미이다. 표준 모드 vs 비표준모드 웹 브라우저는 표준 모드와 비표준 모드, 두가지의 모드로 문서를 렌더링한다. 각각의 모드는 웹 문서가 웹 표준에 어떻게 부합하는지에 따라 결정된다. 표준 모드 웹 브라우저가 최..

반응형 작업을 위해서 모바일을 작업하는 중에 a 태그 또는 button 요소를 터치 시 영역의 색상이 변화하는 문제를 발견했다. 기능적인 문제는 아니지만 페이지를 보는 입장에서는 거슬리고 불완전하다고 느낄 수 있었다. ( 이것을 디자인적인 요소로 배치한다면 몰라도 의도치 않은 경우라면! ) 이것을 해결하기 위해서 -webkit-tap-hightlight-color 를 사용했다. .link { -webkit-tap-hightlight-color: transparent } transparent 속성을 줘서 간단하게 제거가 가능하다. 그 외에도 색상을 준다면 해당 색으로 영역을 변화시킬 수 있다.

웹 사이트를 디자인하다보면 글자색에 배경 이미지가 들어가는 경우가 있다. 해당 기능을 구현하는 것은 생각보다 간단한데, 알아보자 필요 속성 ▶ color : 배경 색을 넣어야하기 떄문에 당연 필요! ▶ background-image : 이미지를 넣어서 배경을 꾸미기 때문에 사용한다. ▶ background-clip : 텍스트를 이미지로 표현할 수 있다. ▶ -webkit-background-clip : -webkit 은 웹 브라우저 엔진으로 구글, 사파리 등에서 css 속성을 사용할 수 있게 한다. 이제 이것으로 적용을 해보자 .image_text { color: transparent; background-image: url("이미지 경로"); background-clip: text; -webkit-ba..

메뉴, 리스트 등을 여는 애니메이션을 구현하기 위해서 hight 값을 조작하는 경우가 많다. 하지만 height 값에 변화는 생기지만 transition이 적용되지 않는 경우가 발생했다. .menu { height: 0; overflow: hidden; transition: all 0.8s } .menu_active { heigth: auto } 이론상 menu 클래스만 가지고 있는 엘리먼트가 menu_active 클래스를 가지게 된다면 자식 엘리먼트의 height 값 만큼 커지면서 애니메이션이 발생되어야 한다. 하지만 display: none을 했을 때 애니메이션이 발생하지 않는 것처럼 아무런 애니메이션이 작동하지 않았다. 그 이유는 height 값이 auto라면 transition이 작동하지 않는다고..

이미지와 같은 요소는 너비 값을 px 등의 단위로 고정하기 쉽지 않다. 반응형 환경에서 고정으로 두면 화면의 크기에 따라 너무 커지거나 작아지기 때문이다. 그래서 %로 설정하는 경우가 있는데, 원본 사이즈가 1 : 2인 요소를 1 : 1 비율로 화면에 나타내야 하면 어떨까? 생각만 해도 머리가 아픈 상황이다. 기본적으로 이미지를 비율에 맞춰 자르려면 object-fit을 사용해서 본인은 처리하는데, object-fit을 사용하려면 고정적인 size를 가져야한다. 하지만 앞서 말한 것처럼 고정적인 값을 가지면 반응형 환경에서 문제가 생긴다. 이도저도할 수 없는 최악의 상황이다. 여기서 도움을 주는 것이 aspect-ratio이다. aspect-ratio 요소의 크기를 비율대로 조정할 수 있는 css 속성이..

IE 환경의 고민이 사라졌다고 프론트엔드 개발자는 쉽게 마음을 놓으면 안된다. 바로 사파리 환경이 있기 때문이다. ( 모든 환경의 기본 스타일이 통일되길 기원합니다... ) 크롬과 사파리의 스타일이 다른 부분은 많지만 이번에 input을 작업하면서 다른 스타일로 내가 설정한 디자인이 깨지는 것을 발견했다. 사파리에서는 input이 기본적으로 둥근 모서리와 그림자를 가지고 있다. 그래서 따로 초기화를 하지 않으면 내가 설정한 스타일에 둥근 모서리와 그림자가 추가된다.. input { -webkit-border-radius: 0; -webkit-appearance: none; } 다음과 같이 설정해주면 input의 스타일이 초기화된다. radius는 둥근 모서리에 대한 설정이며, appearance는 그림자..

웹사이트를 개발하다보면 video 와 관련된 문제를 경험하게 된다. 자동 재생이나, video 태그의 재생 전 아이콘이 나오는 문제를 나는 경험했다. 이미 흔한 해결 방법들이지만 이번에 한 번 정리해보겠다. video 자동재생 크롬과 사파리 등 브라우저에서 video를 자동 재생 시키려면 제약사항이 있다. 바로 muted라는 옵션이 필요하다. 음소거 상태에서만 동영상을 자동 재생시킬 수 있다. 또한 사파리의 경우에는 추가적으로 playsinline 옵션을 줘야한다. playsinline 속성을 사용하지 않으면 전체화면으로 처리된다는 문제가 있다. // ... 다음과 같이 사용하려면 기본적으로 muted, playsinline, autoplay를 사용해야 브라우저 구분없이 자동재생이 가능하다. 카카오 브라..

디자인이 너무 이쁜 Toggle 버튼이 있어서 해당 코드를 베이스로 CSS 공부를 하려고 한다. 컴포넌트 분석 // components/toggle import { useState } from "react"; import "./toggle.style.css"; const Toggle = () => { const [toggle, setToggle] = useState(false); const handleClickToggle = () => { setToggle((prev) => !prev); }; const btnClassName = [ "toggle-btn", toggle ? "toggle-btn-on" : "toggle-btn-off", ].join(" "); return ( ); }; export de..