2. Block요소

Block 요소란?

웹 페이지상의 구획을 나누는 목적으로 사용되는 요소.

기본적으로 block요소는 block요소와 inline요소를 포함 할 수 있으며 부모너비의 100%를 가진다는 특징을 가진다.

 

• block요소는 block과 inline요소를 포함 할 수 있다.
• 대부분의 inline요소는 inline요소만 포함 할 수 있다.

Block 요소

1. <div> (division) : 어떠한 영역을 구분 할 때 사용되는 태그. 컨텐츠들의 묶음을 구분하기위한 용도.

 

2. <p> (paragraph) : 단락을 의미함. 일반적으로 div내부에 문단을 표기할 때 사용된다.

 

div와 p태그는 겉보기에 똑같지만 용도가 다르다

 

 

 

3.

<ul> / <li> (unordered list / list) : 순서없는 목록태그로써, 리스트형식에 사용되며 ul은 하나 이상의 li를 가져야 한다.

<ol> / <li> (ordered list / list) : 순서있는 목록태그. 기본으로 마크가 숫자로 표기된다.

nav메뉴 제작시 ul/li를 대부분 사용한다.

 

ul / li 사용법과 기본 마크

4. <h1><h2><h3>...<h6> (heading)

• 헤딩태그라고도 하며, 본문의 헤드라인 요소에 사용된다.
• 검색노출에 관여되며 일반적으로 <h1>은 메인로고, <h2>는 메인 카테고리, <h3>는 서브 카테고리에 사용된다.
• <section>태그 안에는 <h2>태그를 사용하는것이 웹표준이다.

 

5. <table><tr><th><td>

• 테이블 태그이며, 테이블형식의 요소에 사용된다.
• <tr>은 가로 줄(행)
• <th>, <td>는 세로 줄(열)
• <table>태그는 내부 셀 전체의 width합이 부모의 너비보다 작을시 나머지는 여백으로 대체된다.
• <table>태그에 border-collapse:collapse 속성을 지정해야 셀간의 테두리 겹침을 처리할 수 있다.

<table>사용법

출력결과

6. <dl><dt><dd>(Definition List / title / data)

• 정의목록 태그이며 "A는 B다" 형식에서 많이 사용된다.
• 하나의 <dl>안에 하나의 <dt>만 사용가능하며 <dl>은 2개이상 사용가능하다.

---

CSS

• width : 요소의 너비;
• height : 요소의 높이;
• border: 선의 두께 / 색상값 / 선의형태;
• margin : 바깥여백(상) /  바깥여백(우) / 바깥여백(하) / 바깥여백(좌);
• padding : 안쪽여백(상) /  안쪽여백(우) / 안쪽여백(하) / 안쪽여백(좌);
• background-color : (배경의) 색상값;
• background: url(이미지의 절대/상대경로) no-repeat cover;
• list-style : 마크형태;  (*list-style은 ul, ol, li에만 사용되는 속성이다.)