사용자 친화 웹 / 자주 틀리는 마크업, 크로스 브라우징

Notice

Recent Posts

Recent Comments

Link

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

h e 1 1 o !

사용자 친화 웹 / 자주 틀리는 마크업, 크로스 브라우징 본문

w e b & s e r v e r

사용자 친화 웹 / 자주 틀리는 마크업, 크로스 브라우징

hee.hee 2022. 7. 8. 12:42

📂 주의해야할 마크업

📎 블록 요소 안에 인라인 요소 넣기

인라인 요소는 콘텐츠가 차지하는 만큼(span, a), 블록 요소를 가로로 넓게 화면 영역을 차지(div, h1)한다.인라인 요소는 항상 블록 요소 안에 들어가야 한다. 반대로는 안된다.

✔️ 블록 안에 인라인

<h1> <a href="#">h1의 자식 요소</a> </h1>

📎 <strong>, <em> 요소 사용하기

<b>글씨를 두껍게</b>   -- 대체하기 -->  <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i>   -- 대체하기 -->  <em>콘텐츠 강조하기</em>

📎 <hgroup> 마구잡이로 사용하지 않기

글자 스타일(크기)를 조절하기 위해 hgroup을 사용하면 안된다. 시맨틱 요소로서 역할을 인식하고, 목차의 역할 + 콘텐츠 상하관계를 표시하기 위해 사용해야 한다.

// 좋은 예시
<h1>제목</h1>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
    <h3>작은 목차</h3>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
      <h4>더 작은 목차</h4>
      <h4>더 작은 목차</h4>

✔️ <hgroup>은 제목을 표시하기 위해 사용하는 요소이다.

<h1> 부터 <h6> 까지 있으며, 숫자가 클 수록 글자의 크기는 작아진다.

숫자가 작은 제목이 숫자가 큰 제목을 포함하는 방식으로 사용한다.

📎 <br />는 여백이 아니라 줄바꿈에 사용하기

요소 사이에 간격을 만들기 위한 목적으로 남발해서는 안 된다.

요소 사이에 간격이 필요한 경우에는 아예 별도의 단락으로 구별하거나 CSS 속성을 주어 여백을 조정해주는 것이 바람직하다.

// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.

// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>

// 좋은 예시 2
  //HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>

  //CSS 파일
.margin { margin: 10px }

📎 인라인 스타일링 사용 자제

웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하면서 각 영역이 분리되어 여러 이점을 얻을 수 있다.

그런데 HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것. 웹 표준을 지키기 위해서는, HTML과 CSS 코드를 분리해서 작성하기.

//HTML 파일
<head>
  <style>
    h1 { color : "red" }
  </style>
</head>

(O) <h1>스타일링 속성은 CSS로 작성해주세요.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>  
 
//CSS 파일
h2 { color : "yellow" }

📂 크로스 브라우징 개념과 방법

📎 크로스브라우징이란?

웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업

애초에 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 동일하게 만드는 것은 불가능. 따라서 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것.

📎 크로스 브라우징 워크플로우

1. 초기 기획

어떤 웹사이트를 만들지
어떤 콘텐츠, 기능이 있는지
디자인
타겟 고객층의 브라우저와 기기

2. 개발

코드의 브라우저 호환성 체크
MDN, Can I Use

3. 테스트, 발견

기능 구현 후 테스트

자동으로 테스트를 진행해주는 도구를 이용하는 것도 방법입니다. TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴이 있다.

안정적인 데스크톱 브라우저(롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트를 진행합니다.
휴대폰 및 태플릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트를 진행합니다.
그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행합니다.
Window, Linux, Mac 등 다양한 운영 체제에서도 테스트를 진행합니다.

4. 수정, 반복

테스트 단계에서 버그가 발견되었다면 수정이 필요. 버그가 발생하는 위치를 최대한 좁혀서 특정하고, 버그가 발생하는 특정 브라우저에서의 해결 방법을 정해야 한다. 섣불리 코드를 수정했다가는 다른 브라우저에서 버그가 발생할 수 있으므로, 조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다. 수정이 완료되면 3번 과정부터 반복.

레퍼런스

코드스테이츠

'w e b & s e r v e r' 카테고리의 다른 글

사용자 친화 웹 / 웹 접근성 (0)	2022.07.11
사용자 친화 웹 / SEO (0)	2022.07.08
사용자 친화 웹 / 웹 표준, Semantic HTML (0)	2022.07.08
서버 기초 Express / 요청과 응답 데이터 JSON 직렬화, 역직렬화 (0)	2022.06.19
Web Server 기초 / Express, Routing (0)	2022.06.16

'w e b & s e r v e r' Related Articles

h e 1 1 o !

사용자 친화 웹 / 자주 틀리는 마크업, 크로스 브라우징 본문

사용자 친화 웹 / 자주 틀리는 마크업, 크로스 브라우징

📂 주의해야할 마크업

📂 크로스 브라우징 개념과 방법

'w e b & s e r v e r' 카테고리의 다른 글

티스토리툴바