본문 바로가기
study/HTML

웹 접근성, 그룹화, id/class, 섹셔닝

by Elfen Lied 2020. 1. 7.
반응형

*사용자가 의도하지 않은 이벤트

 <meta http-equiv="refresh" content="5, url='http://www.daum.net' "/>

※사이트 문제가 있는데 본인이 못풀고 개발자가 없을경우, 임시로 특정페이지로 이동시키고 싶을때

(html) refresh속성 사용 // 바람직한 방법 아님. 급하게 사용

equivalent(동등한) <meta http-equiv="refresh" content="시간, url='주소' "/>

 

*그룹화

<div>
    <div>
    	<h1>header</h1>
    </div><!-- //header -->
    <div>
    	<h2>content</h2>
    </div><!-- //content -->
    <div>
    	<h2>footer</h2>
    </div><!-- //footer -->
</div> 

*주석: 시작과 끝표시  끝엔 // 넣기

<!-- //주석끝 -->

 

 

*id, class - 섹셔닝

 

id : 유일무이한 이름 지정시

class : 하나 또는 하나 이상의 공통적인 스타일 적용

 

- 기존

<div id="wrapper">
    <div id="header">
    	<h1>header</h1>
    </div><!-- //header -->
    <div id="container">
    	<h2>content</h2>
    	<div>side navigation</div>
    	<div>main content</div>
    </div><!-- //content -->
    <div id="footer">
    	<h2>footer</h2>
    </div><!-- //content -->
</div>

 

- html5 새로생긴 태그방식

<div id="wrapper">
          <header>
               <h1>header</h1>
          </header><!-- //header -->
          <main>
               <h2>content</h2>
               <!-- aside 본문 부연설명-->
               <aside>side navigation</aside>
               <!--section 본문기사가 들어가 틀 (반드시 제목써주기)-->
               <section>
                    <h3>main content</h3>
               <!--article 본문기사들 (제목 쓰면 좋다)-->     
                    <article>
                         <h4>article title</h4>
                         <p>paragraph</p>
                    </article>
               </section>
          </main><!-- //content -->
          <footer>
               <h2>footer</h2>
               <address>
               <P>
                    &copy; copyright all right reserved.
               </P>
               <p>
                    <a href="mailto:alikerock@gmail.com">mailto:alikerock@gmail.com</a>
               </p>
               </address>
          </footer><!-- //content -->
      </div>

aside : 화면 좌측에 있는 사이드 네비등등

section : 본문기사가 들어가는 틀 (제목 반드시 쓰기)

article : 본문기사들 (제목 써주면 좋다)

address : copyright 따위의 p 태그들 묶어주기

 

 

 

반응형

댓글