디자인 기본 지식

소수점 작업 시 생기는 일들 웹사이트 시안 작업할 때 소수점 사용을 피해야하는건 알겠는데 대체 이유가 뭘까? 우선 소수점을 사용하면 다양한 브라우저와 디바이스에서 일관된 결과를 보장하기 어렵다. 이제 누가 물어보면 자신있게 대답하자 웹은 픽셀 단위로 디자인 요소의 위치와 크기를 조절하기 때문에 일반적으로 소수점 값을 픽셀로 변환할 때 반올림하여 가장 가까운 픽셀값을 사용한다 0.6px의 라인으로 열심히 박스를 만들어도 어차피 웹은 '0.6..... 반올림.. 1px....' 이렇게 되기 때문에 애초에 안쓰는게 낫다는 뜻 소수점 작업시 오류가 생길 수 있는 디자인요소 텍스트 폰트 크기를 소수점 단위로 지정할 경우, 일부 브라우저에서는 반올림 오차가 발생해 텍스트 크기가 예상과 다를 수 있다 자간과 행간 자간, 행간을 소수점 단위로 지정할 경우 브라우저간의 랜더링 차이로 인해 간격이 달라질 수 있다 보더 소수점으로 지정할 경우 렌더링 엔진에 따라 반올림 오차가 발생하여 예상하지 못한 두께가 될 수 있다

반응형이란? 반응형(Responsive)은 웹사이트 혹은 앱이 다양한 디바이스와 화면 포인트에 자동으로 대응해 최적의 UX를 제공하는 디자인 접근방식 사용자가 PC, 노트북, 태블릿, 스마트폰 등 다양한 기기를 사용할 때 웹사이트가 화면 크기에 맞게 자동으로 조절되어 보기 편하고 사용하기 쉬운 형태로 제공하는 것 반응형 디자인의 특징 유연한 그리드 시스템 : 고정된 픽셀값이 아니라 화면에 상대적인 비율로 설계되어 다양한 화면크기에 맞춰 유동적으로 조절됨 유연한 이미지와 미디어 : 이미지, 동영상 등의 미디어 요소들이 화면 크기에 따라 적절하게 크기가 조절되어 로딩 시간을 최소화하고 사용자 경험을 향상시킨다 미디어 쿼리 : CSS 미디어 쿼리를 사용해 특정 화면 사이즈에 대한 스타일을 지정할 수 있다. 이를 통해 다양한 디바이스에 대응 가능한 스타일 시트를 구성할 수 있다 모바일 최적화 : 모바일 환경 사용성을 고려해 터치 제스처나 작은 화면에 최적화 된 디자인 요소를 추가해 모바일 사용자의 UX를 향상시킨다 디바이스별 브레이크 포인트 Extra small devices (XS) : 0px ~ 576px 모바일 기기 Small devices (SM) : 576px ~ 768px 태블릿 세로방향 MD (Medium devices) : 768px ~ 992px 태블릿 가로방향, 작은 랩탑 LG (Large devices) : 992px ~ 1200px 일반적인 랩탑 XL (Extra large devices) : 1200px ~ 데스크탑, 대형 디스플레이