![[UI&UX]웹 표준](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkJbsO%2FbtrQkBpNtXo%2F3kEuE0EW5dQQQhOek2qwuk%2Fimg.jpg)
❓What Is Web
Web이란 1990년에 개발자들에 의해 HyperText라는 문서를 공유하기 위한 공간으로서 만들어졌습니다.
이후 인터넷의 발달로 공간의 개념은 전 세계적으로 넓어지게 되었고 이 공간 속에서 전 세계의 사용자가 서로의 정보를 공유할 수 있게 되었습니다.
넓어진 공간은 월드 와이드 웹(World Wide Web)라고 불리게 되었고 특정 사이트에 붙는 WWW가 이것의 약자입니다.
사람들은 웹이라는 공간 덕분에 자유롭게 사라들과 대화하고 소통하면서 정보를 습득할 수 있었습니다.
❗하지만❗
2000년대 초에는 이런 웹이 브라우저마다 조금씩 다른 모습을 보이거나 오류가 생기는 등의 문제가 잦았습니다.
이런 상황을 해결하기 위해서는 브라우저마다 따로 개발의 해주여야 했지만 이는 큰 시간 낭비였습니다.
개발자들은 이런 수고들은 막기 위해 웹 개발의 형식을 통일시키기는 것이 필요하다고 생각하게 되었습니다.
☝1997 WSC의 출현
여러 개의 통일 없던 개발 형식은 W3C(World Wide Web Consortium)에서 웹에서 표준적으로 사용되는 기술이나 규칙을 웹 표준으로 재정의 함으로써 서서히 통일성을 갖춰가기 시작했습니다.
❓웹 표준
👉웹에서 표준적으로 사용되는 기술이나 규칙입니다.
👉웹 개발에 사용되는 언어는 HTML, CSS, JavaScripte 등의 기술을 다룹니다.
👉최신 웹 브라우저들은 모두 웹 표준을 지원해야 합니다.
⚡advantage⚡
🔨유지보수의 용이성
웹 표준을 정의하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았습니다. 당연히 문제가 발생하면 수정하기가 굉장히 어려웠습니다. 하지만 웹 표준에 의해 HTML, CSS, JavaScript로 각 영역을 분리하면서 코드의 가독성이 올라갔고 유지보수 또한 용이 해졌습니다.
🔩웹 호환성의 확보
기존의 웹 사이트는 브라우저에 따라서 정상적으로 사용이 불가할 경우가 많았습니다. 하지만 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전에 상관없이 동일한 결과가 나오도록 할 수 있습니다.
💪검색 효율성의 증대
웹 표준에 맞춰 웹 사이트를 작성하는 것만으로도 검색 엔진에서 더 높은 우선순위로 노출될 수 있습니다.
이는 정보의 작성과 검색 효율성과 관련된 내용도 웹 표준으로 재정의 되었기 때문입니다
🔓웹 접근성의 향상
여러 환경(핸드폰, 노트북, 컴퓨터)에 맞춰 웹 표준이 작성되어 있기 때문에 웹 표준을 맞춰 개발하는 것만으로도 사용자들의 접근성을 높일 수 있습니다.
☔Disadventage☔
웹 표준이 좋은 점은 많지만 단점이 없는 것만은 아닙니다.
👉개발자들의 교육기간이 필요합니다.
👉아직은 웹 스탠더드를 완전히 지원하지 않는 브라우저가 있습니다.
👉어떠한 디자인은 CSS 보다는 table 이 구현이 더 쉽습니다.
📚시멘틱 html
시멘틱 html이란 의미를 가지고 있는 HTML구조를 만드는 것
<기존의 div>와 <span>만으로 구성되어 있던 화면을 <header><nav>등의 구분 가는 태그 이름을 통해 의미를 가지고 있는 HTML구조를 만들 수 있습니다.
⚡advantage⚡
📢개발자 간의 소통
의미 있는 요소들을 통해 요소가 어떤 기능을 하는지 파악할 수 있고 웹 표준에 의해 정의된 표현이기 때문에 팀원이나 동료들과 사전에 협의할 필요도 없다
⌨검색 효율성
검색 엔진은 HTML 코드를 보고 문서의 구조를 파악합니다. 의미 있는 요소들을 통해 중요도를 설정 함으로써 중요한 내용을 페이지에 상단에 표시할 수 있습니다.
🔓웹 접근성
현재 탭이 어떤 부분이고 어떤 정보를 보여주고 잇는지 구조에 대한 정보를 추가로 제공 함으로써 콘텐츠를 더 정확하고 명료하게 전달할 수 있습니다.
🔎시멘틱 요소의 종류
📌<header>
페이지나 요소의 최상단에 위치하는 머리말 역할의 요소입니다.
📌<nav>
메뉴, 목차 등에 사용되는 요소입니다.
📌<aside>
문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다.
📌<main>
이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다.
📌<article>
게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다. 각각의 <article>
을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다.
📌<section>
문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<hgroup>)을 포함하는 경우가 많습니다.
📌<hgroup>
제목을 표시할 때 사용하는 요소로, <h1>~<h6> 요소가 <hgroup>입니다.
📌<footer>
페이지나 요소의 최하단에 위치하는 꼬리말 역할의 요소입니다.
https://www.devkuma.com/docs/html/html5-%EC%8B%9C%EB%A9%98%ED%8B%B1-semantic-%EC%9A%94%EC%86%8C/
❗마크업 규칙
💼블록 요소 <div> 안에 인라인 요소 넣기
// h1, div 요소는 블록 요소이고,
// a, span 요소는 인라인 요소입니다.
<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>🦾<strong><em> 요소 사용하기
<b>글씨를 두껍게</b> -- 대체하기 --> <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i> -- 대체하기 --> <em>콘텐츠 강조하기</em>🚦<h> 요소는 큰 순서부터 작은 순으로 쓰기
// 나쁜 예시
<h1>엄청 큰 글씨</h1>
<h3>적당히 큰 글씨</h3>
<h2>큰 글씨</h2>
<h6>엄청 작은 글씨</h6>
<h4>그냥 글씨</h4>
// 좋은 예시
<h1>제목</h1>
<h2>큰 목차</h2>
<h3>작은 목차</h3>
<h3>작은 목차</h3>
<h2>큰 목차</h2>
<h3>작은 목차</h3>
<h4>더 작은 목차</h4>
<h4>더 작은 목차</h4>❌<br / > 연속으로 사용하면 안 됨
// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.
// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>
// 좋은 예시 2
//HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>🏹인라인 스타일링 지양하기
//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" }
🌎크로스 브라우징
크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미합니다
📜크로스 브라우징 워크 플로우
1. 초기 기획
어떤 웹사이트를 만들 것인지 정확하게 결정하는 과정이다.
👉사이트의 고객과 고객의 브라우저 고객의 기기 등을 생각하여서 어떤 콘텐츠와 어떤 기능을 가지는 웹을 만들 것인지를 결정해야 한다.
2. 개발
코드가 각 브라우저에서의 호환성이 어떤지를 파악하고 사용하는 과정입니다.
👉주요 고객층에 호환성이 높은 코드를 선택하고 호환성이 낮은 코드를 걸러내야 합니다.
3. 테스트 / 발견
각 기능을 구현한 후에는 그 기능에 대한 테스트가 필요합니다.
👉여러 가지 브라우저와 환경 등에서 테스트를 진행해 보고 문제를 찾는 과정입니다.
4. 수정 / 반복
테스트 단계에서 버그가 발견되었다면 수정이 필요합니다.
👉버그를 수정하고 다시 테스트하는 과정을 거쳐가며 코드를 고쳐나가야 합니다. 수정이 완료되면 3번 과정부터 반복합니다.
728x90
반응형
'프론트 엔드 > UI&UX' 카테고리의 다른 글
| [UI&UX]웹 접근성 (1) | 2022.11.08 |
|---|---|
| [UI&UX]SEO (0) | 2022.11.08 |
| [UI &UX] 🔨 How to use Figma? 1편 (0) | 2022.10.31 |
| [UI &UX] 🔨 How to use Figma? 2편 (0) | 2022.10.31 |
| [UI&UX]와이어 프레임 & 프로토 타입 (0) | 2022.10.26 |