네이버 부스트 요약- 이미지 /순서/테이블요소

ul unordered list 태그는 순서가 없는 리스트를 표현할때 사용

ol ordered list 태그는 순서가 있는 리스트를 표현할때 사용

dl definition/description list 태그는 용어와 그에 대한 정의를 표현할 때사용

- 용어와 설명이 하나이 세트로 항목을 이루고 하나이상의 항목으로 리스트과 이루어지는 구조

dt 용어를 나타내는 태그

dd 용어에 대한 정의 또는 설명을 나타내는 태그

- 용어 하나에 여러정의가 들어갈때 dd 를 한개 이상 쓴는 것이 가능

 

img 는 문서에 이미지를 삽입하는 태그로 닫는 태그가 없는 빈 태그

src 속성

- img의 필수 속성으로 이미지의 경로를 나타내는 속성 

alt 속성

- 이미지의 대체 텍스트를 나타내는 속성

- 대체 텍스트는 이미지를 대체하는 글을 뜻, 웹 접근성 측면에서 중요한 속성

- src 속성과 더불어 반드시 들어가야 하는속성

width/height 속성

- 이미지의 가로/세로 크를 나타내는 속성 

- 값의 단위 필요없음 , 값을 입력하면 자동으로 필셀 단위로 계산

- width/height 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는측면서 좋습니다

-width/height 속성이 업승면 이미지는 원본 크기대로 노출

둘중하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경

반면 두속성 모두선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경

상대경로와 절대경로

src속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있습니다.

상대경로는 현재 웹페일ㄹ 기중을 상대적으로 이미지의 위를 나타내는 경로이고, 

절대경로는 실제 그 이지가 위치한 곳의 전체 경로 

이미지 파일 형식

gif 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식

jpg 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상표현을 지원하는 형식

- 투명을 지원 하지 않음

png 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

 

표의 구성요소

-표는 셀 이루어짐

-표의 가로 row ,열 column 

 

-table 표를 나타내는 태크

-tr 행을 나타내는 태그

- th 제목셀을 나타내는 태그

-td 셀을 나타내는 태그

하나의 table은 하나 이상의 tr로 이루어져 있으며,

tr은 셀은 나타내는 th td를 자식임

표를 구성할때는 위에서 밑을 좌측에서 우측으로 작성

표의 구조와 관련된 태그

- 표가 복잡해지면 표를 해석해서 음성으로 전달해야하는 스크린 리더기와 가튼 보조기기통해서는 표의 내용을 이해하는것이 더욱 어려워 질것입니다.

따라서 표를 구조적으로 팡악하기 위해 도움이 되는 태그를 사용해야함

 

caption 표의 제목을 나타내는 태그

thead 제목 행을 그룹화하는 태그

tfoot 바닥 행을 그릅화하는 태그

tbody 본문 행을 그룹화하는 태그

 

type =text 

주로 아이디 이름 주소 전화번호등에 단순한 텍스트를 입력할때 사용

placeholder 속성이 존재한다

placeholder 속성은 사용자가 입력하기전 미리 화면에 노출하는 값, 입력하는 값의 양식 표현

 

type=password

암호와 같이 공개할수없는 내용을 입력할때 사용

화면에는 type=text 와 같게 나타나지만 실제로 입력할 때 값을 노출하지 않는다

 

type =radio

라디오 버튼 만들때 사용

라디오 버튼은 중복선택이 불가능 하나의 항목만 선택

 

type=checkbox

체크박스를 만들때 사용

체크박스는 중복선택이 가능