🦋 웹표준
- 인터넷은 웹보다 포괄적인 개념, 인터넷은 웹 기반으로 작동하지 않는다.
- 웹은 공간, 정보를 공유하는 공간
- 웹표준은 WWW에서 권고하는 웹에서 표준적으로 사용되는 기술, 어떤 브라우저, os라도 동일하게 작동할수있도록 하는 제작기법.
🦋 웹표준의 장점
- 유지 보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
🦋 Semantic HTML
- 웹표준에서 html을 시멘틱(의미가 있게)하게 작성해야한다. 그러면
- 개발자간 소통에 도움이 된다
- 검색 효율성이 올라간다.
- 웹 접근성이 높아진다.
- 자주쓰이는 시멘틱 요소
<header>머릿말<nav>메뉴<aside>메인콘텐츠와 연관있으나, 직접적연관x요소<main>문서메인<article>게시글,기사등<section>의미없는요소<h1~6>제목<footer>꼬릿말
🦋 마크업 주의사항
- 인라인 요소(콘텐츠만큼 영역차지)안에 블록요소(가로로 넓게차지) 넣어야함.
블록이 바깥, 인라인이 안쪽
블록모음
<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>
인라인모음
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>// h1, div 요소는 블록 요소이고,
// a, span 요소는 인라인 요소입니다.
<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>- b, i 대신 strong, em쓰기
<b>글씨를 두껍게</b> -- 대체하기 --> <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i> -- 대체하기 --> <em>콘텐츠 강조하기</em>- <h1~6> 남발하지 않기.
연속사용하지 않기. 요소에 여백줄땐 p쓰자
// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.
// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>
// 좋은 예시 2
//HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>
//CSS 파일
.margin { margin: 10px }- 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" }🦋 크로스 브라우징
- 웹사이트에 접근하는 브라우저에 상관없이 동일한 화면, 기능제공
- 예전엔 active x때문에 익스플로러만 썼어야 했던게 대표적 예
- 크로스 브라우징 워크플로우
- 초기기획 : 어떤 웹사이트를 만들지 결정
- 개발: 코드의 호환성을 mdn등에서 확인한다.
- 테스트 : 기능이 여러 브라우저, os에서 작동하는지 테스트한다.
- 수정/반복 : 버그수정, 3번반복
