HTML_DAY2

12311 단어 htmlhtml

목록 만들기

  1. 순서 있는 목록
	<ol>,<li> 태그
    목록을 표시할 내용 앞뒤에 <ol>,</ol> 태그를 두고,
    그 사이에 <li>,</li>태그 삽입
    
    예시)
    	<ol>
        	<li> 껍질을 깐다 </li>
            <li> 뚜껑을 연다 </li>
            <li> 스프를 넣는다 </li>
        </ol>
    
    목록은 기본적으로 숫자 1,2,3 으로 번호를 붙임
    다른 속성으로 순서를 나타내고 싶다면 type속성 이용!
    
    여러 개의 순서 있는 목록을 연결하여 나타내고 싶을때는
    start속성을 이용하여 연결 가능
    
    	type="1" 숫자(기본값)
        type="a" 영문 소문자
        type="A" 영문 대문자
        type="i" 로마 숫자 소문자
        type="I" 로마 숫자 대문자
        
    예시)
    	<ol type="a">
        	<li> 각종 채소를 깨끗이 세척한다</li>
            <li> 드레싱을 만든다</li>
        </ol>
        <h4><b>플레이팅</h4>
        <ol type="a" start="3">
        	<li> 샐러드를 담을 볼을 준비한다</li>
        </ol>
  1. 순서 없는 목록
	<ul>,<li> 태그
    순서가 중요하지 않을 때 사용
    순서 없는 목록은 항복 앞에 작은 원이나 사각형을 붙여 구분하는데
    이를 '불릿(bullet)'이라고 함
    
  1. 설명 목록
    <dl>,<dt>,<dd> 태그
    이름과 값 형태로 구성된 목록
    이름 부분을 지정하는 <dt>태그, 값 부분을 지정하는 <dd>태그
    <dl></dl> 태그 사이에 한 쌍의 <dt>,<dd>태그가 들어가며
    한 <dt>태그에 여러 개의 <dd>태그 사용 가능
    
    예시)
    	<h3>발렌타인 데이 선물 구성</h3>
        <dl>
        	<dt>선물용 15구</dt>
            <dd>A타입 : 화이트 초콜렛 8구 & 다크 초콜렛 7구</dd>
            <dd>B타입 : 스트로베리 초콜렛 8구 & 말차 초콜렛 7구</dd>
        </dl>

목록 만들기

	표의 시작과 끝 <table>태그
    표의 제목 <caption>태그
    행을 만드는 <tr>태그
    셀을 만드는 <td>,<th>태그
      *<td>태그는 표의 제목 행에 셀을 만들 때!
      <td>와 달리 진하게 표시되고 중앙에 배열됨
    
    표시된 내용 외에 표 아래쪽에 합계나 요약을 표시하고자 할 때
    <thead>,<tbody>,<tfoot>태그 이용
    
    행 병합 <rowspan>태그
    열 병합 <colspam>태그
    
    특정 열에 색을 넣거나 너비를 바꾸고 싶을 때 <col>,<colgroup>태그
      <col>태그는 열을 1개만 지정할 때
      <colgroup>태그는 열을 2개 이상 묶을 때
       *두 태그는 반드시 <caption>태그 다음에 써야 함
        즉, 표의 내용이 시작 되기 전 '열의 상태'를 알려주는 것!

좋은 웹페이지 즐겨찾기