이미지 태그, 이미지맵, 글자 태그, 테이블 태그

11월 20일 2일차

 

 

 

크롬 image downloader 확장기능 추가

 

img src="주소" alt="속성" 두 가지 요소 필수

src="http://placehold.it/너비x높이" 빈 상자 삽입

imagemap: 하나의 사진에 여러 개 링크 삽입

<img src="이미지파일명" usemap="#맵이름" alt="">

<map name="맵이름" id="맵이름">

       <area shape="영역모양" coords="좌표값" href="링크주소" alt="설명글">

</map>

 

* name: 프로그램 이름으로도 사용, id, class 디자인용

* 좌표값

- 사각형(rect): x시작점,y시작점,x끝점,y끝점

- 원형(circle) :x중심점,y중심점,반지름

- 다각형(poly) : x1,y1,x2,y2,x3,y3...

 

* caption

<figure>
 <img src="source/coffee.jpg" alt="커피">
    <figcaption>그림 3-2. 카페라떼</figcaption>
</figure>

figure (그림) - 블록요소로 상하좌우 마진이 있음. 좌우 마진이 더 넒음.
본문에 비해 독립적인 내용 하나를 표현하기 위해 사용함.
이미지에 주로 사용디지만 꼭 이미지 뿐만 아니라 도표, 그래프, 예제 등 본문 흐름에 비해 별도로 추가되는 애용을 감싸고 설명을 붙일 때 사용.
figcaption 요소로 figure의 제목을 붙임. (블록요소)
figcaption 은 반드시 figure의 처음 자식 혹은 마지막 자식으로만 위치해야 함.

figure 요소에 의해서 이미지가 좀 더 격상이 됐음. 다만 figure 요소에 의해 본문의 흐름이 잠시 끊어지므로 비교적 큰 내용에 대해서 사용하는 것이 좋음.

 

strong b와 같은 역할이나 html5에서 쓰는 태그(b는 구버젼), 메모리적 측면에서 유리함

em (emphasize) i와 같은 역할, html5에서 i는 폰텔로 등 사용시 아이콘 용도로 사용

ins (insert) 밑줄

del (delete) 가운뎃줄

q (quote) "" cite="출처"

blockquote 블럭태그, p안에 들어갈 수 없음

sup 윗첨자

sub 아래첨자

abbr abbreviation 점선 밑줄 및 설명

ruby 선언태그, rt 위에 작은 설명

small 주로 copyright 등 side comment

mark 배경색(highlight)

kbd 키보드 표현

cite 작품의 제목

dfn (definition) 이탤릭체 표현 및 설명

 

* 특수문자

&nbsp; 띄어쓰기

&quot; "

&amp; &

&lt; <

&gt; >

&copy; ©

&middot; 중간점

 

* 상대 경로 지정

/ 하위폴더

./ 현재폴더

../ 상위폴더

../../ 차상위폴더

 

마크업 시 유의점

- 골조 만든다는 것에 유념할 것, 디자인은 css로 들어감

- 영역별로 div 나눌 것 (배경 달라지는 것 고려)

- footer는 위에서 아래 순으로

- footer logo는 중요도가 낮으므로 h1 태그 사용하지 않음

- 로고는 무조건 anchor 태그 포함할 것

- 인라인 덩어리는 p 안에 span으로 묶기

 

 

table

표 위에서 아래로 내려간다고 생각할 것

tr (table row) 항상 먼저 작성(세로줄 갯수)

th (table head) 볼드, 센터 자동설정, 생략가능

td (table data)

caption 제목, table 태그 시작하자마자 사용

 

* 합치기 속성

colspan column 

rowspan row 

- 먼저 전체 테이블 작성, 항목 입력 후 조정할 것

 

* style css (html로 작업가능했으나 현재는 css로 작업), head 태그 안에 작성

    <style>
        table,tr,td,th{
            border:1px solid navy
        }
    </style>

 

태그 속성 for 웹 접근성

id th에 사용, td 사용불가, 무조건 영문 먼저, 동일 id 사용 불가

header td에 사용, 여러 id 동시 사용 가능

 

* 줄 grouping 태그

thead 첫줄(제목줄)

tbody 생략(입력하지 않아도 자동으로 그룹화가능, 입력 시 html5 에러 발생)

tfoot 마지막줄(통계 등)

 

* 요약(캡션)

<figure>

     <table>

     </table>

     <figcaption>

     </figcaption>

</figure>

 

* 사용한 단축어

tr*5>th+td*3

tr*2>td{테이블 내용$}*3 ($ 순차적 숫자 자동 입력)