공부 노트

웹 표준? 

W3C 표준안에 따라 웹사이트를 작성할 때 이용하는 html, css, js를 만드는 것이다.

예) 시멘틱 태그 사용, W3C에서 권장하지 않는 태그 사용하지 않기

위와 같은 것을 지키면 웹 표준을 준수하는 html 코딩이라고 할 수 있다..

- 시멘틱 태그

<main>
    <header>
        <nav></nav>
    <section>
        <article></article>
        <aside></aside>
    </section>    
    <footer></footer>
</main>

웹 접근성?

모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것이다.

시각장애인이 화면 낭독 프로그램을 이용해 컴퓨터를 사용할 때, 웹 접근성을 가진 웹페이지라면 일반인과 동등한 수준으로 웹서핑을 즐길 수 있다.

예) img 태그 : alt속성을 작성해야 스크린리더가 읽는다.

img안에서 width height를 조절하는 것은 웹 표준이 아니다.

<!-- img안에서 width, height 조절하는것은 웹표준이 아니다. -->
<img src="images/ocean.jpg" alt="바다 풍경">

강조 태그, 취소선 태그 :

<b><strong>는 똑같이 강조 태그이지만 <strong> 태그는 스크린리더가 강조해서 읽는다.

<s><del> 태그에서는 <del>만 스크린리더가 읽지 않는다.

// 강조 태그
<b>
<strong> - 강조해서 읽는다.

// 취소선태그
<s>
<del> - 읽지않는다.

크로스 브라우징?

웹 표준기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법이다.

내가 만든 웹페이지가 다양한 브라우저에서 문제없이 잘 보이게 하는 것이다.

예) 인터넷 익스플로러에서 작동하지 않는 filter, display: grid속성

IE에서도 잘 동작하려면 위와 같은 속성은 지양해야 한다. 하지만 IE를 제외하고 제작하는 방법도 있다.

		img {
			width: 600px;	
			filter: grayscale(1);
			transition: 1s;
		}
		img:hover {
			filter: grayscale(0);
		}
		.container {
			display: grid;
		}