HTML 기초

• 블록(Block) 요소와 인라인(Inline) 요소 

1. 블록 요소

- 사용 가능한 가로 너비를 최대한 활용

- 크기를 지정할 수 있다.

( default = width : 100%, height : 0%)

- 수직으로 쌓인다.

- margin, padding 온전하게 사용 가능

- 주로 레이아웃을  다루기 위해 사용

Ex ) DIV, H1, P...

 

블록 요소인 div 태그 사용

2.   인라인 요소

- 필요한 가로 너비만 사용

- 크기를 지정할 수 없다.

( default = width : 0%, height : 0%)

- 수평으로 쌓인다.

- margin, padding에서 top,down 사용 불가능

- 주로 TEXT에 사용

Ex) IMG, SPAN...

인라인 요소인 span 태그 사용

 

 

• 여러가지 의미있는 블록 요소 태그들

 

- header : 홈페이지 가장 상단 부분을 나타내는 태그 , 페이지 상단바

- foooter : 홈페이지 가장 하단, 저작권 데이터 등과 같은 내용이 기재된 부분

- article : 독립적으로 구분 가능하거나 재사용 가능한 영역을 설정 

ex ) 블로그, 매거진 등...

- section : 영역을 나눌 때 많이 사용, 영역에 의미가 있기 때문에 제목을 포함. 주로 h1~h6를 사용해 구분

- aside : 오른쪽, 왼쪽 등 사이드 부분에 광고와 같은 것들을 넣을 때 사용

- nav :   navigation의 약자로 다른 페이지의 링크를 제공. 보통 메뉴를 묶을 때 많이 사용 

- address : 연락처, 주소 등의 정보롤 제공할 때 사용

- div : 아무 의미를 나타내지 않는 태그, 꾸미는 목적으로 많이 사용 

 

================================================================================

 

- ol : ordered list. 순서 type, 역순, 시작 값, 등을 지정할 수 있다.

 

ex)

<ol type="a" reversed="reversed"></ol>

- ul : unordered list

- li : list item, li 단독으로는 사용 못해. ol이나 ul의 자식으로 포함되어야 된다.

- h1 ~ h6 : 제목을 나타낼 때 사용, 순차적으로 사용( h1 다음 h4 말고 h2 사용)

- p : paragraph, 하나의 문단을 설정할 때 사용

- hr : 문단의 분리를 위해 사용( 의미적 표현 ). 수평선을 생성 (시각적 표현)

- pre : preformatted text, 서식이 미리 정해진 텍스트. 텍스트의 공백과 줄바꿈을 유지 가능 

  tab, spacebar 등이 그대로 출력 가능 

 

 

 

• 여러가지 의미있는 인라인 요소 태그들

- a : Anchor,  현재 문서에서 외부 문서로 링크를 걸 때. 버튼 요소로 많이 쓰인다.

    파일 다운로드 등...

    주로 block요소로 전환하여 모양을 입힌다. 

    속성으로  target이 존재하는데 링크 url을 현재 창에 띄울지 , 새로운 창에 띄울지 설정할 수 있다.

    또한 href를 id로 설정하여 해당 id를 지닌 태그가 존재하는 위치로 이동할 수 있다.

    <a href="https://google.co.kr" target="_blanck">google</a>
    <a href="./image1.png">Image Download</a>


<!-- 페이지 내에서 list1이라는 id가 존재하는 위치로 이동 -->
    <ul>
        <li><a href="#list1">list1</a></li>
    </ul>
    <h2 id="list1">list1</h2>

 

 

- abbr : abbreviation, 약어

abbr를 사용해 약어를 설명

<abbr title="Hyper Text Markup Language>HTML</abbr>

 

 

-