인터넷 브라우저
인터넷을 사용하는 사용자의 입장에서는 사용하는 브라우저가 모두들 다를 것이다. 대표적으로 크롬이 있을 것이며, 사파라, 네이버 웨일, 엣지, 파이어폭스 등 각각 다양한 브라우저를 통해서 인터넷을 사용할 것이다.
위는 23~24년도 전세계 브라우저 사용현황으로 크롬이 압도적으로 많지만 사파리, 엣지, 파이어폭스 등 다른 브라우저의 사용량도 무시할 수준의 수치는 아니기 때문에 이들도 각각 고려해야 한다.
크로스 브라우징
이런 상황에서 프론트엔드 개발자가 하나의 사이트를 만들었다고 할 때, 각각의 브라우저로 해당 사이트에 접속을 하면 브라우저에 따라서 다른 모습을 보일 가능성이 존재한다.
브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 각 엔진이 어떻게 처리를 하는가에 따라서 다르게 나올 수 있기 때문이다.
크로스 브라우징을 고려할 때, 겉의 ui는
고려할 사항
1. Don't Repeat Yourself (DRY)
정보의 반복을 줄이는 것을 목표로 하는 개발의 기본 원칙이다.
코드의 복사 붙여넣기 보다는 필요에 의한 호출을 통해서 사용하도록 코드를 작성하는 것이 재사용성, 생산성에 유리하다.
문제가 생길 경우에 해당 부분만 고쳐주면
2. DOCTYPE 정의
Document Type의 약자로 HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다.
<!DOCTYPE html>위와 같이 정의하는데 html, xhtml, html5 세가지 유형이 존재하며 마크업 문서의 요소와 속성등을 처리하는 기준이 되어 유효성 검사에 이용된다.
미 선언시에 호환모드로 작동하는데 각 브라우저가 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 커진다.
3. CSS 초기화
각 브라우저에 기본으로 설정되어 있는 CSS는 모두 다르다.
margin, padding, font-size 등 default로 설정되어있는 값이 다르기 때문에 이것을 같게 초기화하여 브라우저 간의 차이를 줄인다.
CSS Tools: Reset CSS 을 참고하여 각 태그에 대해서 CSS를 초기화하도록 한다.
4. 브라우저 별로 세팅 Vender Prefix
각 브라우저를 위한 접두사를 함께 사용해서 브라우저 별로 값을 세팅한다.
<style>
.button {
background: red; <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow); <!-- 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow); <!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow); <!-- 오페라 10.0 이상을 위한 코드 -->
background: linear-gradient(red, yellow); <!-- CSS 표준 문법 코드 -->
}
</style>5. 폰트
각 브라우저별로 기본적으로 설정되어 있는 폰트가 다르기 때문에 폰트로 인해서 원하는 ui가 나오지 않을 수 있다.
또한 브라우저 별로 렌더링의 차이가 있어서 같은 폰트도 다르게 나타날 수 있다.
폰트에서 가장 신경쓸 것은 폰트의 폭, 높이에 따라서 줄바꿈 현상을 최소화 하는 것이 중요하다.
어떤 브라우저에서는 공간이 충분하지 않아서 개발 시에 사용했던 브라우저와는 다르게 텍스트의 줄바꿈이 발생할 수 있다. ui와 크게 상관이 있다면 텍스트가 들어갈 자리를 충분히 확보하는 것이 좋다.
6. 반응형 웹
반응형 웹은 웹 사이트를 이용하는 각 디바이스의 크기와 뷰포트 크기를 고려해서 어떠한 크기에서라도 제대로 된 서비스를 제공하는 사이트를 보여주도록 하는 것을 말한다.
통상적으로 아래의 기준을 맞추면 반응형 웹이라고 판단한다.
- 데스크탑, 태블릿, 모바일 디바이스에 대해 각각 서비스를 문제없이 이용할 수 있는 화면을 제공한다.
- 같은 디바이스여도 유저가 사용하기에 무리가 없는 범주에서 뷰포트(viewport) 크기를 변경하는 경우 즉시 반응하여 그에 맞게 적절한 화면을 보여준다.
반응형 웹은 따로 기술이 있기 보다는 css 상에서 크기를 결정하는 속성 값에 대해서 %, vw, vh 등을 적절하게 사용하는 것이 중요하다. 고정적인 크기로는 변화하는 뷰포트 크기에 대해서 대응하는 것이 어렵기 때문에 가변크기를 정해 대응하도록한다.
viewport
뷰포트는 디스플레이 위에서 웹페이지를 보여주는 표시 영역을 말한다. 데스크탑에서 웹 브라우저의 크기를 조절하면 그에 따라서 보여지는 웹의 사이즈도 같이 조절된다.
html의 meta 태그를 사용하면 뷰포트와 관련하여 설정이 가능하다.
<meta name="viewport" content="width=device-width, initial-scale=1">- width=device-width
웹 페이지의 너비를 디바이스 크기에 맞춘다는 설정. 동일하게 height=device-height를 통해 높이를 맞추는 것도 가능하다. - initial-scale=1
초기 화면 배율을 설정. 1이 100%로 대부분 1로 설정한다. - minimum-scale
화면 최소 배율로 극단적으로 축소 되는 것을 막아준다. - maximum-scale
화면 최대 배율로 극단적으로 확대 되는 것을 막아준다. - user-scalable=no
크기 조절을 불가능하게 막는다. 반응형 웹의 목적상 사용자의 편의성 증대에 목적이 있으므로 이 속성은 거의 사용하지 않는다.
미디어 쿼리
뷰포트의 크기에 따라서 다른 CSS를 적용하도록 바꿔주는 것이다. 뷰포트의 width와 height에 따라서 일종의 if문을 적용시켜 다른 css가 적용되는 것이다.
미디어 쿼리를 적용할 때는 두 가지 전략을 통해서 개발을 한다. 어느 디바이스를 중심으로 잡는가에 따라서 나뉘는데 하나는 데스크탑 중심, 하나는 모바일 중심으로 개발을 하는 것이다. 데스크탑 중심의 경우 데스크탑에 최적화된 css를 개발한 후에 미디어 쿼리를 적용해서 뷰포트 크기가 작은 디바이스에 맞는 css를 작성한다. 모바일 중심의 경우 모바일에 최적화된 css를 개발한 후에 미디어 쿼리를 적용해서 뷰포트 크기가 큰 디바이스에 맞는 css를 작성한다.
/* 데스크탑 중심 개발 */
/* 데스크탑에 최적화된 CSS 코드 */
@media (max-width: 768px) {
/* 모바일에 최적화된 예외 CSS 코드*/
}
/* 모바일 중심 개발 */
/* 모바일에 최적화된 CSS 코드 */
@media (min-width: 992px) {
/* 데스크탑에 최적화된 예외 CSS 코드*/
}데스크탑 중심 개발의 경우에는 css를 작성하고 미디어 쿼리로 max-width를 작성하여 모바일 최적 css코드를 작성한다.
모바일 중심 개발의 경우에는 css를 작성하고 미디어 쿼리로 min-width를 작성하여 데스크탑 최적 css코드를 작성한다.
미디어 쿼리 오버라이딩
미디어 쿼리는 어떻게 보면 같은 속성을 재정의하는 것과 같아서 오버라이딩의 개념이 적용된다. 원래의 목적이 되었던 css를 작성하고 그 아래에 예외가 적용된 미디어 쿼리 css 코드를 작성하여 오버라이딩을 시킨다.
// 잘못된 예시
{
@media (min-width: 992px) {
margin: 10px;
}
margin: 30px;
}미디어 쿼리를 통해서 margin값을 정했지만, 그 아래에 margin 값이 모든 경우에 적용이 되기때문에 가장 아래의 margin: 30px;이 적용되어 항상 같은 웹을 보게 된다.
// 옳은 예시
{
margin: 30px;
@media (min-width: 992px) {
margin: 10px;
}
}따라서 아래에 미디어 쿼리를 작성하여 특정 조건에 대해서만 오버라이딩이 되도록 한다.
같은 속성에 대해서 오버라이딩 뿐만 아니라 미디어 쿼리가 적용될 때만 원하는 속성이 적용되도록 하는 것도 가능하다.
{
margin: 30px;
@media (min-width: 992px) {
margin: 10px;
padding: 10px;
}
}디바이스 별 width
미디어 쿼리에 적용하는 디바이스 별 width 값으로 해당 값을 기준으로 조절한다.
가장 작은 디바이스: < 576px
모바일 디바이스: <= 768px
태블릿 디바이스: 768px < x <= 992px
데스크탑: 992px < x <= 1200px
큰 화면 데스크탑: 1200px <
