Section, 지역화, 블록태그, 인라인태그, 테이블태그

문서의 필수블록 : Header, main , footer

 

아웃라인을 <div>로 구분후 <h1>, <h2>식으로 넘버링하면 제목열의 깊이가 변경되면 불편함이 발생한다.

대신 <section> <h1>으로 지역화시키면 자동으로 넘버링부여됨. 

 

지역화

<section>

   <h1>페이지정보</h1>

   <태그>...</태그>

</section>

 

<section>
	<h1>뉴렉처 온라인</h1>
    
		<section>
        	<h1>헤더</h1>
            
            <nav>
            <h1>메인메뉴</h1>
            <ul>
            	<li>학습가이드</li>
                <li>강좌선택</li>
            </ul>
            </nav>
            
		</section>    
</section>

 

Section태그의 종류 : article, aside, nav

• <article> tag는 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.
• <section> tag는 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다.
• <div> 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 필요가 있을 경우 사용한다

 

 

 

웹상에서 f12버튼을 누르면 '개발자도구'가 뜬다.

또는 확인하고자하는 영역에 마우스를 대고 오른쪽버튼 ->검사 누르면 해당영역 확인가능.

 

 

블록 태그는 자기 영역을 갖는다

블록태그

블록요소

• 사용가능한 최대 가로 너비를 사용
• 전체를 차지 하기 때문에 각 요소들이 수직으로 쌓인다
• 가로 너비와 세로 길이를 지정할 수있다

 

인라인태그는 영역을 가지지않는다. (width, height 변형불가)

인라인태그

인라인요소

• 내용만큼만 영역사용
• 요소들이 수평으로 쌓임
• 가로 너비와 세로길이 지정 불가능
• 수평으로 쌓여 위,아래 여백 사용 불가능

 

인라인태그참조 :

developer.mozilla.org/ko/docs/Web/HTML/Inline_elements

 

 

 

Table 태그

<table>

  <tr> 1행에 넣을 내용들

    <td>테이블 내용</td>

  </tr>

  <tr> 2행에 넣을 내용들

    <td>테이블 내용</td>

  </tr>

</table>

출력화면

 <section>
            <H1>공지사항 목록</H1>
            <table>
                <tr>
                    <td>1024</td>
                    <td>스프링 MVC 소스코드</td>
                    <td>newlec</td>
                    <td>2020-12-12</td>
                    <td>1352</td>
                </tr>
                <tr>
                    <td>1023</td>
                    <td>스프링 JSON 출력을 위한 라이브러리 설정</td>
                    <td></td>
                    <td>2020-11-29</td>
                    <td>994</td>
                </tr>
                <tr>
                    <td>1022</td>
                    <td>스프링 강좌 <kbd>Ctrl</kbd>+<kbd>shit</kbd>RestController 한글 깨짐 설정 코드</td>
                    <td>newlec</td>
                    <td>2020-11-25</td>
                    <td>802</td>
                </tr>
            </table>
        </section>